Doing SEO for ecommerce? Our upcoming webinar is just for you! Register now.

Dealing with Performance issues?

Crawl your website with Sitebulb for 300+ tech SEO checks

Try for Free
Medium This Hint is worth investigating further, and may warrant further attention depending on the type and quantity of URLs affected. Opportunity This Hint represents an opportunity for optimization.

Add dimensions to images

This means that the URL contains images that do not have width and height size attributes.

Why is this important?

Cumulative Layout Shift (CLS) is one of the Core Web Vitals metrics that feed into Google's understanding of 'page experience.' CLS is about how much it feels that the page layout moves around as it is loading.

If you don't specify width and height on images, when loading the page, the browser does not know how much space to allocate for the images. This results in an image 'jump', as the layout shifts around the images. 

Image jump, no height or width

What does the Hint check?

This Hint will trigger for any internal URL that contains image elements which do not have explicit width and height attributes.

How do you resolve this issue?

Simply adding 'width' and 'height' attributes to <img> tags will avoid layout shifts, but a fully responsive solution is a little more complicated.

When working with responsive images, use 'srcset' to define the set of images you want the browser to select from, and what size each image is. The browser will calculate the aspect ratio and therefore understand what space to allocate in the layout (ensure that the images themselves use the same aspect ratio).

<img
width="800"
height="800"
src="champions-800.jpg"
srcset="champions-800.jpg 800w, champions-1600.jpg 1600w, champions-2400.jpg 2400w"
alt="The amazing Leicester City"
/>

Further Reading

Sitebulb Desktop

Find, fix and communicate technical issues with easy visuals, in-depth insights, & prioritized recommendations across 300+ SEO issues.

  • Ideal for SEO professionals, consultants & marketing agencies.

Sitebulb Cloud

Get all the capability of Sitebulb Desktop, accessible via your web browser. Crawl at scale without project, crawl credit, or machine limits.

  • Perfect for collaboration, remote teams & extreme scale.