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

スポンサードリンク

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

WordPressでサイトを運営しているという前提ですが、プラグイン以外の方法も調べています。

比較対象

比較するのは以下の方法です。

  • 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

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

f:id:shiromatakumi:20180827172647j:plain

ここでGetできる画像を基準としましょう。

圧縮結果・画像①

f:id:shiromatakumi:20180827172228j:plain
オリジナル 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。

f:id:shiromatakumi:20180827175029j:plain

以下はPageSpeed Insightsでダウンロードした画像。

f:id:shiromatakumi:20180827175132j:plain

以下はEWWW Image Optimizer

f:id:shiromatakumi:20180827175106j:plain

正直よくわかりません。

圧縮結果・画像②

f:id:shiromatakumi:20180827173812j:plain

オリジナル 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で圧縮した画像を二倍に拡大した画像です。

f:id:shiromatakumi:20180827174420j:plain

以下はEWWW Image Optimizerで圧縮した画像を二倍に拡大した画像です。

f:id:shiromatakumi:20180827174429j:plain

画質の差は文字周りに出やすいですね。

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