How to Fix Missing Image Dimensions on Shopify & WooCommerce

errorThe Problem

Your images are missing explicit width and height attributes. When the browser loads your page, it doesn't know how much space to reserve for images until they download. This causes the page layout to jump and shift — a problem called Cumulative Layout Shift (CLS).

trending_upWhy It Matters for SEO

CLS is a Core Web Vital that directly impacts your Google rankings. Every time content shifts on the page, users get frustrated — especially on mobile. Google measures this and penalizes pages with high layout shift. Adding width and height to images is one of the easiest CLS fixes.

buildHow to Fix It

<!-- Bad: no dimensions -->
<img src="{{ image | img_url: '500x' }}" alt="{{ image.alt }}">

<!-- Good: explicit dimensions -->
<img src="{{ image | img_url: '500x' }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}">

<!-- Best: use image_tag filter (Shopify 2.0+) -->
{{ image | image_url: width: 500 | image_tag }}

Related Fix Guides