1. このページの目的
Web Vitals patterns の Responsive Images を試す。
2. デモ
Web Vitals patterns の Responsive Images では、なぜか HTML しか載せていないが、これは CSS が必須である。
CSS
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
- CSSファイルのダウンロードとCSSOM構築処理はレンダリングをブロックするので、このスタイルは（ほぼ）適用されて表示されるはず。
2-1. Using density descriptors（srcset属性で画像サイズ指定に x を使う）
HTML
<img width="400" height="225" class="img1"
srcset="p1.400.jpg,
p1.800.jpg 2x,
p1.1200.jpg 3x"
src="p1.400.jpg" alt="test images 1">
- デバイスピクセル比によって、ダウンロードされる画像ファイルが変わる。
- 表示サイズは、常に幅 400px である。
- 表示サイズが決まっているので、レイアウトシフトは起こらない。
2-2. Using width descriptors（srcset属性で画像サイズ指定に w を使う）
HTML
<img width="256" height="144" class="img2"
srcset="p2.256.jpg 256w,
p2.512.jpg 512w,
p2.1024.jpg 1024w"
src="p2.256.jpg" alt="test images 2">
追加の CSS
.img2 {
max-width: 1024px;
width: 100%;
}
- ウィンドウの幅によって、ダウンロードされる画像ファイルが変わる。
- CSSで
width:100%と指定しているので、デバイスによって画像の表示サイズは変わる（レンダリングまでにCSSは必ず適用される）。 - CSSで
width:100%と指定しているので、sizes属性を指定する必要はない。 - レンダリングまでにサイズが決定されるので、レイアウトシフトは起こらない。
2-3. Picture tag
HTML
<picture>
<source media="(max-width: 720px)" width="480" height="320" srcset="p3.480.jpg">
<source media="(min-width: 721px)" width="480" height="320" srcset="p3.480.jpg,
p3.960.jpg 2x,
p3.1440.jpg 3x">
<img src="p3.480.jpg" width="480" height="320" alt="test images 3">
</picture>
- まずウィンドウの幅によって利用する source タグが決まり (media属性)、その後、デバイスピクセル比によってダウンロードされる画像ファイルが変わる。
- 表示サイズは、常に幅 480px である。
- 表示サイズが決まっているので、レイアウトシフトは起こらない。
3. 追加
3-1. Picture tag の例1
HTML
<picture>
<source media="(max-width: 720px)" width="400" height="225" srcset="p4.400.jpg">
<source media="(min-width: 721px)" width="400" height="225" srcset="p4.400.jpg 400w,
p4.800.jpg 800w,
p4.1200.jpg 1200w">
<img src="p4.400.jpg" width="400" height="225" alt="test images 4">
</picture>
- ウィンドウ幅 721px 以上でアクセスすると、2つ目の sourceタグば選ばれる。