Shopify Image Elements Missing Width and Height: Fix the PageSpeed Warning

Why Shopify Gets the Width and Height Warning

Lighthouse flags image elements without explicit width and height because the browser cannot confidently reserve layout space while the image downloads. If the image appears and pushes text, buttons, product cards, reviews, or below-the-fold content down the page, shoppers see a jump. Google explains this under layout stability guidance: images and videos need dimensions so the browser can allocate space before the resource finishes loading.

Shopify themes often start clean and then drift. A developer adds a custom hero. A landing page section hardcodes an image. A page builder injects a banner. A review app inserts customer photos. A blog post uses raw HTML instead of the theme image component. Each one can create the same PageSpeed warning.

This overlaps with Shopify CLS fixes, image optimization, and properly sizing images. Width and height is not about compressing the file. It is about making the layout predictable.

Manual Step-by-Step: Fix Image Elements Without Dimensions

1. Find the exact images Lighthouse reports

Run PageSpeed Insights on the homepage, a product page, and a collection page. Open the "Image elements do not have explicit width and height" audit and copy the image URLs. Then search your theme for the filename, section name, app block, or snippet that renders it.

Use the same URLs during testing. PageSpeed runs vary, so keep a stable before and after process using the speed test score variance guide.

2. Prefer Shopify image_tag for theme-owned images

For images stored in Shopify, use Liquid's image pipeline instead of raw CDN URLs. It helps generate responsive sources and keeps the image inside Shopify's CDN behavior. The key is to render markup that gives the browser a stable box.

<!-- Product card image -->
&lbrace;&lbrace; product.featured_image
  | image_url: width: 700
  | image_tag:
    widths: '350, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    loading: 'lazy',
    alt: product.featured_image.alt
&rbrace;&rbrace;

3. Add dimensions to raw img tags

If a custom section must use a raw img tag, add width and height attributes that match the image's intrinsic ratio. CSS can still make the image responsive. The attributes define the ratio; CSS defines how it scales.

<img
  src="&lbrace;&lbrace; section.settings.badge | image_url: width: 480 &rbrace;&rbrace;"
  width="480"
  height="320"
  loading="lazy"
  decoding="async"
  alt="&lbrace;&lbrace; section.settings.badge.alt | escape &rbrace;&rbrace;"
  class="feature-badge"
>

.feature-badge {
  width: 100%;
  height: auto;
}

4. Reserve an aspect-ratio slot for cropped cards

Product cards, collection tiles, lookbooks, and editorial blocks often crop images. If you cannot rely on the image's natural dimensions, reserve a stable container with aspect-ratio and crop the image inside it.

.product-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f5f5f5;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

5. Check app widgets and page-builder blocks

If the reported image comes from reviews, Instagram feeds, shoppable galleries, recommendations, or a page builder, the fix may live in app settings rather than theme files. Disable the block in a duplicated theme, retest, and confirm ownership before editing. The guides on review widgets and page builders slowing down Shopify cover that workflow.

Manual Fix vs Thunder Fix

What Not to Break

Do not hardcode desktop-only dimensions that distort mobile images. Do not remove responsive srcset while adding width and height. Do not force all images into the same ratio if product photography uses different crops. The browser needs a stable reserved area, but shoppers still need clean product presentation.

Also keep LCP in mind. Above-the-fold hero and product images should usually be eager and high priority, while below-the-fold images can be lazy. Read defer offscreen images on Shopify and LCP optimization if the same page has image priority warnings.

How to Confirm the Shopify Width and Height Fix Worked

Retest with PageSpeed Insights and the free Shopify speed test. The warning should list fewer images or disappear. CLS should stay below 0.1 in field data, and the page should feel stable while loading on a mobile connection.

For a complete storewide workflow, use the complete Shopify speed optimization guide. If your store has many legacy sections or app widgets, compare automation options in the best Shopify speed apps guide or review Thunder pricing.

FAQ