Just Jay's Blog


더 좋은 서비스를 찾아서 새로운 포스팅을 작성했습니다.

2021.05.31 UPDATE: https://justjay.tistory.com/168

 

[블로그 TIP] MozJPEG에서 블로그 로딩 속도를 올려보자 (무료)

블로그를 하면서 항상 걱정되는 것이 블로그 로딩 속도죠. 이미지 하나하나가 용량을 많이 잡아먹어서 빠르게 로딩을 해야 하는 블로그의 특성상 로딩 속도가 길면 부담되는 것이 사실이에요.

justjay.tistory.com


조금 생소할 수 있는 이미지 압축기, Pym을 소개합니다.

 

저는 Pym을 사용하면서 글에 첨부하는 이미지 용량에 대한 부담이 많이 내려갔어요.

약 52.5MB에 달하는 이미지를 변환시키고 나자 대략 전체 이미지 용량이 12MB로 내려갔어요.

 

글 몇 개만 읽으면 데이터가 증발하는 상황은 막은 것 같아요.

 

96% 압축 성공

 

제가 올린 이미지 중 하나는 고양이 이미지인데요, 이미지 하나에 4MB에 달하는 높은 용량을 가지고 있어요.

그런데 Pym으로 96% 압축을 하니 160kb 정도로 내려갔어요.

 

물론 모든 이미지가 저렇게 높은 압축률을 보이는 건 아니지만, 대략 70-80%만 압축시켜도 블로그를 할 때 부담이 상당히 덜하죠.

 

 

우선 Pym을 다운로드할게요.

 

PMY 다운로드 링크

PYM 다운로드 링크: 마이크로소프트 공식 홈페이지

PMY 다운로드 링크: Mac App Store

 

Pym은 Chi Wang 개발자가 제작한 오픈소스 소프트웨어인데요, 윈도우 10 이상, 그리고 macOS 10.13.0 버전 이상, 64비트 프로세서에서 사용할 수 있어요.

 

하위 윈도우 버전, 예를 들어서 XP나 윈도우 7과 같은 환경에서는 사용하기 어려운 점 참고해주세요.

 

 

핌을 이용하시면 총 5가지 방법으로 이미지 변환을 실행하실 수 있어요.

  • OptiPNG
  • MozJPEG
  • WebP
  • Browser PNG
  • Browser JPEG

이 중에서 우리는 WebP를 사용하면 되는데요, 왜인지 살펴보겠습니다.

 

왼쪽 위부터 살펴보면 제가 압축할 사진의 용량인데요, 3.39MB로 낮지 않은 용량이죠.

OptiPNG를 이용해 압축을 진행했더니 14.4MB로 오히려 327% 증가했네요.

MozJPEG는 1MB로 변환되며 70% 압축이 되었네요.

WebP748kB78% 압축된 것을 볼 수 있어요.

Browser PNG18.1MB433% 커진 것을 볼 수 있고요.

Browser JPEG1.32MB61% 압축되었네요.

 

다른 이미지 파일을 압축해도 압축률과 증가율만 다를 뿐, 비슷한 결과가 나왔습니다.

 

OptiPNG는 PNG 최적화 툴이며 이미지 파일에 대한 정보를 손상시키지 않으면서 파일 사이즈를 줄여줍니다. BMP, GIF, PNG, 그리고 TIFF와 같은 이미지 파일도 PNG로 변환시킬 수 있습니다.

 

MozJPEG는 Mozilla(모질라 파이어폭스를 개발한 모질라 재단모질라 코퍼레이션)에서 진행하는 MozJPEG프로젝트의 이름인데요, 1992년부터 있던 JPEG의 압축을 위해, 이를 통해 인터넷 데이터 전송의 효율성 향상을 도모하기 위해서 진행 중인 프로젝트입니다.

 

WebP(웹피)는 웹상의 lossless and lossy(손실/비손실) 압축 이미지를 위한 포맷입니다. On2 테크놀러지스의 기술을 이용해 구글이 개발하였고, 2010년 9월 30일 공개를 했습니다. 웹피 lossy 이미지는 JPEG보다 압축률을 약 40% 개선했고 더 낮은 용량으로 고화질의 사진을 만들어낼 수 있다고 합니다.

 

Browser PNG와 Browser JPEG는 검색을 해봐도 나오지 않네요...

아시는 분은 댓글을 남겨주시면 감사하겠습니다.

 

PMY 사용방법

핌의 사용방법은 기본적으로 Drag & Drop을 사용하고 있습니다.

 

 

원하는 사진을 선택하시고 드래그해서 핌 안에 드롭해주시면 됩니다.

 

 

 

 

그리고 옵션 설정을 해주시면 되는데요, 기본적인 옵션은 이미 설정이 되어있어 따로 건드리실 필요는 없습니다.

 

 

Resize: 크기 변경

Reduce palette: 색깔과 디터링 조정 기능

Lossless: 손실 최소화(선택 시 용량 증가 가능)

Effort: 압축 세기. 높을수록 압축률이 올라간다.

Quality: 이미지 품질. 높을수록 용량이 올라간다.

반응형