gulp-imagemin, gulp-pngquant

• 링크

상황

현재 gulp 탬플릿에는 이미지 최적화 라이브러리로 두 가지가 사용되고 있다.

1. gulp-imagemin
2. gulp-pngquant

하지만 gulp-imagemin에도 png 이미지를 최적화하는 기능이 들어있다.
이에 의문이 들기 시작했다.

테스트

원본 png 이미지 크기는 20.07kb이다.

1. gulp-imagemin 라이브러리 -> optimizationLevel: 5 -> 16.51kb
2. gulp-pngquant 라이브러리 -> quality: ‘90’ -> 5.3kb

계속 반복해도 결과는 똑같다.
git에서 파일이 변했다고도 인식하지 않는다.
파일을 다르게 인식한다는 사실은 잘못알고있는 사실 같다.
그냥 최적화된 이미지 파일을 src 폴더로 내보내서 거기에서 온 착각 같다.

결론

lossy VS. lossless image

1. 이미지 파일에 손실(lossy)을 주면서 최적화하는 건지,
2. 이미지 파일에 손실을 주지 않으면서(lossless) 최적화하는 건지,

의 차이인 것 같다.

gulp-pngquant 라이브러리는 이미지에 손실을 주면서 최적화하는 라이브러리인 것 같다.
그래서 gulp-pngquant로 하면 이미지 손실이 있는 이슈가 발생했던 것 같다.
때문에 해당 라이브러리는 주간 다운로드 횟수가 600회밖에 안된다. 인기가 없다.

반면, gulp-imagemin은 이미지에 손실을 주지 않으면서 최적화하기 때문에 인기가 많다.
그리고 주간 다운로드 횟수도 13만회나 된다.

png 최적화도 gulp-imagemin으로 하는 것이 좋을 거 같다.