jpg画像の圧縮（プラグインなど）は何を使うのが一番良いの？比較してみた

画像圧縮をする方法はいくつかありますが、どれを使うべきなのか確かめるべく比較してみました。

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キーを取得して利用できます。

TinyPNG – Developer 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のサービスです。

PageSpeed Insights

実は、計測結果の下から最適化された画像やソースコードをダウンロードできるようになっています。

ここで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して自動化すると楽なのでおすすめです。