Shopify image optimization: the fastest speed win most stores skip

Images are usually the heaviest thing on a Shopify page and the easiest thing to fix — which makes image optimization the highest-return speed work most stores never do. A single unoptimised hero photo can outweigh all your site’s code combined. And because the hero or product image is normally the element LCP measures, fixing images improves the exact metric Google grades you on.

What Shopify already handles

Credit where it’s due — Shopify does a fair amount automatically:

• Serves modern formats. Shopify converts and serves WebP to browsers that support it, so you don’t need to convert manually.
• Generates responsive sizes. It creates multiple sizes and, in well-built themes, serves the right one per device.
• Delivers via CDN. Images are served from a global CDN, so distance isn’t your problem.

What Shopify doesn’t do is undo a bad upload. It won’t meaningfully recover quality-wasted bytes from a 6MB camera original, and it can’t fix a theme that requests full-size images on mobile. The decisions that matter are still yours.

The rules that actually matter

1. Size before you upload. This is the big one. Uploading a 4000px-wide photo for a slot that displays at 800px wastes bandwidth on every single visit. Resize to roughly the largest size it will ever display — 2000px wide is plenty for a full-width hero; 1200–1600px covers most product images.

2. Compress before you upload. Run images through a compressor (TinyPNG, Squoosh, ImageOptim — all free). For photographs, 70–80% JPEG quality is visually indistinguishable from 100% at a fraction of the weight. Aim for under 200KB for product images and under 500KB for full-width heroes.

3. Pick the right format.

• Photographs → JPEG (Shopify converts to WebP automatically).
• Logos, icons, flat graphics → SVG where possible; it’s tiny and scales perfectly.
• PNG only when you genuinely need transparency. A photo saved as PNG is often 5× larger than necessary — a very common and expensive mistake.

4. Lazy-load below the fold — but never the hero. Images further down the page should load as the visitor scrolls. The main hero or product image should load immediately: lazy-loading it delays the very element LCP measures, making your score worse. Most modern themes get this right, but page builders and custom sections often don’t.

5. Always set width and height. Images without declared dimensions cause the page to jump as they load, which is CLS — and a shopper tapping a button that just moved is a shopper adding the wrong thing to their cart.

6. Write real alt text. Not a speed factor, but it’s accessibility and SEO value you get for free while you’re in there anyway.

The mistakes that cost the most

• Uploading straight from a camera or phone. Multi-megabyte originals are the single most common cause of a slow store.
• PNG screenshots and photos. Check your heaviest images — there’s usually a PNG that should be a JPEG.
• Huge images behind small display slots, especially in thumbnails and collection grids.
• Hero carousels. Every slide is a full-weight image, and most visitors never see past the first. See Shopify theme speed.
• Decorative images that add nothing. The fastest image is the one you delete.
• Video-as-background on mobile — enormous, and rarely worth it.

A practical audit

1. Test a product page and your homepage with the free page speed tool for a baseline.
2. Find your heaviest images — open the page in your browser’s developer tools (Network tab, filter by images, sort by size). Anything over 500KB is a target.
3. Fix the worst five. Resize, compress, re-upload. This alone often produces a visible improvement.
4. Re-test and confirm the change is real, not just felt.

Start with your best-selling product page and your homepage — the two pages most visitors actually see.

Why it’s worth the hour

Image work is unglamorous, needs no developer, and can’t break your store — unlike removing apps or switching themes. For most stores it’s the fastest path to a measurably faster site, and page speed affects conversions directly, especially on mobile where the majority of store traffic lives.

The bigger picture

Speed is one leak among several. Revyfix adds every leak — speed, conversion gaps, cart abandonment, weak CTAs — into one score and ranks the fixes by payback. See also how to speed up your Shopify store and why is my Shopify store slow.