Wondering why Lighthouse is recommending you to fix this, although you don't see any layout shifts yourself, and why is it warning you only now and not before?
Table of Contents
- Why images could impact Cumulative Layout Shift
- Why and how of fixing image width and height attributes
- Can I just set image width and height via CSS?
- What if each responsive image has different width and height dimensions?
- Should I use this for SVG's as well?
- How to know the real image width and height?
- But I want to the visual width and height to be different than the real image size
- I don't see layout shifts myself, but Lighthouse keeps telling me about lacking width and height
- Will this now impact my Core Web Vitals data?
- I fixed it, but the score isn't improving
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
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
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
Should I use this for SVG's as well?
Any image that is placed within an image element and has to be fetched separately 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.