Shopify Cumulative Layout Shift from Images Missing Dimensions
Search intent: fix · Updated February 2026
Shopify cumulative layout shift (CLS) from images occurs when product images, collection thumbnails, or banner images load without explicit width and height attributes. Without these attributes, the browser cannot reserve space for the image before it loads, causing other page elements to shift downward as images appear - which is the definition of layout shift. The fix is to add explicit width and height attributes to all img tags in your Shopify theme, using the image object's width and height properties or the image_url filter with defined dimensions.
Quick Diagnostic Checklist
- Run PageSpeed Insights on your product page - is CLS above 0.1?
- In DevTools Elements panel, search for <img - do the tags have width and height attributes?
- Are any img tags using the deprecated img_url filter pattern?
- Check the Web Vitals Chrome extension - are layout shifts highlighted on product images?
Not sure if your store has this issue?
Run a free scan to detect performance problems instantly.
What This Issue Means
CLS (Cumulative Layout Shift) is a Core Web Vital that measures visual stability - how much page elements shift position during loading. A CLS score above 0.1 is 'needs improvement'; above 0.25 is 'poor'. Images without explicit dimensions are the most common cause of CLS on Shopify stores because the browser doesn't know how tall each image will be until it downloads the image file - so it reserves no space, then jumps the layout when the image arrives.
What Causes It (Shopify-Specific)
Liquid img tags missing width and height attributes
In older theme code, images are output like: <img src='{{ product.featured_image | img_url: '800x' }}'>. No width or height is specified, so the browser has no aspect ratio to work from when reserving space.
The deprecated img_url filter doesn't expose dimensions
Shopify's deprecated img_url filter outputs a URL but doesn't provide the image object's native width and height. Modern code should use the image_url filter combined with explicit width/height from the image object.
Lazy-loaded images without aspect ratio containers
Lazy loading (loading="lazy") defers image fetching, which is good for performance. But without a CSS aspect ratio container or explicit width/height, lazy images cause layout shift exactly when they load - often just as the user scrolls to them.
App-injected images bypass theme dimension controls
Review apps displaying photo reviews, loyalty apps showing badges, and upsell apps adding product images often inject img tags without dimensions, causing CLS that is outside your theme code control.
How to Detect It Manually
- 1Open Chrome DevTools → Performance tab → Record a page load → look for Layout Shift events in the timeline
- 2In the Elements panel, search for <img tags - do they have width and height attributes?
- 3Run PageSpeed Insights on your product page - look for "Avoid large layout shifts" and "Image elements do not have explicit width and height" diagnostics
- 4The Web Vitals Chrome extension shows CLS score and highlights which elements are causing shifts (click the CLS icon to see shift regions)
How to Fix It (Step-by-Step)
Update img tags to include width and height from the image object
Use Shopify's image object's .width and .height properties to output the native dimensions. The browser uses the ratio (even if the rendered size is different via CSS) to reserve correct space.
{%- assign img = product.featured_image -%}
<img
src="{{ img | image_url: width: 800 }}"
alt="{{ img.alt | escape }}"
width="{{ img.width }}"
height="{{ img.height }}"
loading="lazy"
>Use CSS aspect-ratio as a fallback for dynamic content
For sections where image dimensions are unknown at render time (e.g. metafield images), use CSS aspect-ratio to prevent layout shift:
.product-image-wrapper {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.product-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}Replace img_url with image_url (for deprecated filter usage)
The img_url filter is deprecated. Replace {{ image | img_url: '800x' }} with {{ image | image_url: width: 800 }}. The new filter works with Shopify's CDN and supports explicit sizing.
{%- comment -%} Old (deprecated): {%- endcomment -%}
<img src="{{ product.featured_image | img_url: '800x' }}">
{%- comment -%} New (correct): {%- endcomment -%}
<img
src="{{ product.featured_image | image_url: width: 800 }}"
width="{{ product.featured_image.width }}"
height="{{ product.featured_image.height }}"
alt="{{ product.featured_image.alt | escape }}"
>How SEOScan Detects This Issue
SEOScan parses all img tags in the page HTML and checks for the presence of explicit width and height attributes. Images missing both attributes on product pages, collection pages, and the homepage are flagged. SEOScan also checks for the deprecated img_url filter pattern in the page source (visible as Shopify CDN URLs with the old format), which indicates the image rendering code hasn't been updated to the modern image_url approach.
Example Scan Result
Description
23 img elements found on the product page without explicit width and height attributes. 8 use deprecated img_url filter URLs. Estimated CLS contribution: 0.15 (needs improvement threshold). Primary offenders: product gallery images and review app photo thumbnails.
Impact
CLS score likely in "needs improvement" range (0.1–0.25). Google uses CrUX field CLS data in ranking. Users on slow connections will experience visible layout shift as product images load.
Recommended Fix
Add width and height attributes to all img tags using the image object's .width and .height properties. Replace deprecated img_url filter with image_url filter.
Why It Matters for SEO
Core Web Vital
CLS is a Core Web Vital used as a ranking signal. Google's threshold for 'good' CLS is below 0.1 - above this and ranking may be suppressed relative to competitors with lower CLS.
User Experience Impact
Layout shift is disorienting for users - text moves as they read it, buttons shift as they try to click them. High CLS correlates with higher bounce rates, especially on mobile where screen space is limited.
Easy Fix, High Return
Adding width and height to img tags is a low-effort change with potentially significant CLS improvement. It's one of the highest ROI performance fixes for Shopify stores.
Shopify CDN Supports This
Shopify's image CDN provides native image width and height data via the image object - all the information needed to fix CLS is available in Liquid without any external processing.
Real-World Validation Signals
- Google's documentation explicitly cites 'images without explicit width and height' as the primary cause of CLS - it's the first fix in their CLS optimization guide.
- The HTML specification has required width and height on img tags for aspect-ratio reservation since HTML 5.1 - browsers use the ratio to reserve layout space before images load.
- Shopify's own Dawn theme includes explicit width and height on all img tags using the image object properties - stores using older themes or custom templates often miss this.
- Adding width and height to images typically reduces CLS by 60–90% on image-heavy Shopify pages like product galleries and collection pages.
When this may not need fixing
If your Google Search Console Core Web Vitals report shows CLS in the 'good' range (<0.1) for real users across your store, and PageSpeed Insights confirms this, your images are already handling dimensions correctly. This may be because your theme already outputs width/height attributes, or your images are all above the fold and not causing measurable shift.
Frequently Asked Questions
Q: Why do images cause layout shift on Shopify?
Images cause layout shift when the browser doesn't know their dimensions before downloading them. Without explicit width and height attributes, the browser reserves no space for the image, then jumps all content below it downward when the image loads. Adding width and height attributes lets the browser reserve the correct aspect ratio space in advance.
Q: What is a good CLS score for a Shopify store?
Google's threshold for 'good' CLS is below 0.1. 'Needs improvement' is 0.1–0.25, and 'poor' is above 0.25. For product-heavy Shopify stores with image galleries, achieving below 0.1 requires explicit dimensions on all images and careful handling of dynamic content like review widgets.
Q: Do I need to know the exact image dimensions?
No - use Shopify's image object to get native dimensions dynamically: width="{{ image.width }}" height="{{ image.height }}". The browser uses these values to calculate the aspect ratio and reserves the correct proportional space, even if the rendered image is smaller via CSS.
Q: Does lazy loading help or hurt CLS?
Lazy loading (loading="lazy") is beneficial for page performance but can worsen CLS if images don't have dimensions specified. With explicit dimensions, lazy loading works correctly - the browser reserves space and loads the image when needed. Without dimensions, lazy-loaded images cause shift exactly when they load as the user scrolls.
Check Your Store for This Issue
SEOScan automatically detects shopify cumulative layout shift from images missing dimensions and 3 related issues - with specific fixes for your store.
Run Free Scan