レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
Post on:2023年12月5日
sponsorsr
朗報です！
来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。
srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。
Add sizes=auto to lazy-loaded <img>
遅延画像の<img>に、sizes=autoが追加されます
詳細は、以下より。
Add sizes=auto to lazy-loaded <img>
これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。
ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。
sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画像を作成し、それぞれの幅を正確に把握し、HTMLのsrcset属性に正確に記述する必要があります。
参考: sizes=auto is a great idea
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<img alt="A baby smiling with a yellow headband." srcset=" baby-s.jpg 300w, baby-m.jpg 600w, baby-l.jpg 1200w, baby-xl.jpg 2000w " sizes=" (min-width: 2420px) 2000px, (min-width: 720px) calc(94.76vw - 274px), (min-width: 520px) calc(100vw - 96px), calc(100vw - 32px) " > |
sizes=autoを使用できるようになると、こんな感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<img alt="A baby smiling with a yellow headband." srcset=" baby-s.jpg 300w, baby-m.jpg 600w, baby-l.jpg 1200w, baby-xl.jpg 2000w " loading="lazy" sizes="auto" > |
sizes=autoは、2023年現在実装されているブラウザはありません。しかし、各ブラウザともに実装に取り組んでおり、2024年の早い時期に対応が完了するかもしれません。
各ブラウザの実装状況は、下記の通りです。
一番早く実装される予定は、Chrome 122（2024/2リリース予定）です。
- Chromium: yes Auto Sizes for Lazy Loaded Images with Srcset
- Gecko: yes Auto-sizes for lazy-loaded images in HTML
- WebKit: yes Auto-sizes for lazy-loaded images in HTML
元ネタは、下記ツイートより。
Chrome is shipping <img sizes="auto"> support 🥳 For lazy-loaded images with srcset, this allows the browser to use the layout width of the image in order to select the source url from the srcset.https://t.co/CQ89J12h2h
For lazy-loaded images, CSS is often available before the… pic.twitter.com/Cfufc9306D
— Addy Osmani (@addyosmani) December 1, 2023
sponsors
