PNGは巨大だと悪評を得ており、それは当然です。1つのアイコンが、なぜか丸ごとの写真より重いことがあります。良い知らせは、その肥大のほとんどが無駄であり、そもそもPNGを必要とした鮮明な縁と透過背景を保ちながら、それを削れることです。
なぜPNGはあれほど大きいのか
PNGは無劣化の形式です。JPEGと違い何も捨てず、すべてのピクセルを正確に保存します。鮮明なロゴ、アイコン、UIのスクリーンショットには完璧ですが、ファイルが多くのデータを正直に記述しなければならないことを意味します。
本当の元凶は色深度です。標準的なPNGは最大1600万色（24ビット）に加え、完全な透過チャンネルを保存できます。しかしあなたのロゴはおそらく十数色しか使いません。アイコンセットでもせいぜい50色。その使われない色の容量すべてが、確保しておくためにバイトを食います。20色で足りる絵を描くために、1600万色のキャンバス代を払っているのです。
2つ目の罠があります。人は写真をPNGで保存します。写真は本当に数百万色と微妙なグラデーションを使うので、PNGはうまく圧縮できず、同じ写真のJPEGやWebPの5〜10倍の大きさになります。あなたの「PNGの問題」が実は写真なら、直し方は圧縮ではなく変換です。
量子化：透過を保つ直し方
本物のPNG、つまりフラットな色、鋭い縁、透過には、勝ち手が色量子化です。数百万の可能な色を保存する代わりに、画像を注意深く選ばれた256色のパレットに減らします。あなたの画像はどのみちそのごく一部しか使っていなかったので、結果は同一に見えつつファイルは60〜80%落ちます。
人が心配する部分。これは透過背景を壊すのか？ いいえ。量子化は色パレットを減らしますが、透過（アルファ）チャンネルは保たれます。ロゴはどんな背景にもきれいに載り続けます。白い箱も、灰色の縁取りもありません。これは有名な「tinify」風のPNG最適化ツールが使うのと同じ技術で、だからこそ透過PNGをあれほど劇的に小さくできるのです。
IMG.DIYの画像コンプレッサーは、PNGに256色量子化を自動で適用します。品質の数字を選ぶ必要はなく（無劣化の形式に品質スライダーはありません）、ファイルを放り込むだけで、透過をそのままにずっと小さなPNGが得られます。
透過PNGの手早いチェックリスト
- 本当にグラフィックで写真でないか確認。 ロゴ、アイコン、イラスト、UIのスクショ → PNGとして圧縮。写真 → WebP（これも透過に対応）かJPEG（対応しない）に変換。
- 大きすぎる寸法を切り詰める。 200pxで表示される2000pxのアイコンは、必要の100倍のピクセルです。まず幅を上限で抑えましょう。コンプレッサーには任意の幅上限があります。
- 量子化する。 256色への削減に重い仕事を任せます。透過は生き残ります。
- 縁を検証する。 100%で開き、ごちゃごちゃした背景に対してアルファの縁を確認し、きれいかどうか確かめます。
一括で、プライベートに
アイコンセットまるごとや書き出したグラフィックのフォルダーがあるなら、1つずつやる必要はありません。コンプレッサーは一括処理してZIPを返し、元より大きなファイルを決して出力しないので、すでに詰まったPNGのフォルダーがうっかり大きくなることはありません。
すべてがCanvasとWebAssemblyで完全にブラウザ内で動きます。PNGはどこにもアップロードされず、初回アクセスのあとツールはキャッシュされてオフラインで動きます。電波のない電車でクライアントのブランド素材を圧縮しても、何もノートPCから出ません。
要点。PNGが大きいのは、使わない色の容量をため込むからです。256色に量子化し、透過を保ち、目に見える変化なしにファイルが縮むのを見届けましょう。