img
タグで新しいloading="lazy"
属性を使用しようとすると、次のエラーが発生します。
[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323
オンラインで見ていると、フォローリンクに出くわしました。width
およびheight
属性をimg
に追加すると、ブラウザが画面にプレースホルダを描画することでリフローを回避できるようになります。
https://web.dev/native-lazy-loading#image-loading
私の質問は、画像のwidth
とheight
をハードコーディングすることは最近では非常に珍しいことです。スタイルシートでこれらを次のようなものでオーバーライドした場合でも、回避することで利益を得られますかリフロー?
img {
width: 100%;
height: auto;
}
事前にありがとうサーミ。
ernesto Stifanoが以前に述べたものに加えて、「intrinsicsize」に関する現在の開発は、「幅と高さのHTML属性からimg/video/canvasアスペクト比を計算する」に多少なりとも似ています- https:// github。 com/web-platform-tests/wpt/pull/18945 および https://github.com/WICG/intrinsicsize-attribute/issues/16