Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Preloading responsive images

HTMLLinkElement インターフェイスの `imageSizes` プロパティは、`imageSrcset` プロパティで定義されたプリロード画像のサイズと条件を示します。これは `<link>` 要素の `imagesizes` 属性の値を反映します。このプロパティは `imagesizes` 属性の値を取得または設定できます。

`<link>` 要素の `imagesizes` 属性は、`<img>` 要素の `sizes` 属性と同じで、コンマ区切りのソースサイズリストです。各ソースサイズには、メディア条件、`<length>` としての画像のサイズ、またはキーワード `auto` が含まれ、`auto` は最初に記述する必要があります。`sizes` 属性の構文の詳細については、`<img>` を参照してください。

`imagesrcset` 属性と `imagesizes` 属性は、`rel` 属性が `preload` に設定され、かつ `as` 属性が `image` に設定されている `<link>` 要素にのみ関連します。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLLinkElement.imageSizes
73
79
78
17.2
73
17.2
HTML 属性
imagesizes
73
79
78
17.2
73
17.2
imagesrcset
73
79
78
17.2
73
17.2
DOM API
imageSrcset

HTMLLinkElement インターフェースの imageSrcset プロパティは、カンマで区切られた一つ以上の画像候補文字列を識別する文字列である。このプロパティは link 要素の imagesrcset 属性の値を反映する。このプロパティは imagesrcset 属性の値を取得または設定することができる。
73
79
78
17.2
73
17.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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">

ライブデモ

Responsive image preload

Outline the attributes used to preload a responsive image candidate set.

プレビュー全画面表示

Why preload the hero image

Explain when responsive image preload can reduce first-view delay.

プレビュー全画面表示

Preload guardrails

Keep the responsive hint aligned with the image actually used in the page.

プレビュー全画面表示

実務での使いどころ

  • Preloading responsive images の活用

    HTMLLinkElement インターフェイスの `imageSizes` プロパティは、`imageSrcset` プロパティで定義されたプリロード画像のサイズと条件を示します。

注意点

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

アクセシビリティ

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

参考リンク