HighSpeedMeasured

Images much larger than they’re shown

Oversized images make every visitor download far more than the screen needs.

Checked on: every page the audit scans · Zolvio’s check: “Large unoptimized images”

Why it costs you sales

An image thousands of pixels wide shown in a small slot costs the full download anyway. On mobile data that means a slower page and a longer wait before the product appears.

Images are usually the largest files a store page loads, so they’re the first place to look when a page feels slow.

How Zolvio detects it

While the page loads on its own in a real browser at desktop size (1,440 pixels wide), Zolvio compares each image’s real (natural) width with the width it’s shown at, and reads the size of its file. An image that downloads at least 4 times wider than it shows, more than even a high-resolution screen needs, in a file of 200 KB or more, flags the page.

Images shown smaller than 50 by 50 pixels, images in layers fixed over the page (pop-ups and chat widgets), vector (SVG) images and placeholders drawn inline are left out, and so are images from hosts that don’t share their file size. The finding lists up to five of the images, with their size on screen, their size as downloaded and their file size.

This is a direct measurement, so it’s reported on every plan, including Free and audits with AI turned off. With AI review on, the AI agent also checks it against the audit’s evidence before it reaches your issue list.

How to fix it

  1. Find where each image in the finding comes from: a theme section, a custom HTML or Liquid block, a slideshow or an app.
  2. In your theme, request images at the size they’re displayed: Shopify’s image_url filter takes a width (image | image_url: width: 1200), and image_tag with widths and sizes lets the browser pick a smaller file on phones. Or use the theme’s own image block, which sizes images for you.
  3. For images inside product or page descriptions, upload a smaller version in the product admin or in Online Store → Pages.
  4. Check banners and images set through theme settings and apps; they’re often placed at full size.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Images much larger than they’re shown” cost a Shopify store sales?

An image thousands of pixels wide shown in a small slot costs the full download anyway. On mobile data that means a slower page and a longer wait before the product appears. Images are usually the largest files a store page loads, so they’re the first place to look when a page feels slow.

How does Zolvio detect “Images much larger than they’re shown”?

While the page loads on its own in a real browser at desktop size (1,440 pixels wide), Zolvio compares each image’s real (natural) width with the width it’s shown at, and reads the size of its file. An image that downloads at least 4 times wider than it shows, more than even a high-resolution screen needs, in a file of 200 KB or more, flags the page. Images shown smaller than 50 by 50 pixels, images in layers fixed over the page (pop-ups and chat widgets), vector (SVG) images and placeholders drawn inline are left out, and so are images from hosts that don’t share their file size. The finding lists up to five of the images, with their size on screen, their size as downloaded and their file size.

How do I fix “Images much larger than they’re shown” on Shopify?

Find where each image in the finding comes from: a theme section, a custom HTML or Liquid block, a slideshow or an app. In your theme, request images at the size they’re displayed: Shopify’s image_url filter takes a width (image | image_url: width: 1200), and image_tag with widths and sizes lets the browser pick a smaller file on phones. Or use the theme’s own image block, which sizes images for you. For images inside product or page descriptions, upload a smaller version in the product admin or in Online Store → Pages. Check banners and images set through theme settings and apps; they’re often placed at full size.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Workflows — Go from an issue to its heatmap and recordings before you change anything.