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

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画

[coliss]

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

[inazuma2073]

これであの下らないCLSとかに対応できれば…

[peketamin]

開発者が楽できるようにどんどんサポートされていくのはありがたい

[spark7]

そもそもsizesを知らんかったが何ともアレな実装だな

[KoshianX]

おお、どんどん便利になるなあ