Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。
メタデータ・スクリプト Newly available

Preloading responsive images

link rel="preload" に imagesrcset / imagesizes を指定して、レスポンシブ画像の最適なリソースを事前読み込みします。

メタデータ・スクリプト

概要

link rel="preload" に imagesrcset / imagesizes を指定して、レスポンシブ画像の最適なリソースを事前読み込みします。

対応ブラウザ

デスクトップ

Chrome 73+
Edge 79+
Safari 17.2+
Firefox 78+

モバイル

Chrome Android 73+
Safari iOS 17.2+
Firefox Android 79+

基本構文

HTML 
<link rel="preload" as="image"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 100vw, 50vw">

実務での使いどころ

  • Preloading responsive images の活用

    レスポンシブ画像のプリロード。imagesrcsetを使った画像の事前読み込み。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク