スマホと PC で画像を出し分ける

スマホと PC で画像を出し分ける。

Lighthouse の「最大コンテンツ描画」対策。

<picture>
  <source srcset="hero-mobile.jpg" media="(max-width: 768px)">
  <source srcset="hero-desktop.jpg" media="(min-width: 769px)">
  <img src="hero-desktop.jpg" alt="ヒーロー画像" fetchpriority="high">
</picture>

picture タグ内の img タグに fetchpriority プロパティつけた場合、source タグの画像が読み込まれても img タグの fetchpriority プロパティが適用される。

<picture>: 画像要素 - HTML: ハイパーテキストマークアップ言語 | MDN