大量の画像の容量削減を一括で行うメモ-減色とメタ情報削除をCUIで実行する-

技術系エントリーです

iPhoneアプリやwebアプリを制作しているとPNG画像の容量を軽くしたい時がある。 前から何度もやっている内容なものの、そういえばメモってなかったのでメモ。

ニーズの整理

• PNG画像の容量を少なくしたい
• 画像軽量化と言えば、「減色」と「メタ情報の削除」の両方やりたいよ
• 大量の画像を一括で処理したい
• 環境はmacOSだ
• 無料でできるのが良い

やること

①必要なもの揃える

• 主にメタ情報削除用：ImageOptim
  https://imageoptim.com/

• 主に減色用：pngquant、または、ImageAlpha http://pngmini.com/

②cd〜で、画像ファイルのある場所に移動し、コマンドラインで画像軽量化。

$ cd ここに画像パス 
$ /Applications/ImageAlpha.app/Contents/Resources/pngquant --speed 1 --force --ext .png 32 *.png; open -a imageoptim *.png

関連事項を色々ザックリ説明

• 減色作業とかメタ情報削除とかを、画像書き出すたびに毎回やるのは超めんどくさいので、CUIと計算機に任せて自動化、効率化したかった
• そこで、pngquantを使用して圧縮をする
• pngquantは、CUIから使用できるので、自動化、効率化との相性がいい
• pngquantは、ImageAlphaの内部エンジンとして使われているので、それを使う
• ImageAlphaをインストールすると、内部ソースとしてpngquantが入っているのでそれを呼び出して実行する
• ちなみに、pngquantだけどっかから持ってきてもOK

その他

・基本的な命令

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

--extは接尾語の指定。 --forceは上書き命令。 256などの数字は色数（2〜256）。 省略した場合は256色。

・一括処理

$ pngquant *.png

ワイルドカード「*」を使うだけ。

・imageOptimの呼び出し 　

$ pngquant open -a imageoptim *.png

imageOptimはCUIから実行できる。ステキ。 「*.png」のところにはファイル名を入れるが、一括処理したいので「*.png」とした

・指定画像のみの適用

$ pngquant hoge.png fuga.png boge.png

・変換スピードの設定

$ pngquant --speed 1 hoge.png

1がもっとも高品質。一番処理時間かかる。 10が最速。デフォルトは3。

ディザ処理の無効化

$ pngquant --nofs hoge.png

ディザ処理の無効化。 ディザ処理って何さ？⇒Photoshop とディザ処理 （Photoshop CC）

・変換品質を指定

$ pngquant --quality 100 hoge.png

※全部CUIでイケるのでCIの中に組み込んだりできるのでは？とも期待。
→現在のチームでは、デプロイ時に自動で実行できるようにしております。楽です。 ※JPGが対応できないのが痛手。JPGに対応したいときはJPEGminiというソフトがある

参考サイト：

pngquantでPNG圧縮
Macの画像圧縮アプリ、ImageOptimとImageAlphaを比較してみた
ImageAlphaのバッチ処理に感動した
画像の最適化をCLIだけで行うgrunt-imageを作った