Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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 does your site score on this audit?

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.

As the page loads, the red images cause other elements to move, adjust, and relocate, contributing to a bad CLS score.

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.

The green images have their widths and heights defined to ensure a stable and predictable display of your website while loading, minimizing layout shift.

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.

Summary

 **