Why Lighthouse says image elements lack width and height and how to fix

PageSpeed Insights is using Lighthouse version 7 as of February 19th, which came with some changes as well. One of them was:

• Image elements have explicit width and height
  Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

This even caused my site to drop in score, and yes, I restored this already.

Why images could impact Cumulative Layout Shift

The browser needs to know the size of the image to be able to render it properly. But obviously, the browser first has to download the image to be able to know the dimensions and know how much space to preserve. By preserving the right amount of space, the browser will prevent underlying text to be pushed down.

Pushed down contents will become an issue when this is visible for the user. It will impact your Cumulative Layout Shift score, which might cause your site or shop to not passing Google's Core Web Vitals anymore.

Why and how of fixing image width and height attributes

But maybe you want some more insights. I received the following questions on LinkedIn.

Can I just set image width and height via CSS?

That might work with the correct CSS. You could even use placeholders to preserve the right amount of spaces, maybe using position: absolute; on the image so it won't be pushing contents down.

Do note that you would need to set both dimensions. Otherwise, when you only specify the width in CSS, the browser still doesn't know what the height could become.

What if each responsive image has different width and height dimensions?

You could then use the picture element with different source elements per image. For each image in a source, you can add width and height attributes to the source element. The browser will pick the right image based on your media attribute and will then map the src, width and height attributes to the img element.

via @_zouhir

If all responsive images have the same dimensions, you can just set the width and height attributes to the img element, instead of each individual source element.

Should I use this for SVG's as well?

Any image that is placed within an image element and has to be fetched separa­tely by the browser, should have width and height attributes assigned.

How to know the real image width and height?

You obviously don't want to bother content managers with specifying dimensions to all uploaded and inserted images. But you obviously want the width and height image attributes to be applied right away, so the browser can take this information into account while rendering the page.

Within the CMS I use for this website, a script was already implemented. I had to change it for SVG images (in my case, my logo). Being built in PHP, my CMS will just loop all images and will do the following:

• use getimagesize to get image dimensions for non SVG images;
• use simplexml_load_string to get dimensions from width and height attributes or viewBox property.

But I want to the visual width and height to be different than the real image size

That's still possible. The browser will only use the width and height attribute values to determine the relative difference. When displaying the image (or placeholder as long as the image isn't downloaded), it will then use the relative difference to display it based on the applied with and maybe height via your CSS .

Do not that if you specified both width and height within CSS, and the width and height ratio does not equal the values in the image attributes, it will still trigger a layout shift.

I don't see layout shifts myself, but Lighthouse keeps telling me about lacking width and height

If this is the case, the following might be happening:

• You are on a very fast device and connection. Maybe the browser already downloaded the image while your CSS was render blocking. However, other users out there might still experience visible layout shifts;
• Images are cached, so refreshing the page without clearing your browser cache might not result into layout shifts. Do note thought that not all users might have all of your images in your cache;
• Some images are absolutely positioned elements using CSS, so they won't be able to push other contents down (unless its parent is absolutely positioned, and there still is other contents within the same parent). If this is the case, it could actually be a Lighthouse false positive.

Will this now impact my Core Web Vitals data?

Probably not, as lacking image height and width attributes can already cause layout shifts. In other words, if this is an issue now, it already was an issue before as well and is already reflected within your Core Web Vitals data.

I fixed it, but the score isn't improving

This is quite possible as the layout shift already happened, even before Lighthouse or PageSpeed Insights was showing you this recommendation. It still is a best practices which you likely want to improve towards (real) UX.

But why is Lighthouse only whining about image dimensions since recently?

Width + height attributes became old-fashion, but is now hip & happening again as browsers can now use those properties to reduce CLS. But it's only since recently that (though limited) browsers know what to do with it.

The reason? The aspect-ratio CSS property is relatively new (Edge & Chrome support since January 2021) and is a browser default property for images, which will do the heavy lifting for you, but only when those image dimensions were applied.

With this CSS property and this browser behaviour being introduced, it only become a recommendation since recently as there was no point in informing you about lacking width and height attributes before.

Conclusion

Improve UX by making width and height dimensions great again! More questions or in need of assistance? Let me know on LinkedIn or by mail.