Seoxpert.io
Get started
mediumPerformance

Images Missing Width and Height Attributes (Layout Shift Risk)

Images without width and height attributes can cause layout shifts, negatively impacting Core Web Vitals and SEO rankings.

By Seoxpert Editorial · Published

Why it matters

When images lack explicit width and height attributes, browsers cannot allocate the correct space before the image loads, causing content to shift as images appear. This layout shift is measured by the Cumulative Layout Shift (CLS) metric, a key part of Google's Core Web Vitals, which directly influences search rankings and user experience.

Impact

Unresolved, this issue can lead to poor user experience and lower rankings in Google Search due to high CLS scores.

How it's detected

An automated crawler scans the HTML for <img> tags missing both width and height attributes.

Common causes

  • •Developers omitting width and height attributes for images in HTML.
  • •Dynamic image insertion via JavaScript without specifying dimensions.
  • •Use of responsive images without setting intrinsic size.
  • •CMS or WYSIWYG editors stripping or not generating size attributes.
  • •Legacy code predating Core Web Vitals best practices.

How to fix it

Add explicit width and height attributes to every <img> element, matching the image's intrinsic dimensions. Alternatively, use CSS aspect-ratio to reserve space. This prevents layout shifts as images load and improves CLS scores.

Code examples

Problem: Missing width and height

<img src="photo.jpg" alt="">

Fix: Add width and height attributes

<img src="photo.jpg" width="800" height="600" alt="">

Alternative Fix: Use aspect-ratio in CSS

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

FAQ

Why do missing width and height attributes cause layout shift?

Without these attributes, browsers can't reserve space for images, so content moves when images load, causing layout shifts.

Can I use CSS aspect-ratio instead of width and height attributes?

Yes, CSS aspect-ratio can reserve space for images, but explicit width and height attributes are still recommended for compatibility.

Do responsive images need width and height attributes?

Yes, even responsive images should have width and height attributes that match their intrinsic size to prevent layout shifts.

What if my images are loaded dynamically with JavaScript?

Ensure you set width and height attributes or use CSS aspect-ratio when inserting images dynamically to avoid layout shifts.

Found this issue on your site?

Run a scan to see if Images Missing Width and Height Attributes (Layout Shift Risk) affects your pages.

Scan my website →