2026年のフォーマット選択：AVIF と WebP で決まり
まず前提を揃えます。AVIF は AV1 動画コーデックの静止画プロファイル、WebP は Google が策定した可逆・非可逆の両方を扱えるフォーマットです。どちらも 2026 年時点でモダンブラウザにネイティブ対応しており、実務での採用に技術的な障壁はほぼありません。
| フォーマット | グローバル対応率 | 対応開始バージョン | 推奨用途 |
|---|---|---|---|
| WebP | 約96% | Chrome 32 / Safari 14 / Firefox 65 | 汎用。迷ったらまずこれ |
| AVIF | 約94〜95% | Chrome 85 / Firefox 93 / Safari 16.1 | 写真・グラデーション。最も小さくなりやすい |
| JPEG XL | 約13.6% | Safari 17 の一部のみ | 本番投入は時期尚早 |
| JPEG / PNG | 約100% | — | フォールバック専用 |
JPEG XL について補足します。圧縮性能とプログレッシブ表示の点で評価は高いものの、Chrome はデフォルト無効のまま、Firefox も無効の状態が続いています。Chrome 145 でフラグ付きのデコード再導入が動いているという報告はありますが、既定で有効化されたとは公式には明言されていません。2026年時点で JPEG XL を本番配信の主軸に据える判断は避けるべきです。
picture 要素で 3 段フォールバックを組む
単一フォーマットで配信するのではなく、<picture> で AVIF → WebP → JPEG の順に候補を並べるのが安全策です。ブラウザは source を上から評価し、type と media の条件に合致した最初のものを採用します。
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="製品のヒーロー画像"
width="1200" height="630"
fetchpriority="high" decoding="async">
</picture>srcset と sizes で解像度も出し分ける
フォーマットの出し分けと解像度の出し分けは別の軸です。srcset に幅記述子（1200w のような w 付きの値）を使う場合、sizes の指定は必須と考えてください。sizes を書き忘れると既定値の 100vw が使われ、実際には画面幅の 3 分の 1 でしか表示しない画像にフルサイズの候補が選ばれます。
<source
srcset="hero-480.avif 480w, hero-960.avif 960w, hero-1920.avif 1920w"
sizes="(max-width: 768px) 100vw, 640px"
type="image/avif">Core Web Vitals と読み込み優先度
LCP は「ビューポート内で最も大きなコンテンツが描画されるまでの時間」を示す指標で、しきい値は 2.5秒以下が良好、4.0秒超が不良、実ユーザーの 75 パーセンタイルで評価されます。ヒーロー画像がある構成では、この LCP 要素が画像そのものになるケースが大半です。
そこで効いてくるのが 3 つの属性の使い分けです。役割が似ているようで、制御している対象がそれぞれ異なります。
| 属性 | 取りうる値 | 既定値 | 制御対象 |
|---|---|---|---|
fetchpriority | high / low / auto | auto | リクエストの優先度 |
loading | eager / lazy | eager | リクエストを出すタイミング |
decoding | sync / async / auto | auto | デコードの同期・非同期 |
判断基準はシンプルです。LCP 候補になる画像には fetchpriority="high" を付け、loading="lazy" は絶対に付けない。それ以外のファーストビュー外の画像は loading="lazy" と decoding="async" をセットにします。
逆の失敗も見ます。fetchpriority="high" をページ内の画像すべてに付けるパターンです。優先度は相対的な概念なので、全部が高優先度なら何も高優先度ではありません。1 ページにつき 1 枚が原則です。
エンコードの出発点となる設定値
実際に変換する際のパラメータは、品質を目視確認しながら詰めるのが前提ですが、出発点としては cwebp -q 80、avifenc -q 60 --speed 6 あたりが速度と圧縮率のバランスとして各所で言及されています。Node.js 環境なら sharp の sharp().avif({ quality, effort }) でビルドパイプラインに組み込むのが現実的です。
ブラウザ上で手早く試したい場合は 画像圧縮ツール で圧縮率の当たりを付け、必要なサイズへの縮小は 画像リサイズ、width / height 属性に入れる比率の計算は アスペクト比計算 が使えます。小さなアイコンを HTML や CSS に直接埋め込みたいときは 画像 Base64 変換、OGP 画像の見え方確認には OGP画像プレビュー をどうぞ。
CLS を防ぐ width / height の明示
最後に見落とされがちな点を 1 つ。img に width と height を書いておくと、ブラウザは読み込み前にアスペクト比から表示領域を確保でき、CLS（Cumulative Layout Shift）を防げます。CSS 側で width: 100%; height: auto; を当てても属性値は無駄になりません。属性は比率の情報源として使われ、実寸は CSS が決めます。レスポンシブ画像では両方書くのが正解です。