2019-8-25

[メモ]画像の非可逆圧縮は何が良いか

４〜５年前の「JPEGmini 最強！」の時代で止まっていたので、改めて調べてみた。

結論

mozjpeg 最強

候補

• JPEGmini
• ImageOptim
• Webp
• mozjpeg

結果

圧縮率・品質自体は４つともそんなに大差はなかった。（品質に関しては目視では４つの違いがわからん）（目視でわからんのサンプルも置かない。めんどい）

圧縮率・品質に差がないのであればそれ以外の部分で選ぶことになるが、JPEGmini と ImageOptim は CUI で実行できないのが微妙。Webp は IE11、Safari 非対応なのが駄目。

mozjpeg に関しては CUI で実行可能で、サーバーサイドでの圧縮も簡単に行える。Webp と異なり普通の jpeg 形式なため取り回しも良い。

mozjpeg の使い方

yarn add imagemin imagemin-mozjpeg

して

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async () => {
    await imagemin(['images/*'], {
        destination: 'compressed_images',
        plugins: [
            imageminMozjpeg({quality: 70})
        ]
    });
    console.log('done');
})();

な感じのスクリプトを書けばいい。

ちなみに、mozjpeg のバイナリは node_modules/mozjpeg/vendor 内に存在する。バイナリは mozjpeg の postinstall タイミングでプラットフォームに適したものがダウンロードされる模様。

引っかかったこと

imagemin-mozjpeg の readme に use オプションを使って書かれていたが、これは imagemin の以前の書き方みたい。use を使って書いてたらエラーも何も出ず失敗するという状況で理由がわからず詰まった。

参考

画像の最適化を自動化する  | Web Fundamentals | Google Developers

画像圧縮に関してめっちゃ詳しく書いてくれてる

Squoosh

Google が提供している画像圧縮サービス。Webp とか mozjpeg がどの程度圧縮されるのか見てみるのに使った。