img要素を試す(with placeholders)

1. このページの目的

Picture perfect images with the modern <img> element - Stack Overflow Blog で紹介されていた img要素(with placeholders)の書き方を試してみる。

2. デモ

画像の取得には、3秒掛かるようにしてある（キャッシュもさせていない）。

コード

HTML

<img src="moon-800w.jpg" alt="A moon"
    width="400" height="424"
    srcset="moon-400w.jpg 400w,
            moon-800w.jpg 800w"
    sizes="(max-width: 640px) 400px, 800px"
    loading="lazy"
    decoding="async"
    style="background-size: cover;
           background-image: url('data:image/svg+xml;base64,{省略}');">

• .jpgファイルの部分は、実際は .php にして、遅延読み込みされるようにしている。
• width, height属性値によりアスペクト比が決まる。
• srcset属性 で w 単位を使っているので、sizes属性は必須。
• sizes属性は、ブラウザがどの画像をダウンロードするかの判断に使われる。
• しかし width属性を指定しているので、sizes属性の内容は（表示には）効果がない。
• 画像ファイルを取得している間、埋め込みSVGが表示される。
• しかし、画像ファイルが存在しなかった場合は、placeholder があっても 400x424pxのスペースは確保されないようだ。なぜ？

3. 参考

• Picture perfect images with the modern <img> element - Stack Overflow Blog