mozjpegとimagemagickでJPEG圧縮率を比較してみる
以前の記事「mozjpegでJPEGを一括縮小するバッチファイル」で紹介したとおり、ブログにアップロードするJPEGファイルはmozjpegで品質85にしてからアップロードしています。
(PNGについてはoptipngを使用)
なぜJPEGの品質を85にするのか
GoogleのPageSpeed Insightsのスコアが上昇するからです。
……というのは半分冗談で半分本気ですが、見た目がほとんど変わらないならファイルサイズは小さければ小さいほど良いです。ぼくは趣味でいくつかブログを運営してきましたが、10年近く運営しているブログでは写真だけで2GB以上あります。カメラブログでもないのに…。
今のレンタルサーバーなら容量的には2GBくらい問題ありませんが、無料ブログだと最大容量が512MBとか1GBとかだったりしますよね。そうでなくとも、スマホ等のモバイル環境で見ている方のことを考えるとネットワークの転送量はなるべく少ないほうが良いでしょう。
そこで画像の最適化、という話になります。下記ページでGoogleさんが詳しく解説していますが、簡単に言うとJPEGの場合、品質85を超えるとファイルサイズが急上昇するわりに視覚的な変化が少ない、ということです。
https://developers.google.com/speed/docs/insights/OptimizeImages
品質80~95でJPEGファイルサイズの変化を見てみた
テストに使用した画像はこちらの4K写真(4,255×2,832px)です。
配布元:https://commons.wikimedia.org/wiki/File:Bhumibol_Bridge_-_Bangkok_(4986441399).jpg?uselang=ja
サイズ(バイト) | 圧縮率 | |
---|---|---|
元ファイル | 8,412,803 | - |
品質95 | 3,012,241 | 35.8% |
品質90 | 2,018,347 | 23.9% |
品質85 | 1,526,129 | 18.1% |
品質80 | 1,271,811 | 15.1% |
※品質の変更にはmozjpegを使用
元写真が1枚で8MBもありますから、品質を落としてもけっこうなファイルサイズですね。
個人的には品質80でも問題ないくらいに思えますが、品質90→85で5.8%の差があるのに比べ、品質85→80では3%の違いなので、確かに品質85くらいがちょうど良い塩梅なのかも知れません。
ツールごとの圧縮率をテストしてみた
mozjpegの最適化性能が高いことはわかっていますが、先述のGoogleのページではImageMagickのconvertコマンドの事例が載っていましたし、サイズにどのくらい違いがあるのか試してみました。
また、mozjpegとImageMagickはコマンドラインツールですが、GUIのツールとしてGIMPとPaint.NETも使ってみました。
mozjpegの設定
■実行コマンド
cjpeg -optimize -quality 85 -outfile [変換先] [変換元]
■コマンドラインオプションの解説
-optimize | ハフマンテーブルの最適化を行う |
-quality 85 | 圧縮品質を85にする |
尚、mozjpegの場合、デフォルトでサンプリング=4:2:0、画像走査=プログレッシブです。
Exif情報については別途jpegtran.exeを実行しなければいけないっぽいので省略しました。
ImageMagickの設定
■実行コマンド
convert [変換元] -sampling-factor 4:2:0 -strip -interlace jpeg -quality 85 [変換先]
■コマンドラインオプションの解説
-sampling-factor | サンプリング4:2:0 |
-strip | Exif情報を削除 |
-interlace jpeg | 画像走査をプログレッシブで保存する |
-quality 85 | 圧縮品質を85にする |
GIMPの設定
品質 | 85 |
Exif | 保存しない |
サンプリング | 4:2:0 |
画像走査 | プログレッシブ |
Paint.NETの設定
Paint.NETは品質設定しかない!
でも、Exif情報を削減する方法は一応あって、下記操作でExif情報が消えるため、そのようにしました。
- 画像を開く
- Ctrl + Aで画像を選択
- Ctrl + Cで画像をコピー
- Ctrl + Alt + Vで新しい画像として貼り付け
この操作をしてもExifのプログラム名に「paint.net」という記述だけは入るようです。
実行結果を比較
サイズ(バイト) | |
---|---|
元ファイル | 8,412,803 |
GIMP | 1,861,729 |
ImageMagick | 1,849,237 |
Paint.NET | 1,819,157 |
mozjpeg | 1,526,129 |
やはりmozjpegの圧縮率が高いですが、Paint.NETが意外と健闘していてびっくり。
画面のスクリーンショットを撮って編集したり、スキャナでスキャンした書類画像(300dpiはデカすぎる)を小さくしてメールするときに起動が早いPaint.NETを愛用しているのですが、たしかにけっこうファイルサイズ小さくなるなぁとは感じていたんですよね。
mozjpeg/ImageMagick/GIMP/Paint.NETの配布場所
- mozjpeg※1 https://mozjpeg.codelove.de/binaries.html
- ImageMagick https://www.imagemagick.org/script/download.php
- GIMP https://www.gimp.org/downloads/
- Paint.NET https://www.getpaint.net/download.html#download
まとめ
- JPEGは品質85にするとサイズが激減するし見た目も許容範囲
- mozjpeg/imagemagickではmozjpegの圧縮率が高い
- オマケでGIMPよりもPaint.NETのほうが圧縮率が高い
1つのファイルでしか試していないので、とても検証なんて呼べるレベルの話じゃありませんし、GIMPとPaint.NETに至っては内部のオプションがどうなっているのか不明すぎるので、鵜呑みにすると危険かもですが、個人的に愛用しているソフトが健闘していて満足満足。
まぁ、相変わらずブログにアップする画像はmozjpegのお世話になることでしょう。
それから最後に、テストで使った写真のサイズ4,255×2,832pxだとピンとこないかもなので、うちのブログでよく使う幅680pxのサイズでの比較例を出しておきます。
■Paint.NETで680×453px 品質85 ファイルサイズ:60,797バイト
■mozjpegで680×453px 品質85 ファイルサイズ:53,694バイト
うん、見た目の違いはわかりませんな…。