Image elements do not have explicit width and height

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, resulting in bad user experience.

Avoiding large layout shifts is essential in delivering a smooth 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. When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading them.

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

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="staq.jpg" width="640" height="360" alt="Staq Logo">

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

Fix elements do not have explicit width and height with Staq

Go to Staq Hosting > Media > Site Optimizer > Add explicit image dimensions