Speeding Up a Shopify Store: Start with the Images

When someone tells me their Shopify store feels slow, I don't start with apps or themes — I open the network tab, and nine times out of ten the answer is sitting right there: megabytes of product images. The good news is that this is the most fixable performance problem a store can have, and you don't need a developer for most of it.

Do the math on your collection page

A collection page showing 50 products at 2 MB per image asks a phone shopper to download 100 MB to browse. Get those images to 150 KB each — completely achievable with proper resizing and compression — and the same page weighs 7.5 MB. That's the difference between a store that feels instant on 4G and one that gets abandoned.

And abandonment is measurable: Google's research puts 53% of mobile users bailing on pages that take over 3 seconds, with conversion dropping roughly 7% per extra second. On mobile-heavy e-commerce traffic — which is now most of it — image weight is money.

What Shopify already does for you — and where it stops

Shopify's CDN is genuinely good: it generates multiple sizes of every upload, serves WebP to browsers that accept it, and distributes files globally. This leads store owners to assume image optimization is handled. It's half-handled. Here's what the CDN does not fix:

• Garbage in, garbage out: the CDN derives everything from your upload. A blurry, over-large, badly-lit original produces blurry derivatives.
• Theme behavior: plenty of themes request larger variants than they display, or skip srcset entirely. The CDN can only serve what the theme asks for.
• Your admin experience: Shopify stores your original files. Upload 15 MB camera files for a 500-product catalog and bulk operations, exports, and the admin panel itself all get slower.
• Upload limits: 20 MB hard cap, and big files fail more often on unstable connections.

The workflow: five steps before every upload

1. Export as JPEG for photos. PNG is for logos and graphics with transparency — as a product photo format it's 5–10× the size for nothing. (Choosing formats is a topic of its own; here's my full breakdown.)
2. Resize to 2048×2048 for product shots. That's Shopify's recommended size — big enough for zoom, small enough to be sane. Camera originals at 4000px+ are wasted pixels.
3. Compress at quality 80–85. This is where the 60–80% savings live. Run the whole batch through a bulk compressor with one consistent setting so the catalog looks uniform.
4. Strip EXIF metadata. Saves 10–50 KB per file and removes GPS data you probably didn't mean to publish. Good compressors do this automatically.
5. Keep your originals in a separate folder. You'll want them the day you rebrand, print, or need to re-export at different settings.

Then check these three theme settings

Individual images fixed, spend ten minutes in your theme editor:

• Lazy loading: any Online Store 2.0 theme should lazy-load below-the-fold images. Verify it — and verify your hero image is excluded, because lazy-loading the first thing on screen actively slows the page down.
• Responsive images: view a product page's source and check for srcset attributes. If your theme doesn't emit them, phones are downloading desktop sizes; consider a theme update before any other performance spend.
• Products per collection page: 20–30 is the sweet spot. A 100-product page will be slow no matter how small each image is.

How to measure whether it worked

Run PageSpeed Insights on your home page and a product page before you start, and again after. The number to watch is Largest Contentful Paint (LCP) — on a storefront it's nearly always the hero or main product image, so it responds directly to this work. Under 2.5 seconds is the goal. Also glance at Cumulative Layout Shift: if the page jumps around while images load, your theme isn't reserving image dimensions, which is a theme bug worth reporting.

Don't expect a perfect score — Shopify stores carry app scripts you can't remove, and that's fine. What you're after is the LCP drop and the total page weight cut, both of which show up immediately when the images shrink.

One more reason I compress in the browser

Product photos for unreleased launches are commercially sensitive. Every "free online compressor" that uploads your files to a server is a place those photos now exist. InstaShrink runs entirely in your browser — files never leave your machine — which is exactly the property you want when the images are a product nobody's supposed to see yet.