PNGからWebP変換
PNGは可逆ですがWebではかさばります。WebPは透明度をサポートし、ロゴ、アイコン、イラストでしばしばずっと小さいファイルになります。本番にデプロイする前に、PNGアセットをローカルで変換します。
PNGからWebPへの変換方法
1. PNG（アルファありまたはなし）をアップロードします。
2. 提供されていれば非可逆または可逆のWebP設定を選びます。
3. 出力サイズを元のPNGと比べます。
4. WebPファイルをダウンロードします。
例
マーケティングサイトのロゴ
120 KBのPNGロゴは、同一の透明度で40 KBのWebPになることがあり、ヘッダー読み込みが速くなります。
ゲームのスプライトシート
平坦な色のスプライトは、PNGと比べてWebP可逆モードで積極的に圧縮されます。
アプリストアのグラフィック
ランタイムがWebPをサポートするなら、バンドル資産の大きなPNGスクリーンショットを置き換えます。
PNGからWebPが役立つとき
• Webでアルファ透明度が必要で、より小さいバイト数が欲しいとき。
• PNGが多いフロントエンドを現代形式に移行するとき。
• Lighthouseが過大なPNG資産を指摘するとき。
UIアセットのPNGとWebP
デザイナーは習慣でPNGを書き出します。本番Webでは、透明度付きWebPが転送サイズを半分にすることが多いです。CIで変換を自動化するか、単発資産にはこのツールを使います。
よくある質問
透明度は保たれますか？
はい——WebPはPNGと同様のアルファチャンネルをサポートします。
可逆WebPと非可逆WebPは？
平坦な色のグラフィックは可逆WebPに向くことが多いです。PNGに埋め込まれた写真は、より小さいサイズのため非可逆WebPを使うことがあります。
色はずれますか？
可逆モードはPNGと正確に一致するはずです。非可逆モードはグラデーションでわずかな差が出ることがあります。
CSSのbackground-imageでWebPを使えますか？
すべての現代ブラウザでははい。分析でレガシートラフィックが出るときだけPNGフォールバックを用意します。
ローカル処理ですか？
はい——ファイルはブラウザから出ません。