Shopify Image Optimization: What Shopify Compresses Automatically (and What It Doesn’t)

“Image optimization” on Shopify usually gets folded into two other conversations: lazy loading (when an image loads) and checkout speed (images near the buy button). Neither one is about the images themselves — the actual file weight, format, and dimensions before a browser ever starts loading anything.

That’s what this guide covers. If you want the loading-behavior half, see our lazy loading guide; for the checkout-specific angle, see our checkout image guide. This post is about what happens before either of those matters: how big the file is, what format it’s in, and whether it was ever actually compressed.

What Shopify actually optimizes for you

Shopify’s image CDN does more than most merchants realize. Through the image_url and image_tag Liquid filters, it automatically generates resized versions of every image you upload, builds a responsive srcset so phones don’t download desktop-sized files, and serves modern formats — WebP since 2020 and AVIF since 2022 — to any browser that supports them, automatically falling back to JPEG/PNG for the rest.

None of that requires touching a theme file. If you’re on a Shopify 2.0 theme (Dawn, Craft, Sense) using the standard image filters, format conversion and responsive sizing are already happening in the background.

What it doesn’t do

Here’s the part that surprises most merchants: Shopify doesn’t compress the file you upload. It resizes and reformats derivatives of that file on the fly, but the original stays exactly as heavy as when you uploaded it — and Shopify’s own developer docs actively recommend uploading the largest version available, so every derivative can be generated from it. That’s the right call for image quality. It also means a bloated master file (a straight-from-camera photo, an unedited screenshot, an old PNG export from a design tool) stays bloated as the source every resized version gets built from.

Why the source file still matters

Images are the single heaviest part of most webpages. Across the median site, images make up 36–37% of total page weight — on mobile, that’s roughly 911KB of a 2,559KB median page. A store with 40 product photos that were never compressed before upload is carrying that weight on every collection page, on every device, indefinitely — Shopify’s CDN is resizing and reformatting a heavy master, not a light one.

The 3 things worth fixing at the source

1. Resize before you upload, not just for display

If a product photo will only ever display at 800px wide, uploading it at 6000px (a typical DSLR or phone camera export) means Shopify’s CDN is resizing down from a much bigger file than it needs to on every request. Export or crop product photos to a realistic maximum — roughly 2000px on the longest side is enough headroom for zoom features without carrying camera-native dimensions.

2. Compress before upload, especially for non-photo assets

Product photography from a proper camera or photo editor is usually already reasonably compressed. Screenshots, PNG exports from design tools, and graphics pulled from a supplier’s marketing kit often aren’t — a lossless PNG screenshot can be 5–10x heavier than a compressed JPEG or WebP of the same image. Run those through your photo editor’s export settings before they ever reach your Shopify admin, or let an app compress what’s already uploaded.

3. Check images that bypass your theme’s image filters

Reviews widgets, upsell apps, and some older or heavily customized theme sections sometimes render images with a plain <img src=""> tag instead of Shopify’s image_tag filter — which means they skip the automatic WebP/AVIF conversion and responsive sizing entirely. These are usually the heaviest, least-optimized images on a page precisely because they’re invisible to the “Shopify handles it automatically” assumption.

How to check where you actually stand

1. Open a product or collection page in Chrome DevTools’ Network tab, filter to “Img”, and sort by size — anything over 200KB is worth a second look.
2. Right-click a flagged image → Inspect, and check whether it’s rendering as a <picture> element with multiple srcset sizes (Shopify’s automatic handling) or a single static <img> tag (likely bypassing it).
3. Run Shopify’s built-in Web Performance report (Settings > Web Performance) to see how image weight compares across your store’s page types.

Fixing the ones Shopify already resizes automatically won’t move much — the CDN is doing that work. The images worth chasing are the oversized masters and the ones that skip the filter entirely.