top of page
  • Writer's pictureBrent Payne

Add dimensions to images

It appears that certain images on the site lack specified width and height attributes in their tags.


Why is this important?

Cumulative Layout Shift (CLS) is a critical metric within Core Web Vitals that influences Google's assessment of 'page experience.' CLS measures the degree of unexpected layout movement during page loading.


Without defined width and height for images, browsers are unable to determine the appropriate space to reserve for them. The result is a visual glitch, a 'jump,' as images trigger unpredictable layout adjustments as they load.


What does the Optimization check?

The Optimization is activated for each internal URL that features image elements lacking specified width and height attributes.


How do you resolve this issue?

Add 'width' and 'height' attributes to your <img> tags to prevent layout shifting. For a responsive design, implement the 'srcset' attribute, defining available images and their dimensions so browsers can allocate space efficiently while preserving the image's aspect ratio.


<img width="800" height="800" src="example-800.jpg" srcset="example-800.jpg 800w, example-1600.jpg 1600w, example-2400.jpg 2400w" alt="Descriptive image text"/>


Further Reading

9 views

Recent Posts

See All

ClubReq Gets A Link (Because They Asked)

I am a mentor for Techstars and have been for over 10 years. In those ten years I have mentioned to startups to ask ANYONE and everyone that they meet to link to their site. Yet, in all those times on

Comentarios


bottom of page