Web画像、迷ったらWebPにしろ

結論：迷ったらWebP

**WebPはJPGより30%、PNGより50%軽い。**対応ブラウザは97%以上。

「IE対応が必要」と言われたら、pictureタグでフォールバック。

ページ全体で1MBを超えると、モバイルで体感できるレベルで遅くなる。

クライアントから「サイトが重い」とクレーム。

調べたら、4000×3000pxの写真をそのままアップしていた。1枚3MB。

表示サイズは800px。1920pxで十分なのに、元画像をそのまま使っていた。

**表示サイズの2倍が目安。**それ以上は無駄。

Retinaディスプレイ対応で2倍。ただし3000px超えは過剰。

Squoosh（squoosh.app）がおすすめ。

「80%品質」でほぼ劣化なし。50%まで下げると目に見えて荒くなる。

WebP非対応ブラウザ向け。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明" width="800" height="600">
</picture>

ブラウザが上から順に対応形式を探す。

書かないと、画像読み込み時にレイアウトがガタつく（CLS）。

<!-- ✓ 必ず書く -->
<img src="image.jpg" alt="説明" width="800" height="600">

img {
  max-width: 100%;
  height: auto;
}

Core Web Vitalsに直結。SEOに影響する。

ファーストビュー外の画像は遅延読み込み。

<!-- ファーストビュー外 -->
<img src="image.jpg" alt="説明" loading="lazy">

<!-- ファーストビュー内（遅延させない） -->
<img src="hero.jpg" alt="説明" loading="eager">

**ヒーロー画像にlazyを付けると逆効果。**表示が遅れる。

□ 形式はWebP（またはSVG）か？
□ 1枚500KB以下か？
□ 解像度は表示サイズの2倍以下か？
□ widthとheightを書いたか？
□ ファーストビュー外にloading="lazy"を付けたか？