LCPのための画像最適化 — フォーマット、プリロード、レスポンシブ画像

より良いLCPのための画像最適化

画像はWebページの大多数でLCP要素です。画像配信の最適化は、LCPに最も影響のある改善です。

モダン画像フォーマット

フォーマット	圧縮	ブラウザサポート	最適な用途
JPEG	非可逆	ユニバーサル	写真
PNG	可逆	ユニバーサル	透過付きグラフィック
WebP	両方	97%以上	JPEG/PNGの一般的な代替
AVIF	両方	92%以上	最高の圧縮率

WebPは通常、同等品質のJPEGより25-35%小さいファイルサイズを実現します。

<!-- フォールバック付きのプログレッシブエンハンスメント -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="ヒーロー画像" width="1200" height="600">
</picture>

LCP画像のプリロード

<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high" type="image/webp">

fetchpriority属性

<img src="hero.webp" alt="ヒーロー" width="1200" height="600" fetchpriority="high">

LCP画像には絶対に遅延読み込みしない

loading="lazy"はビューポートに入るまで画像の読み込みを遅延させます。LCP画像（読み込み時にすでにビューポート内にある）には不必要な遅延を追加します。

レスポンシブ画像

各ビューポートに適切なサイズを配信：

<img
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
  src="hero-1200.webp"
  alt="ヒーロー画像"
  fetchpriority="high"
>