pngquantでPNG圧縮

f:id:nukesaq88:20130416194206p:plain

png形式の画像ファイルを圧縮するためのツールとしてpngquantというコマンドラインから使用するソフトがあります。もちろん透過画像も圧縮することができます。


pngquant — lossy PNG compressor

このpngquantは少し前に話題になったpngをWeb上で圧縮してくれるサービスTinyPNGや、Mac用のpng圧縮ソフトのImageAlphaなどの内部で圧縮エンジンとして使用されているそうです。

圧縮の方法としては24/32-bitのフルカラーのpngファイルを256色以下に減色し8-bitのインデックスカラーに変換することで圧縮を行います。
pngquantでは、この減色の際のアルゴリズムやディザ処理が優秀なため、高品質な圧縮処理を実現しているようです。

インストール

実行環境は公式サイトのここから落としてくることができます。
Macの場合Homebrewで簡単にインストールすることだできます。

$ brew install pngquant

使い方

hoge.pngというファイルを圧縮して上書きしたい場合以下のようにします。

$ pngquant --ext .png --force 256 hoge.png

簡単に解説すると
--ext .pngの部分が保存するファイル名につける接尾辞の設定です。
.pngを指定すると元ファイルと同じファイル名になり、例えば_.pngとするとhoge_.pngとなります。
さらにそこに--forceを付け加えることでファイルが既に存在する場合に上書きを許可します。
この--extの設定を省略するとデフォルトで、-or8.png-fs8.pngが指定されます。
256は減色した色数を指定します。指定できる色範囲は2〜256となっており、省略した場合は256色になります。

なので一番シンプルなコマンドは以下のようになり、この場合256色に減色したファイルをhoge-fs8.pngまたはhoge-or8.pngで保存します。

$ pngquant hoge.png

複数の画像を一括変換

ファイル名をホワイトスペース区切りでつなげることで複数の画像を一括で変換することができます。

$ pngquant hoge.png moge.png fuga.png

またワイルドカード文字を用い以下のようにディレクトリ内にあるpngファイルを一括変換もできます。

$ pngquant *.png

その他

その他にもいくつかオプションがあるので簡単に紹介します。

  • 変換スピードの設定

1がもっとも高品質ですが一番処理時間がかかります。v1.8.3では10が最速で、デフォルトは3になっています。

$ pngquant --speed 1 hoge.png
  • IE6対応

Internet Explorer 6 の透過画像に対応します。

$ pngquant --iebug hoge.png
  • Floyd-Steinberg方式のディザ処理の無効化

標準で採用しているFloyd-Steinberg方式のディザ処理を無効化します。

$ pngquant --nofs hoge.png
  • 変換品質を指定
$ pngquant --quality 80-100 hoge.png

参考例

デフォルトの設定で圧縮した画像を以下に貼り付けておきます。
この例だと圧縮前の221kbから圧縮後82kbと半分以下のサイズまで圧縮されました。
2013/04/18 追記 はてなフォトライフにアップロードするとpngサイズが大きくなるようなので、下の画像は表記と実際のサイズに差異があります。参考程度にしかなりません。

圧縮前 221kb
f:id:nukesaq88:20130416184427p:plain

圧縮後 82kb
f:id:nukesaq88:20130416184442p:plain


ちなみにせっかくなのでもっと便利になるようにpngquantを使ったフロントエンドのGUIアプリを作成しようかと、昨日からプロトタイプを作成中です。
もし使えそうなら進捗やらを報告していきたいと思います。

2013/04/25 追記:
作成したアプリを公開しました。
Pngyu