Web向けにPNGアセットをWebPへ移行する
該当する場合
重いPNGは品質を抑えて変換し、1x/2xで比較し、必要ならフォールバックを用意します。
使うツール
PNGをWebPに変換。
PNGをWebPに を開く →手順
- 1写真・イラスト・透過ロゴを分類する。
- 2エッジを保つ初期品質で変換する。
- 3想定表示幅でオリジナルとWebPを比較する。
- 4WebP非対応チャネル向けにPNG等のフォールバックを用意する。
例
- マーケ用アイコンパックをWebP化する。
- モバイル向けにUIスプライトを軽くする。
避けること
- 強すぎる圧縮で線や小さな文字が潰れる。
- 置換せずCMSがPNGのまま。
- ライト/ダークテーマのQAをしない。
関連ツール
ブログで
画像ツール のその他
- Webページを高速化するために画像を圧縮する
- SNSの画像サイズに合わせて準備する
- 写真を共有する前にEXIFメタデータを削除する
- 互換性とファイルサイズのために画像を変換する
- 公開画像を保護するために透かしを追加する
- 共有前に画像内の機微情報をぼかす
すべてのタスクガイド または次の 画像ツール ハブ.
代替案を比較
Fluranto vs convertioよくある質問
PNGは残す？
WebP不可のチャネルやロスレス保管が必要なら残します。
リサイズは？
可能なら最終WebP化の前に表示ピクセルへ合わせます。
すべてのタスクガイド · 画像ツール のツール · ブログ