SEO Image Width and Height:
Why Declaring Dimensions Matters

How Missing Dimensions Cause CLS

When a browser loads a page, it builds the layout before images have downloaded. If an <img> tag has no width and height attributes, the browser does not know how much space to reserve for it. It renders the image at zero height initially, then re-renders the layout when the image loads — causing all the content below the image to jump downward.

This jump is measured by Google as Cumulative Layout Shift (CLS) — one of the three Core Web Vitals metrics. Google confirmed in 2021 that Core Web Vitals are a ranking signal. A CLS score above 0.25 is classified as "Poor" and can directly reduce search rankings. Images without declared dimensions are the leading cause of high CLS scores on image-heavy pages.

The fix is simple: add width and height attributes to every <img> tag. The browser uses these to calculate the aspect ratio and reserve the correct space before the image loads, eliminating the layout shift entirely.

How to Correctly Set Width and Height for SEO

The key principle is to set the intrinsic dimensions (the actual pixel size of the image file) in the HTML attributes, and use CSS to control the display size. This allows the browser to calculate the aspect ratio from the attributes while the CSS handles responsive scaling.

Width and Height in ImageObject Schema

Beyond the HTML attribute, image dimensions should also be declared in ImageObject structured data. The width and height fields in ImageObject schema tell Google the image dimensions in a machine-readable format, which improves the completeness of the structured data signal and increases eligibility for rich results.

{
  "@type": "ImageObject",
  "url": "https://example.com/plumber-clearwater.jpg",
  "name": "Emergency Plumber Clearwater FL",
  "width": 1200,
  "height": 628,
  "author": {
    "@type": "LocalBusiness",
    "name": "Acme Plumbing"
  }
}

Omitting width and height from ImageObject schema is a common oversight. Include them for every primary image on a page.

Aspect Ratios and Responsive Images

Modern browsers use the width and height attributes to calculate the intrinsic aspect ratio of an image. When CSS sets width: 100%; height: auto, the browser uses this ratio to reserve the correct space at any viewport width — preventing CLS without requiring fixed pixel dimensions in CSS.

This means you should always set the intrinsic pixel dimensions of the source image, not the CSS display dimensions. If your source image is 1200×628px, set width="1200" height="628" — even if the image displays at 600px wide on mobile. The browser will calculate the correct height automatically.

For responsive images using srcset, set the dimensions of the largest source image. The browser will scale down as needed while maintaining the aspect ratio. See our SEO image size guide for recommended dimensions by use case.

Frequently Asked Questions