PNGやJPEGなんかのファイルはいろいろなメタ情報が含まれているのでそれを削除したり、カラーパレットや圧縮の最適化でサイズを小さくでき、そのための色々なツールが存在しています。ウェブサイトで公開するにも、モバイルアプリ内で使うにも、同じ画像ならファイルサイズが小さいに越したことはないので、そのへん色々調べました。今回はPNGについてです。

ウェブサービスだとKraken.ioとかTinyPNGとかがあります。ただこれらはウェブ上で使うものなので手作業が発生してちょっと面倒。せっかくならビルドプロセスに組み込んだりできたほうがいいので、ローカルで使えるツールのほうがいいです。Kraken.ioはAPI用意してくれていますが、月額$10で1000画像までとちょっとお高いです。

でMacでPNGの最適化を行えるツールをいろいろ試して何をするのが一番いいんだということを調査したのでこれはその結果とメモです。調査したツールは5種類。

以下のファイルを圧縮しました。これは自分のプロフィールアイコンとかに使ってる奴とほぼ同じもので、SPSTUDIOっていうサイトで作成したものです。

結果は以下のとおり

ツール名	コマンド	サイズ	比率
PNGOUT	pngout src.png -c2 -f3 dst.png	33,684	0%
AdvanceCOMP	advpng -z -4 src.png	25,731	76.4%
OptiPNG	optipng -o7 -strip all src.png	27,835	82.6%
Pngcrush	pngcrush -brute src.png dst.png	27,528	81.7%
zopflipng	zopflipng src.png dst.png	25,707	76.3%

 

最後のzopflipngはGoogleが2013年3月に公開したzopfliという新しいDeflate互換の圧縮アルゴリズムを使うもので、zopfliと一緒のリポジトリに入っているが、1.0.0のパッケージには入ってないのでリポジトリから直接持ってこないといけません。

結果を見ると、AdvanceCOMPとzopflipngが圧倒的に圧縮率が高いです。この画像だとzopflipngに軍配が上がってますけど、他に試したものではAdvanceCOMPが勝ったりもする。おお、と思って調べたら、AdvanceCOMPは今年の3月にzopfliを使えるようにアップデートがなされていた(2005年以来のアップデート)のでした。それ以前にインストールしている人はすぐにアップデートした方がいいです。

今回の画像は24bitのPNGファイルですが、インデックスカラーにしたほうがサイズは減少するはずなので、pngquantというツールでインデックスカラー化しました。不可逆な圧縮ですが、今回の場合は見た目には変化はほぼわかりません。

ちなみにpngquantは最近2.0が公開され、アルゴリズムが見直されてクオリティが上がりました。サイト上にも「Ver.1はもう使わないように」って書いてあります。で、両方で圧縮してみたところ、やや差がでました。もしまだ1.xを使っているようならアップグレードしたほうが良さげです。

バージョン	サイズ	比率
1.8.3	14,840	44.1%
2.0.1	14,450	42.9%

 

その後、pngrewriteというファイルで更にパレットを最適化しました。このツールの更新は2010年で止まっているのですが、とりあえず使ってみたところ、パレット数が256から253に減って25バイトだけ減りました。

状態	サイズ	比率
pngrewrite前	14,450	42.9%
pngrewrite前	14,425	42.9%

 

まあpngquantでカラーパレット最適化してるからあたり前なんだろうけど、じゃあなんで3個減らせたのか？とかまだ調べる余地はいろいろありそう。とりあえず先に進みます。

ツール名	コマンド	サイズ	比率
PNGOUT	pngout src.png -c2 -f3 dst.png	14,425	0%
AdvanceCOMP	advpng -z -4 src.png	13,169	91.2%
OptiPNG	optipng -o7 -strip all src.png	14,396	99.8%
Pngcrush	pngcrush -brute src.png dst.png	14,394	99.8%
zopflipng	zopflipng src.png dst.png	13,156	91.2%

 

今度も若干zopflipngに軍配があがったです。ちなみにzopflipngが出力した結果はこちら。

画像によっておそらくツールごとの差異は違ってくると思うのですが、とりあえずAdvanceCOMPとzopflipngのどちらかを使うのが良さげですね。

ちなみにGUIでやるなら今回調べたツールはすべてImageOptimに統合されているみたいです。こちらためしてみると、24bitの場合はいまいちだったのですが、インデックスカラーの場合はzopflipngに迫るサイズになりました。

状態	サイズ	比率
24bit	26,062	42.9%
インデックスカラー	13,157	42.9%

 

あと最初に言及した、ウェブサービスとして公開されているツールを２つ調べました。

ツール名	サイズ	比率
オリジナルファイル	33,684	0%
Kraken.io LossLess	25,734	76.4%
Kraken.io Lossy	13,221	39.2%
TinyPNG	14,571	43.3%

 

TinyPNGはインデックスカラー化しかできませんが、KrakenはLossLessとLossyが選べるので両方を比較しました。けど今回の場合はどちらもコマンドラインツールのコンボにかなわなかった感じなので、AdvanceCOMPかzopflipng手元で処理してしまってもよい感じです。