For years I have implemented images without the ‘height’ and ‘width’ attributes on webpages, safe in the knowledge that I’ll deal with it using Cascading Style Sheets (CSS). With me, many others applied the same strategy, as it seemed to make more sense from a responsive design perspective.
But things are about to change. One of the main reasons for this change is to reduce the Cumulative Layout Shift (CLS), a Core Web Vital metric, by addressing ‘jank’ that can happen during page load. The browser does not always know the dimensions (and more importantly the aspect ratio) of an image, which means that it won’t ‘reserve’ the space needed for the image. This often results in content appearing to be squeezed upwards, only to be shifted downwards once the image loads.
As you can see in the video above, the boxes on the left-hand side reshape a lot more than those on the right-hand side. This is because the browser on the right hand side knows the aspect ratio for the images.
Reintroducing ‘width’ and ‘height’ image attributes
The ‘width’ and ‘height’ attributes to the <img /> element allow the browser to calculate the aspect-ratio and anticipate the space required for the image to load. This means that the surrounding content can be placed nearer to their final position, thus reducing CLS.
Chrome Developer Tools shows that the browser ignores the absolute values for width and height, but applies the information to the aspect-ratio property. This ensures full compatibility with responsive designs.
A result of this behaviour is that the values for the attributes can be derived from the real size of the image, without fearing that these values will break the responsive design.
img[Attributes Style] {
width: 3712px;
aspect-ratio: auto 3712 / 5568;
height: 5568px;
}The example above is taken from one of the images shown on the video and illustrates this perfectly, as the image has a width of 3,712 pixels (which is far wider than the viewport the Moto G4 phone emulated). However, it is not just the Hypertext Markup Language (HTML) that needs adjustment; there is a very small chance that the CSS needs to be considered too.
This is caused by the browser not being instructed to treat the images differently. In general, this shouldn’t happen as websites often already deal with images through their CSS, meaning that this step could be skipped. If the issue exists on a site, a few lines added to the CSS stylesheet can resolve this. For example, we can change the default behaviour by adding these lines (shown below) for the global img element (if you apply this, make sure to test the impact of adding this rule).
img{
width:100%;
height:auto;
}
This results in the image fitting in nicely within its parent containers (unless otherwise specified); and the aspect ratio can be applied.
Workaround: from Chrome 88 you can use aspect-ratio in CSS
At the moment of writing, not many browsers yet support this (Chromium now supports aspect-ratio, and other browsers have agreed upon implementation), but this can also be implemented purely in CSS.
The implementation is straightforward. On the selected image, a simple line with the aspect-ratio property and its value suffices.
The example above uses the following lines:
.image-2{
aspect-ratio:3 / 2;
}
But as previously mentioned, it is a workaround and is not yet fully supported. We recommend using the attributes for height and width on image elements.
The size of importance
Think of this post next time you want to click on a button or link and the content suddenly shifts, opening up a banner you didn’t want to view. The implementation of image dimensions can greatly improve the user-experience on websites and help pass the Core Web Vitals assessment.
If you’d like to learn more about the upcoming Core Web Vitals update, get in touch with our Web Experience team!
