画像圧縮をする方法はいくつかありますが、どれを使うべきなのか確かめるべく比較してみました。
WordPressでサイトを運営しているという前提ですが、プラグイン以外の方法も調べています。
- 比較対象
- Compress JPEG & PNG images
- EWWW Image Optimizer
- gulp-imagemin
- pagespeed insightsからダウンロード
- 圧縮結果・画像①
- 圧縮結果・画像②
- 圧縮率が高い分ディテールが失われる
- PageSpeed Insightsで合格点を取るには
- まとめ
比較対象
比較するのは以下の方法です。
- Compress JPEG & PNG imagesプラグイン
- EWWW Image Optimizerプラグイン(無料)
- gulp-imagemin
- pagespeed insightsからダウンロード
- Photoshop
Compress JPEG & PNG images
Compress JPEG & PNG images | WordPress.org
WordPressのプラグインです。以下からAPIキーを取得して利用できます。
月に500枚までは無料で使えます。
ちなみにプラグインじゃなくてもWeb上からも使えます。
TinyPNG – Compress PNG images while preserving transparency
EWWW Image Optimizer
WordPressのプラグインです。画像圧縮ではこちらが人気なのかな?有名なやつです。
EWWW Image Optimizer | WordPress.org
gulp-imagemin
gulpで画像圧縮を自動化できるパッケージです。
以下のドキュメントを見た感じ、圧縮率を指定するオプションはなくなったのかな?
とりあえずデフォルトのまま圧縮します。
GitHub – imagemin/imagemin-jpegtran: jpegtran plugin for imagemin
gulpfile.jsはこんな感じ(jpegのみ)
const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const imageminJpg = require('imagemin-jpegtran'); gulp.task('imagemin', function(){ var srcDir = 'src/*.+(jpg|jpeg)'; var depDir = 'dep'; gulp.src( srcDir ) .pipe(imagemin([ imageminJpg({ progressive: true }) ] )) .pipe(gulp.dest( depDir )); }); gulp.task('default',['imagemin']);
pagespeed insightsからダウンロード
pagespeed insightsはサイトの速度を計測するGoogleのサービスです。
実は、計測結果の下から最適化された画像やソースコードをダウンロードできるようになっています。
ここでGetできる画像を基準としましょう。
圧縮結果・画像①
オリジナル 193 KB
- Compress JPEG & PNG images ・・・ 93.7KB
- pagespeed insights ・・・ 166KB
- EWWW Image Optimizer ・・・ 190 KB
- gulp-imagemin ・・・ 190 KB
PageSpeed Insightsで合格点を取るには、Photoshopの画質54相当でした。
以下はCompress JPEG & PNG images。
以下はPageSpeed Insightsでダウンロードした画像。
以下はEWWW Image Optimizer
正直よくわかりません。
圧縮結果・画像②
オリジナル 221 KB
Compress JPEG & PNG images ・・・ 51KB
pagespeed insights ・・・ 55.9KB
EWWW Image Optimizer ・・・ 210 KB
gulp-imagemin ・・・ 210 KB
PageSpeed Insightsで合格点を取るには、Photoshopの画質51相当でした。
EWWW Image Optimizerとgulp-imageminは同じファイルサイズになるようです。
圧縮率が高い分ディテールが失われる
以下はCompress JPEG & PNG imagesで圧縮した画像を二倍に拡大した画像です。
以下はEWWW Image Optimizerで圧縮した画像を二倍に拡大した画像です。
画質の差は文字周りに出やすいですね。
EWWW Image Optimizerは圧縮率は低いですが、シャープさが残っています。
Compress JPEG & PNG imagesは圧縮率が高い分文字の周りがにじんでいます。
とはいえ拡大しないと分からないレベルの違いです。スマホから見たら違いは分からないでしょう。
PageSpeed Insightsで合格点を取るには
EWWW Image Optimizer(無料)やgulp-imageminではGoogleのPageSpeed Insightsを満足させることはできないようです。
PageSpeed Insightsで合格点を取るには、
- Compress JPEG & PNG imagesプラグインを使う
- Photoshopで55~50くらいの画質で書き出す
のが良いみたいです。
まとめ
サイトの速度が気になる人は、Compress JPEG & PNG imagesを使いましょう。
画質が気になる人はEWWW Image Optimizerを使いましょう。
WordPressじゃないならgulp-imageminでWatchして自動化すると楽なのでおすすめです。