WebPファイルのサイズ管理が重要な理由

  • コーデックの効率性を考慮しても、サイズの大きいWebPファイルは依然としてページを肥大化させる。
  • レスポンシブな srcset には、WebP アセットごとに複数のディメンションバリアントが必要です。
  • 網膜ディスプレイのターゲット設定には、2倍の解像度のWebPバリアントが必要
  • CDNキャッシュは、標準的なWebPサイズセットの恩恵を受ける。

WebP画像のリサイズに関するベストプラクティス

  • 必要な最大サイズ(通常はヒーローサイズの2倍)でマスターしましょう
  • 標準ブレークポイント(320、640、1024、1920)でsrcsetバリアントを生成します。
  • WebPはUIにはロスレス、写真にはロッシーを使用し、決して混在させない。
  • 透明なWebPアセットのサイズ変更後にアルファエッジを確認する
  • フォーマットネゴシエーションによるペアサイズ変更(AVIF優先、WebPフォールバック、JPG最後)