Web 画像最適化の決定版 - WebP / AVIF / JPEG XL を実務でどう選ぶか

導入：「PageSpeed が緑にならない」最大の犯人は画像

男の子

「博士〜！ サイトの PageSpeed Insights が黄色のまま緑にならないんだぜ。コードはスリムにしたんだけどなぁ…」

博士

「ふむ、Network タブを見せてみよ。…ああ、これじゃな。トップ画像が 2.4 MB の JPEG で、しかも実際の表示サイズの 4倍解像度がある。LCP が遅いのは画像が原因じゃ。」

女の子

「Largest Contentful Paint は概ねヒーロー画像で決まるのよね。同じ見た目で容量を 1/5 にできれば、LCP は劇的に改善するわ。」

1. 画像フォーマット早見表

博士

「『最強』はないのじゃ。コンテンツ・対象ブラウザ・編集容易性のトレードオフで選ぶ。」

2. 「圧縮品質」をどこまで下げていいか

JPEG・WebP は 0〜100 で品質を指定します。実務でよく使う目安：

品質 90 以上は「サイズの割に画質はほぼ変わらない」領域に入りがちです。 逆に 60 を切るとブロックノイズが目立ちます。75〜80 を起点に、対象画像で目視確認するのが一番確実です。

3. picture / srcset で「ブラウザに選ばせる」

男の子

「AVIF を使いたいけど、Safari の古いバージョンで表示できないと困るぜ。」

女の子

「<picture> タグでフォールバックを書けば、対応ブラウザは AVIF、未対応は WebP、それも無理なら JPEG、という順で選んでくれるわ。」

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img
    src="hero.jpg"
    alt="ヒーロー画像"
    width="1200"
    height="630"
    loading="lazy"
    decoding="async"
  />
</picture>

width と height は 必ず指定してください。 未指定だと、画像読み込み中にレイアウトが崩れて CLS（Cumulative Layout Shift）が悪化します。 ヒーロー画像は fetchpriority="high"、ファーストビュー外は loading="lazy" が基本です。

4. 実装前にやること

a. 元画像の解像度を見直す

スマホ表示で 400px 幅にしか映らない画像が、元データで 4000px あるケースは珍しくありません。表示の最大サイズ × 2倍（Retina 用）を上限と考え、それ以上はリサイズしてから配信します。

b. PNG はまず WebP に変換できないか検討

スクリーンショットや UI モックアップは、PNG のままだと数 MB に膨れがちです。 WebP の lossless モードで圧縮すると、見た目を維持したまま 30-50% 削減できることが多いです。

5. ブラウザで完結する圧縮ツール

サーバーにアップロードせずに圧縮したい場合は、当サイトの画像圧縮ツールが便利です。 ファイルはブラウザ内で処理され、外部サーバーへ送信されません。 クライアント情報を含むスクリーンショットや、未公開の画像素材を扱うときの安心材料になります。

関連: 画像切り抜き、SNS 画像リサイザー、アイコンリサイザー。