Web用にPNGを圧縮

現代的なサイトでは、PNGは特定のかなり限定された役割を担うべきです: ロゴ、アイコン、UIスクリーンショット、図表、そして透明な背景が必要なものです。写真的なものはすべてJPEGかWebPに属します。画像でパフォーマンス予算を超えてしまうサイトは、写真をPNGとして配信していることが多く、どんな圧縮設定もそれを救えません — 修正はフォーマットの変更であり、パレットの変更ではありません。

本当にPNGであるべき素材については、ディザリング付き128色がほぼ普遍的な答えです。UI要素とブランドマークは小さく意図的なパレットで構築されているため、利用可能な色を半分に減らすことは情報ではなく冗長性を取り除くことになり、結果はおよそ半分のバイト数で目には同一に見えます。

ベクターアートとして存在するロゴやアイコンについては、SVGが例外なくどんなラスター形式よりも優れています — 数百バイトのマークアップで、どんなズームレベルでもどんな画面密度でも鮮明で、CSSでカスタマイズ可能です。元のベクターファイルがあるならそれを使いましょう。PNGはそれがない場合や、ベクター化に耐えない効果を持つアート向けのフォールバックです。

WebPも透明度をサポートしており、同じ内容でPNGより小さいことが多く、現在のすべてのブラウザでサポートされています。それでもPNGを配信し続ける理由はブラウザ外のソフトウェアとの互換性です — メールクライアント、古めのデザインツール、そして同僚がファイルを開くのに使うかもしれないもの全般です。自分のページ内でのみレンダリングされる素材については、WebPが最良のデフォルトであり、このツールにはそのための変換ツールがあります。