Native Lazy Load Image Reflow (loading='"lazy")

When attempting to use the new loading="lazy" attribute on an img tag i get the following error:

[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323

When looking online, i came across the follow link specifies that adding width and height attributes to the img helps the browser avoid reflow by painting a placeholder to the screen:

https://web.dev/native-lazy-loading#image-loading

My question is, it's pretty uncommon these days to hard code a width and height of an image, if i override these in my style sheet with something like the following, will i still benefit from avoiding reflow?

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

Thanks in advance Sami.

Short answer is no... Even if 'reflow' behaviour is strictly dependent on the browser's implementation, it's pretty valid to assume that almost any modification of the DOM will lead to a 'reflow', especially if it involves changing dimensions (elements displacing other elements) or adding/removing a node. It would be still advisable to add height and width attributes that will not only suppress the error/warning, but will also work as a fallback.

Most importantly, you will avoid an ugly 'jump' effect when the image loads if the written height/width matches the final style.

Additional note: 'reflows' are to be avoided when possible, but in your case, image loading will happen only once, so I would say It doesn't matter.