透過を保ったままPNGの容量を減らす方法

PNGは可逆形式なので、ロゴ・アイコン・スクリーンショット・透過背景の画像にぴったりです。しかしその可逆性ゆえに、PNGは意外なほど重くなります。特に写真では顕著です。画像を壊さずに容量を落とす方法を見ていきましょう。

PNGが大きくなる理由

PNGはすべてのピクセルを正確に保存するため、JPEGやWebPのように情報を捨てられません。色数の少ないフラットなグラフィックには効率的ですが、微妙な色の変化が無数にある写真では、非可逆形式の数倍のサイズになることがあります。

そのPNGが実は写真なら、ほぼ確実に形式選びが間違っています。WebPかJPEGに変換すれば容量は劇的に減ります。くっきりしたエッジや透過背景が必要なときだけPNGを使いましょう。

ツールを使えば、ピクセルを1つも変えずにPNGのデータをより効率的に詰め直し、不要なメタデータを取り除けます。安全なので、PNGのまま残すグラフィックには常にやる価値があります。

可逆WebPは画質と透過をそのまま保ちつつ、たいていPNGより小さくなります。モダンなWebサイトなら、くっきりしたエッジ・アルファチャンネル・小さい容量の三拍子がそろう最良の選択肢になることが多いです。

鉄則は、アルファチャンネル対応の形式にだけ変換すること。PNGとWebPは対応、JPEGは非対応です。透過画像をJPEGにすると透明部分が単色背景で塗りつぶされます。ロゴやアイコンはPNGかWebPで。

グラフィックはPNGのまま、または可逆WebPに切り替えて最適化を。PNGで保存された写真はWebPかAVIFに変換を。ScrunchならPNGをドロップしてWebPを選び、ダウンロード前に元画像と結果を比較できます。すべてブラウザ内で。

はい。WebPはアルファチャンネルに対応しているので透過背景はそのまま残ります。一方JPEGに変換すると透明部分が単色で塗られるため、透過画像は必ずPNGかWebPにしてください。

ロゴやアイコンのようにエッジがくっきりしたグラフィックは可逆WebPが安全です。写真に近い画像は非可逆WebPの方がずっと小さくなります。画像の性質で選びましょう。

可逆最適化はピクセルを変えずに不要なデータやメタデータを取り除き、通常は数%〜数十%減ります。もっと大きく減らしたいなら、形式そのものをWebPに替える方が効果的です。

文字やUIがくっきりしたスクリーンショットには可逆PNGか可逆WebPが向いています。ただし写真的な内容が多いスクリーンショットなら、非可逆WebPの方がずっと小さく十分シャープなこともあるので、両方を比べてみてください。