sizes属性なしでsrcset属性にw単位を使ってみるテスト

1. このページの目的

sizes属性なしで srcset属性にw単位(a width descriptor)を使ってみるテストです。

2. デモ

HTML

<img id="img1" alt="" width="500" height="333"
     style="width:100%;max-width:500px;height:auto;"
     src="./foo.webp"
     srcset="foo.webp 1470w,
             foo-1024x683.webp 1024w,
             foo-768x513.webp 768w,
             foo-300x200.webp 300w">

メモ

• いろいろ試したところ、sizes属性がない場合は、viewport幅に合わせた画像がダウンロードされた。sizes="100vw"と見なされる？

3. 結論

srcset属性を w単位 (width descriptor) で使う場合、sizes属性は必須である。

Ready to check - Nu Html Checker でチェックすると指摘される。

4. 参考

• <img>: 画像埋め込み要素 - HTML: HyperText Markup Language | MDN