I'm working with a responsive design and Lighthouse keeps telling me "Image elements do not have explicit width and height". I concluded that it means in the html, because my images have set dimensions in my css with different breakpoints.

Is there a best practice here to keep being responsive but make Lighthouse happy? It might be obvious, but as a student, I'm scratching my head here.

CodePudding user response：

you are right that's actually the best practice and that is recommended for Web Vitals to enhance performance.

If you set height and width, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it.

when you add img in general you should add in html width and height and I prefer to add values that I am adding in CSS or sometimes when I don't have values in CSS I'm doing inspect on the element and make the browser tell me width and height then I back to html and write them.

if you are interested in this topic (Performance) search about Web Vitals (Cumulative Layout Shift) you will find interesting topics