by
Oct 09. 2019
mozjpeg로 JPG 최적화
JPG 용량 절감의 답, mozjpeg
1. mozjpeg vs gutzli
2. mozjpeg를 일반사용자들이 어떻게 쓸 수 있을까?
3. 배치파일을 만들어보자!
4. 압축 전후 이미지 비교
5. jpg를 꼭 고집할 필요는..
---------
mozjpeg vs guetzli
모질라의 mozjpeg vs 구글의 guetzli
웹페이지 로딩을 위해 사용하는 데이터 중 대부분은 이미지 데이터인 경우가 많습니다. 저희 서비스처럼 커머스인 경우 항상 이미지 용량에 대해 예민하게 접근하는 편인데요. 물론 다른 웹 성능이 뛰어난 것도 중요하지만 이미지용량도 다이어트가 되고 있는지 짚고 넘어가지 않을 수 없습니다.
이미지 용량을 줄이기 위한 노력은 예전부터 시도되어왔고 현재 jpg파일만 놓고 라이브러리를 비교하자면 이 두가지 라이브러리 mozjpeg, guetzli가 많이 언급됩니다.
mozjpeg는 JPG용량을 감소시켜주는 jpeg라이브러리입니다.
PNG에 대해서는 pngquant라는 라이브러리를 주로 사용하고, 워낙 이 pngquant의 용량 절감능력이 뛰어나지만, jpg의 경우에는 압축률의 guetzli와 속도의 mozjpeg가 경쟁하고 있습니다.
jpg보다 효율이 좋은 webp나 heif와 같은 차세대 이미지 포맷도 등장하고 있으나, 범용성을 따진다면 mozjpeg로 처리하는 것이 좋습니다.
guetzli는 압축효율이 뛰어나지만 속도가 mozjpeg과 달리 한장을 압축해도 매우 오래걸립니다.
guetzli는 경우에 따라 mozjpeg대비 100배~1000배까지 변환 시간이 걸리기 때문에 여유가 넘치는 개인 사용자나, 고사양 PC를 사용하는 사용자, 또는 미리미리 서버 자원을 활용해 변환을 처리할 수 있는 입장에서는 활용이 가능하겠습니다. 현재로서는 mozjpeg가 아직까지는 그 변환 속도 때문에 앞서 있는 입장입니다. 변환 속도만 놓고 보자면 guetzli는 아직 mozjpeg에 비하면 걸음마 단계입니다.
* 더 읽어보기 _ 구글DEV '이미지 최적화 자동화하기' 중 'JPEG 최적화 인코더' (링크)
mozjpeg를 일반 사용자들이 어떻게 쓸 수 있을까?
-mozjpegui (윈도우용, 압축률 지정가능하지만 매번 설정 초기화)
mozjpeg으로 개발자가 아닌 일반 사용자가 쉽게 변환할 수 있는 방법으로 mozjpeGUI라는 툴이 있습니다. 이는 일본의 개인유저가 만든 mozjpeg을 활용한 툴인데, 사용법은 비교적 간단한 편입니다만 압축값을 매번 지정하고 선택한 옵션이 계속 유지되지 않는다는 단점이 있습니다.
mozjpegui 2.0 다양한 옵션을 조정할 수 있지만 설정값들이 저장되지 않는다-imagecompressor (웹, 압축률 4가지 프리셋 제공)
mozjpeg을 온라인에서 이용할 수 있는 방법으로는 imagecompressor.io (링크)라는 사이트가 있습니다. mozjpeg의 압축률 4가지(q60, q70, q80, q85)를 제공합니다. 플랫폼에 관계없이 지원되기 때문에 좋지만,아쉬운 점은 이미지를 웹에 올리는 시간때문에 업로드 시간이 더 소요된다는 점이고, 압축률의 상세조정이 불가능합니다.
imagecompressor 웹에서 실행할 수 있으나 압축률 상세조정이 어렵다업무에 활용하기 위해서는 고정 압축률값을 지정하고 해당 압축률로 일괄 변환시킬 수 있어야겠죠.
그래서 대안으로 제가 일괄 변환이 가능한 배치파일을 만들어 보았습니다.
그럼 배치파일을 직접 만들어보자
mozjpeg을 비개발자가 쉽게 사용할 수 있고, 일괄로 변환을 처리하고, 변환할 압축값을 미리 지정할 수 있게 고민하다가 mozjpeg을 사용한 배치파일을 하나 만들었는데요. 도스용 쉘스크립트로 작성하였기 때문에 해당 배치파일은 윈도우에서만 실행되는 점 참고하세요.
압축파일 다운로드 (링크)
본 압축파일을 푸시고 INPUT폴더에 변환할 이미지를 넣은 다음, OUTPUT폴더에 변환된 이미지를 확인해보시면 됩니다.
저는 압축하고자 하는 값으로 76, 80, 84, 88정도로 생각해서, 이렇게 4개의 압축값으로 일괄 변환하는 배치파일을 만들었습니다. q76, q80, q84, q88 배치파일입니다.
압축률 값을 바꾸고 싶으시면 윈도우에서 해당 배치파일을 우클릭하시고 '편집'을 눌러 메모장이 열리면 Ctrl + F로 76을 두번 찾아 원하는 값으로 바꿔주세요. 압축률값은 전체 스크립트에서 두번 나오니까 두번 바꿔주셔야겠죠!
아래는 원본 이미지와 q80으로 변환한 이미지입니다. feat 육사시미.
용량으로는 거의 2.7배의 차이가 나는데 그 정도 차이라고 느껴지시는지요?
원본이미지 1.08mb
q80이미지 419kb (원본대비 -63%)
