レスポンシブ画像は多くの場合、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属性を設定する:widthとheightに適切な値は、<source>タグでのsrcsetの使用方法によって異なります。（srcsetの操作については上記をご覧ください）。 - 画像のスタイルを調整する: 画像のスタイルを調整する必要がある場合、
<source>タグにスタイルを追加しても効果はありません。<source>タグは空要素です。代わりに、対応する<img>タグのスタイルを設定する必要があります。 <img>タグにwidth属性とheight属性を設定する: これらの値は、代替画像の固有のサイズと一致する必要があります。
HTML
<!-- 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>