レスポンシブ画像とアート ディレクション

多くの場合、レスポンシブ画像は srcset 属性を使用して実装されます。srcset 属性は、画像ファイル名とその幅または密度記述子のカンマ区切りのリストです。

レイアウト シフトを防ぐには、srcset を使用する <img> タグと <source> タグに width 属性と height 属性を設定します。

密度記述子

密度記述子を使用したレスポンシブ画像を作成するには:

• src と srcset にリストされる画像はすべて、同じアスペクト比にする必要があります。
• 1x イメージのサイズと一致するように width 属性と height 属性を設定します。
• src 属性は 1x イメージを参照する必要があります。

幅記述子

幅記述子を使用したレスポンシブ画像を作成するには:

• src と srcset にリストされる画像はすべて同じアスペクト比である必要があります。
• width 属性と height 属性は、フォールバック画像のサイズと一致する必要があります。
• 必要に応じて画像のスタイルを調整します。CSS を使用せずに、幅記述子を含むレスポンシブ画像に width と height を設定すると、画像は常にその設定サイズでレンダリングされます。これは、srcset にリストされている画像のサイズが異なる場合にも当てはまります。この動作は望ましくない場合があります。画像スタイルに width: 100%; height: auto; または width: 100vw; height: auto; を追加すると、希望する外観になります。

画像要素

レスポンシブな <picture> 要素を作成するには:

• すべての <source> タグに width 属性と height 属性を設定します。これらの属性の適切な値は、<source> タグで srcset を使用する方法によって異なります。
• 対応する <img> タグのスタイルを設定して画像を調整します。<source> タグは空の要素であるため、スタイルは影響を与えません。
• <img> タグに width 属性と height 属性を設定します。これらの値は、代替画像の固有のサイズと一致する必要があります。

例

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>