Blog · ガイド

理にかなったPNGワークフロー:oxipng、zopfli、パレット

PNGは決して時代遅れではありません — 正しく使えば、フラットなグラフィックには最適なフォーマットです。バンディングやディザリングのアーティファクトを出さずに最小のファイルを作る方法を紹介します。

palette → oxipng → zopfli

PNGは「重い」と悪評を買いがちですが、肥大化したPNGのほとんどは単にエンコードが下手なだけです。量子化・最適化・再圧縮という明確な3ステップのワークフローを使えば、シャープな輪郭とクリーンな色を保ったまま、ロスレスでPNGを日常的に半分以下に削減できます。ここで重要なのはその順序です。

PNGが適切なツールとなる場面

PNGは<b>フラットでエッジのシャープなグラフィック</b>向けに設計されています — ロゴ、アイコン、UIエクスポート、図表、スクリーンショット、透過を含むあらゆるものです。ロスレスなので輪郭はかみそりのようにクリーンなまま保たれます — テキスト周りにJPEG特有のモスキートノイズも出ません。写真には不向きですが(WebP/AVIF/JPEGを使いましょう)、モダンなアプリを埋め尽くす合成グラフィックにとっては、うまく作られたPNGに勝るものはありません。

ステップ1:できるときはパレットに量子化する

ほとんどのUIグラフィックは1600万色よりもはるかに少ない色数しか使っていません。24ビットのトゥルーカラーPNGを<b>8ビットのインデックスパレット</b>(256色以下)に変換することは、単一で最大の効果を持つ手段です — 他の最適化を行う前にファイルが半分になることも珍しくありません。落とし穴は色を上手に選び、グラデーションを慎重に扱うことです。優れた量子化ツールは最適なパレットを選び、実際に効果がある箇所だけにディザリングをかけます。

ステップ2:oxipngでフィルターを最適化する

PNGは圧縮前に行ごとの<i>フィルター</i>を適用しますが、その選択がサイズに劇的な影響を与えます。<b>oxipng</b>は複数のフィルター戦略を試し、高速かつ並列に画像を再圧縮しますが、画質の劣化は一切ありません。安全で日常的に使えるデフォルトのツールです — フォルダを指定するだけで、あらゆるPNGが小さくなります。トゥルーカラー画像とパレット画像の両方に実行しましょう。

ステップ3:zopfliでDEFLATEを絞り込む

絶対的な最小サイズを求め、待つことをいとわないなら、<b>zopfli</b>はより小さなストリームをはるかに徹底的に探索するDEFLATE互換の圧縮ツールです。低速ですが(画像1枚あたり数秒かかることもあります)、どんなデコーダーでも読める標準的なPNGを生成し、oxipng単体よりも数パーセント小さくなることが多いです。一度だけ書き出して何百万回も配信するアセットに最適です。

# 完全なパイプライン — 最初から最後までロスレス
imageforge ui.png --palette auto --lossless        # ステップ1
imageforge ./icons/*.png --optimize oxipng         # ステップ2
imageforge logo.png --optimize zopfli --effort max # ステップ3

バンディングとディザリングのアーティファクトを避ける

パレットベースのPNGにおける2つの失敗パターンは、<b>バンディング</b>(色数が足りないときにグラデーションに現れる目に見える段差)と<b>ディザリングノイズ</b>(色をばらまいてより多く見せかけることで生じる斑点状のノイズ)です。解決策は判断力です — グラデーションはトゥルーカラーのまま残し、フラットな領域だけを量子化し、目が段差よりもノイズを好むような小さなパレットサイズのときだけディザリングをかけましょう。迷ったら、公開する前に量子化したバージョンと元の画像を見比べてください。

ステップ
ツール
損失
量子化
パレット / pngquant系
任意・制御可能
フィルター最適化
oxipng
なし
再圧縮
zopfli
なし

正しい方法でPNGを半分に。

パレット、oxipng、zopfliを一度のパスで — デフォルトでロスレス、あなたのMac上で。

続けて読む