PNGからWebPへ:透明度だけでなくアイコンの輪郭も確認

背景が透明なままでも、アイコン内の小さな文字が不鮮明になる場合があります。透明度と色の忠実さは別で、片方だけでは新しいコピーを合格にできません。

透明でもピクセルが同じとは限らない

WebPは透明度と色の非可逆圧縮を組み合わせられます。可逆モードもありますが、拡張子や透明背景だけではどちらか分かりません。

このToolRoof経路は非可逆WebPを作ります。色の境界や小さい文字を確認し、容量削減の可能性より元の絵を忠実に保つことが大切ならPNGを残します。

参考資料: Google WebP — Quality and lossless encoding are separate controls

実際に使う背景で見る

明るい背景と暗い背景の両方に置きます。薄い影や半透明の輪郭は、片方だけで問題が見えることがあります。

透明な余白は無駄とは限りません。同じ大きさのボタン内でアイコンをそろえる役割もあります。容量だけのために切ると構成が変わり得ます。

色数の少ない絵は別に比較する

非可逆WebPが少色PNGより大きくなる場合もあります。別の写真の成功だけで、すべてのアイコンを置き換えないでください。

最終サイズの読みやすさ、背景、実際の容量差を順に確認します。目的の条件を満たさなければPNGを残すのは正しい判断です。

参考資料: Google WebP — File size, format features and limitations

例:アイコンの面積とファイル容量は別

256 × 256ピクセルのアイコンに各辺32ピクセルの透明な余白があります。中央は192 × 192 = 36864ピクセルで、面積の56.25%です。幾何学的な割合であり、圧縮率の予測ではありません。

全体を幅64ピクセルで表示すると中央は48ピクセルです。そのサイズで両背景を確認します。わずかなバイト削減のために余白や細線が失われないようにしてください。

参考資料