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 | |
| 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 | ||||||
| HTMLLinkElement インターフェースの imageSrcset プロパティは、カンマで区切られた一つ以上の画像候補文字列を識別する文字列である。このプロパティは link 要素の imagesrcset 属性の値を反映する。このプロパティは imagesrcset 属性の値を取得または設定することができる。 | 73 | 79 | 78 | 17.2 | 73 | 17.2 |
基本構文
<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
The attributes that let a preload hint carry a responsive candidate set.
Why preload the hero image
Preloading helps when the browser would otherwise discover the right responsive source too late.
Preload guardrails
Keep the responsive hint aligned with the image actually used in the page.
実務での使いどころ
-
Preloading responsive images の活用
HTMLLinkElement インターフェイスの imageSizes プロパティは、imageSrcset プロパティで定義されたプリロード画像のサイズと条件を示します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。