pngquantの覚書です。
pngquantの使い方・インストール
PNGツールの多くは、pngquantが大元
Windows、Mac、オンラインと多くのPNG圧縮ソフト・減色ソフトがでていますが、内部的なアルゴリズムは一緒のものが多く、pngquantが大元のエンジンであることが多いです。ここから理解すると、いろいろな圧縮・減色ソフトが体系的に理解しやすいです。
つまり、大元が一緒のため、大きくは変わらないわけですね。GUIが違うヾ(｡・ω・)ﾉﾟ
最初の設定はちょと面倒かもしれませんが、プログラマーはわりとコマンドプロンプトで一括変換した方が早いでしょう。柔軟性がありますし、1回流れを作ってしまえば早いですからね。
GUIツール(グラフィカルユーザインタフェース、ここでは平たくソフトウェア)がいい場合、ソフトウェアやオンラインツールを取捨選択しなければなりません。
GitHUBをみると、pngquant、mozjpeg、ImageOptimの開発者は一緒の方のようですね。すごい！
GUIのメリットは誰でも使いやすいこととデザイナーのひとはやはりプレビュー画面がみれるからよいといいますかね。個人的にもコマンドプロンプトやUNIXは利用しますが、画像となるとプレビューで確認しながら作業したい方です。
余談ですが、pngquantはかつてAdobe社も注目していたようです。
Instead of Save For Web, we’re to use Export: Export As…, which Adobe has built on its Generator platform. Stephen Nielson, writing on Jeff Tranberry’s blog for Adobe, explains:
Adobe Generator is a new, modern, and more efficient platform for exporting image assets from Photoshop. We have been building new capabilities on top of this platform for the past two years, including the new Export As and Device Preview features. The Generator platform allows us to build new, streamlined workflows and incorporate more efficient compression algorithms like PNGQuant into Photoshop.The new Export As workflows are a complete redesign of how you export assets out of Photoshop. Export As has new capabilities like adding padding to an image and exporting shapes and paths to SVG. We also introduced the Quick Export option, which allows you to export an entire document or selected layers very quickly with no dialog.
Going forward, we will no longer develop new features in Save for Web, which is why it now is labeled as “Legacy”. Don’t worry; no features have been removed from it and we know there are critical workflows that still require Save for Web. However, Save for Web does not support, for example, new Artboard documents.
https://medium.com/let-me-repost-that-for-you-zeldman/save-save-for-web-718044237aee
— Jeff Tranberry’s Digital Imaging Crawlspace, “Save for Web in Photoshop CC 2015”
かつて、「Webの保存」はあまり減色効果がよくありませんでした。
しかし、10年以上前の記事です。現在のPhotoshop CCはより洗練されている気がします。とくにM1以降のMacの場合はpngquantのGUIのソフトが使えないため、Photoshopを利用するのがよい手です。
pngquantとimagemagickの比較、どっち!?
pngquantとimagemagickはどっちがいいのか、ちょっと気になりますよね。
After using imagemagick to resize, you can compress the image using pngquant.
(中略)
ImageMagick’s converter is pretty bad and doesn’t support transparency properly:
https://stackoverflow.com/questions/7913401/imagemagick-resizing-and-quality-png
Is it possible to compress PNGs with results similar to TinyPNG/PngQuant in regards to size reduction and quality retention, using vanilla PHP tools like PHP/GD, PHP/Imagemagick and/or intervention/image? TinyPng/PngCompression can sometimes reduce 90% of image size without losing enough quality to be noticed by normal users.
https://stackoverflow.com/questions/72453897/is-it-possible-to-compress-pngs-like-tinypng-pngquant-with-php-gd-imagemagick-in
stackoverflowなどを少し調べたところ、pngquantの方に肯定的な意見が多かったですね。
ただ、記事が古いため、自分で実験した方がよさそうですね。
コマンドラインでpngquantのインストール・使い方
Macでインストールから使い方は簡単に記載すると、次のような感じです。
brew --version
pngquant --version
brew install pngquant
pngquant --version
cd フォルダをドラック&ドロップ
pngquant --colors 32 --force --ext .png *.png- –colors 32：パレット色数を 32 色に固定
- –force：既存ファイルを強制的に上書き
- –ext .png：出力ファイルの拡張子を .png に設定
- *.png：カレントディレクトリ内の全 PNG ファイルを指定
1枚のファイルはこうです。
pngquant --colors 32 --force --ext .png game.png複数ファイル名を指定する場合はこうです。
pngquant --colors 32 --force --ext .png apple02.png apple05.pngZsh の配列機能を使えば、ワードスプリット問題を気にせずに済みます。
files=(apple02.png apple05.png)
pngquant --colors 32 --force --ext .png $filesコマンドラインとPNGooを使った場合、比較したことがあります。同じ減色でも若干出力される容量に誤差がでることもありますが、数kbなのであくまで誤差の範囲という気がしています。 品質は微妙にコマンドラインの方がよい気がしますが、バージョンとかですかね。
減色ではなく圧縮もしたい場合は–qualityを使います。
--quality=min-max
–quality=min-max オプションは「生成画像の品質（PSNR）が min～max の範囲内かをチェックし、範囲外ならその画像の出力をスキップするようなので、使い方に注意が必要そうです。色数指定と併用すると「スキップされたかどうか」がわかりにくくなる可能性があります。
詳細はGItHUBのリファレンスをご確認ください。
対策として考えたのが、–verboseを使ってログを出力することです。skipというログがなければ問題ないでしょう。
pngquant --colors 32 --quality=60-80 --force --verbose --ext .png *.pngご参考になれば幸いです。
コメント