画像フォーマットの選択：WebP・AVIF・JPEGの制作現場での使い分け
WebP・AVIF・JPEGは圧縮効率とエンコード時間、ブラウザ対応が異なる。AVIFは最も小さくできる一方でエンコードが遅く、ビルド工程では時間が問題になる。単一の正解はなく、用途と工程で使い分ける。
Web向けの画像フォーマットは、長らくJPEGが標準だったが、いまはWebPとAVIFが加わり、選択肢が増えた。どれが最良かという問いには単一の答えがない。圧縮効率、エンコード時間、ブラウザ対応がそれぞれ異なるためだ。ここでは、制作現場での使い分けを整理する。web.devやMDNの画像最適化の資料も、用途に応じた選択を前提にしている。
三つのフォーマットの立ち位置
JPEGは、ほぼすべての環境で確実に開ける普遍性が最大の強みだ。WebPは、JPEGより高い圧縮効率を持ちつつ、主要ブラウザで広く対応が進んだ。AVIFはさらに新しく、同じ画質でより小さくできる一方、対応は段階的に広がっている途中だ。立ち位置は「普遍性・バランス・圧縮効率」で整理できる。
圧縮効率とエンコード時間のトレードオフ
圧縮効率だけを見ればAVIFが優れるが、ここで見落とされがちなのがエンコード時間だ。AVIFは高い圧縮を得る代わりに、変換に時間がかかる。画像が数枚なら問題にならないが、ビルド工程で大量の画像を毎回変換する場合、この時間が無視できないコストになる。一方、JPEGやWebPはエンコードが速く、工程を軽く保てる。圧縮率と工程速度は、しばしば天秤にかかる。
ブラウザ対応とフォールバック
対応状況の差は、<picture> 要素でのフォールバックで吸収するのが定石だ。AVIFを優先し、非対応ならWebP、それも不可ならJPEG、という順で候補を並べる。ただしこの方式は、同じ画像を複数フォーマットで用意することを意味し、ストレージとビルドの負担が増える。帯域の節約と、生成・保管のコストがここで釣り合う。caniuseなどで対象ユーザーの対応状況を確認し、どこまでのフォーマットを用意するかを決める。
制作現場での使い分け
実務的な使い分けは、画像の性質と工程で決まる。写真のような連続階調はWebPやAVIFの圧縮が効きやすく、ロゴのような平坦な図はまた別の特性を示す。ヒーロー画像のように表示速度が重要な箇所は圧縮効率を優先し、点数の多い一覧はエンコード時間との兼ね合いで選ぶ。フォントの読み込みと同様に「必要な分だけを最適な形で送る」考え方は、Webフォントのサブセット化と共通する。描画負荷の観点はWebGLシェーダーの実務的な検討とも関わる。
単一の正解はない
画像フォーマットに万能の正解はない。AVIFの圧縮効率はエンコード時間と、対応の広さはフォールバックの手間と釣り合う。写真かグラフィックか、表示速度が重要か、点数が多いか——こうした条件から選ぶのが現実的だ。フォーマットの新しさそのものではなく、用途と工程に合わせる姿勢が、結果として軽く速いページにつながる。
