AVIFサイジングが重要な理由

  • AVIFの圧縮の利点は、適切なサイズ設定によってさらに高まります。サイズが間違っていると、バイトとフォーマットの優位性が無駄になります。
  • AVIFの恩恵を最も受けるのはモバイルデータプラン――100KB以下のヒーロー画像が一般的になる
  • LighthouseとPageSpeedは、フォーマットに関係なく、サイズが大きすぎる画像にフラグを立てます。
  • AVIFデコードはJPEGよりもCPU負荷が高い ― サイズの大きいAVIFは低スペックデバイスに負担をかける

AVIFリサイズに関するベストプラクティス

  • AVIFファイルのサイズを実際のレンダリングサイズに合わせる(2倍や3倍の密度にしない。デコードコストが重要となる)。
  • 古いブラウザ向けに、画像要素でAVIFとJPEGのフォールバックを組み合わせる
  • AVIFの最適な品質は70~80で、90以上の品質ではフォーマットの利点が失われる。
  • 5KB未満の小さなアセットにはAVIFをスキップします。エンコードのオーバーヘッドが節約効果を上回ります。
  • 知覚品質のテストは、合成サンプルではなく、実際のコンテンツで行ってください。