画像フォーマットの選択は、静的サイトでは「ビルド時に一度だけ払うコスト」と「配信で毎回得られる節約」の交換になる。AVIF と WebP のどちらか一方に決めたくなるが、実際に測ってみると答えは併用だった。
圧縮率と時間のトレードオフ
同じ元画像を同じ主観品質までエンコードすると、手元の写真素材では AVIF が WebP よりおおむね二〜三割小さくなった。ただしエンコード時間は AVIF が数倍かかる。記事数が少ないうちは気にならないが、カバー画像を全記事に置くようになるとビルド時間に効いてくる。
手元の基準
- 写真・グラデーションを含む画像は AVIF を第一候補にする
- 線画やフラットな図版は可逆 WebP か、そのまま PNG を維持する
picture要素のフォールバックは WebP まで用意し、JPEG は置かない
まとめ
フォーマットの優劣は素材に依存するので、代表的な画像を三枚選んで実測してから決めるのがいちばん速い。基準を一度文章にしておけば、次の記事からは迷わなくなる。