web-dev-qa-db-ja.com

ネイティブの遅延ロードイメージのリフロー(loading = '"lazy")

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

私の質問は、画像のwidthheightをハードコーディングすることは最近では非常に珍しいことです。スタイルシートでこれらを次のようなものでオーバーライドした場合でも、回避することで利益を得られますかリフロー?

img {
   width: 100%;
   height: auto;
}

事前にありがとうサーミ。

2
Samuel

ernesto Stifanoが以前に述べたものに加えて、「intrinsicsize」に関する現在の開発は、「幅と高さのHTML属性からimg/video/canvasアスペクト比を計算する」に多少なりとも似ています- https:// github。 com/web-platform-tests/wpt/pull/18945 および https://github.com/WICG/intrinsicsize-attribute/issues/16

0
mfranzke