レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります

Post on:2023年12月5日

朗報です！
来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。

srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。

「sizes=auto」を使用して、CSSから画像の実際の幅を取得し、画像のサイズとして使用できるようになります

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

sizes=autoを使用できるようになると、こんな感じになります。

sizes=autoは、2023年現在実装されているブラウザはありません。しかし、各ブラウザともに実装に取り組んでおり、2024年の早い時期に対応が完了するかもしれません。

各ブラウザの実装状況は、下記の通りです。
一番早く実装される予定は、Chrome 122（2024/2リリース予定）です。

元ネタは、下記ツイートより。

sponsors

top of page

©2024 coliss