Image elements have explicit width and height

Images with no explicit width or height attributes can significantly affect your page layout.

Visitors may find layout shifts frustrating because elements might move around, creating an unnatural visual experience.

Unsized images cause layout shifts that affect your webpage's usability.

Why it is important

Since images do not have height and width attributes, they are usually downloaded at their original size.

Because the browser waits until the image is completely downloaded before determining the size and allocating space for it, unsized images can slow down the page's loading.

While the browser resizes the images and positions them on your page, you may notice that your page content is constantly moving from its original position.

You will, however, experience significant performance improvements if you fix unsized images.

How the audit fails

Sitefig uses the Lighthouse tool, which checks if an image CSS size property is defined, not empty, and not equal to 'auto'.

Images are considered sized if they have defined & valid values.

CSS background-images & ShadowRoot images are ignored for this audit.

Fixed images, Non-network SVGs with dimensions, and correctly sized images with HTML or CSS don't cause layout shifts in practice, so they are excluded from the audit.

Fixing the problem

You can resolve this audit by ensuring that serving images in HTML will have proper width and height attributes so that the browser knows how much space to allocate in the layout for the image.

Using the CSS aspect-ratio property on the image is an alternative way of providing the width and height of the image.

img, video {
    max-with: 100%;   height:auto
}

A container will maintain a consistent aspect ratio using this attribute, as does the width and height attributes.

<img src="/some/image.webp" height="100" width="200"> 

You can find even more helpful approaches to fix this audit on the following link: Serve images with correct dimensions.