Lighthouse: Use explicit width and height on image elements

Overview

Images and/or videos that do not have explicit width and height attributes can cause large layout shifts as your page loads.

Layout shifts can be frustrating to your page visitors as elements could move around, possibly making your page appear visually jarring.

Avoiding large layout shifts is essential in delivering a smooth and streamlined experience to your visitors.

How do image and/or video elements without explicit width and height affect page performance?

Image and/or video elements that aren't explicitly declared with height and width attributes are usually re-sized using CSS (either on the image itself or the parent container). When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the 'unsized images' and/or videos.

You may notice that when the browser fetches these images, your page content is constantly being pushed down or moved around from its original position (i.e., layout shifts) as the browser resizes the images and positions them on your page.

Layout shifts caused by the unsized images and/or videos affect the way users interact with your webpage.

This is reflected through a poor Cumulative Layout Shift (CLS) score, which indicates that your page is visually unstable or janky, particularly on mobile devices.

Moreover, the browser needs to do more work to recalculate the page layout, possibly affecting your page performance.

By explicitly declaring width and height attributes for your image and/or video elements, you can ensure that the browser will calculate and reserve sufficient space for the images and/or videos.

This can minimize main-thread work, prevent large layout shifts and create a smooth experience for your visitors.

How does GTmetrix trigger this audit?

This audit is triggered if all of the following conditions are met:

• Any image and/or video elements are missing either the height or width, or both attributes.
• These height and/or width attributes are not declared anywhere i.e., in the HTML, in the CSS, specific stylesheets, etc.
• The height and width attributes do not have real values e.g., a non-zero number, auto in CSS, etc.

Clicking on the audit reveals the images that do not have explicit width and/or height attributes.

How to fix this audit?

To fix this audit, simply specify, both, the width and height for your webpage's image and video elements. This ensures that the correct spacing is used for images and videos.

For example,

<img src="devpug.jpg" width="640" height="360" alt="Devpug Sleeping">

where width and height have been declared as 640 and 360 pixels respectively.

Note that modern browsers automatically calculate the aspect ratio for an image/video based on the declared width and height attributes.

Read more about this here.

For WordPress (or other CMS) Users

WordPress (or other CMS) users can easily add width and height attributes to images through plugins.

For example, WP Rocket allows you to add image dimensions for all your images with a single click in the Media settings.

Read our detailed WordPress optimization using WP Rocket guide.