はじめに
サイト作成時に容量を減らす方法として画像圧縮があります。
どの方法がベストなのか検証してみました。
検証した圧縮方法
・gulp-imagemin
・imagemin-pngquant
・イメージオプティム
・tinypng
・gulp-tinypng-compress
検証画像
・jpeg
・png
検証結果
| jpg | png | |
|---|---|---|
| 何もしない | 10,657バイト(10.657KB) | 97,660バイト(97.66KB) |
| gulp-imagemin | 10,504バイト(10.504KB) | 92,126バイト(92.126KB) |
| imagemin-pngquant | ----- | 24,496バイト(24.496KB) |
| イメージオプティム | 10,038バイト(10.038KB) | 87,165バイト(87.165KB) |
| tinypng | 9,224バイト(10.657KB) | 27,254バイト(27.254KB) |
| gulp-tinypng-compress | 9,224バイト(10.657KB) | 27,254バイト(27.254KB) |
考察
・画質を変化させることなく容量を落とすなら、イメージオプティムが一番安全
・多少画質落としても大丈夫な場合はimagemin-pngquantをタスクランナーで動かすのが楽
・一番楽に、多く容量を落とすならtinypngだが、仕事で使っている公開前の画像等をfileにアップするのが少し怖い気がする
・その変わりにgulp-tinypng-compressを使ってみたが
1ヶ月500画像まで(それ以上は有料)
5MB以上の画像は圧縮不可
tinypngに登録をして、API keyを取得する必要がある...等といった点を考慮すると、ちょっと面倒かと
最後に
時と場合によりけりで使い分けるしかないですが、何を使って圧縮するか考える材料になればと思います。
また、これ以外の方法を使っている方がいましたらぜひ教えていただきたいです。