My Shopify product photos are 500KB+ each - how do I get them under 200KB without losing quality?

Shopify's CDN handles a lot of image delivery automatically, but it won't fix an oversized, poorly compressed source file - here's how to actually hit a 200KB target without visible quality loss.

imagesperformancepage speedwebpcore web vitals

What's going on

"My product photos all look fine, but every one of them is 500KB to 2MB, and page speed tools keep flagging image weight. I've tried just dragging the JPEG quality slider down in Photoshop, but then customers can see compression artifacts on close-up shots. Is there an actual way to get images under 200KB each without them looking noticeably worse?" This is a genuinely common complaint in Shopify merchant forums, usually triggered by a PageSpeed Insights or GTmetrix report calling out image weight, or by an agency or theme audit flagging total page size on the homepage or product page.

The confusion is understandable because Shopify handles some of this automatically at the CDN level, but not all of it - it won't re-compress a bloated master file for you - so merchants often don't know which part is already handled and which part is still on them.

Why it happens

Shopify's image CDN can serve resized variants and, in many cases, more efficient formats automatically when a theme requests images through Liquid's image_url filter, which leads merchants to assume all image optimization is handled for them. It isn't: the CDN resizes and can reformat what you give it, but it does not meaningfully re-compress an oversized or low-quality-setting source image, so a poorly exported original stays heavy at every width Shopify generates from it.

Separately, many merchants upload camera-resolution originals, often several thousand pixels wide, because that's what their camera or stock photo source produced, without realizing the theme never displays anything close to that size - so a large chunk of the weight is unused resolution rather than genuine compression headroom.

5 ways to fix it

1

Compress before you upload, aiming for roughly 75-85% quality

Run your source photos through a compressor (Squoosh, TinyPNG, or your photo editor's export-for-web option) at around 75-85% JPEG or WebP quality before uploading to Shopify. That range typically cuts file size well below the original with no visible quality loss on product photography. Don't upload multi-megabyte camera originals and hope Shopify fixes it later - the CDN resizes dimensions on the fly, but it does not re-compress a bloated source file for you, so an oversized or poorly exported original still produces heavier output than a properly compressed one, even at reduced display widths.

2

Let Shopify's CDN handle format conversion and responsive sizing - don't duplicate that work

You generally don't need to manually convert images to WebP. Shopify's image CDN can serve modern, more efficient formats to browsers that support them, and themes can request resized variants on the fly through Liquid's image_url filter (for example specifying a target width) instead of always serving the full-size master image. If your theme is old or heavily customized and isn't requesting appropriately sized images with a proper srcset, fixing that is usually a bigger win than squeezing more out of compression settings alone.

3

Check actual pixel dimensions, not just the KB number

A large share of images-too-heavy complaints trace back to uploading originals many thousands of pixels wide when no template on the storefront ever displays anything close to that size. Shopify's general guidance for product images is a square image around 2048x2048px, which is large enough for zoom features without being excessive. Resize to the actual maximum size your theme will ever display before upload, and you'll often see a meaningful size reduction from resizing alone, before you even touch compression sliders.

4

Measure Largest Contentful Paint (LCP) with real tools, not file size alone

File size in KB is a proxy, not the goal - what actually matters for speed and Core Web Vitals is LCP, the time it takes the largest visible element (often a hero or featured product image) to render. Check it with Google PageSpeed Insights, Chrome DevTools' Lighthouse panel, or Search Console's Core Web Vitals report, ideally on a throttled mobile connection since that's where oversized images hurt most. If LCP is fine even with images above 200KB, chasing an arbitrary KB target isn't worth degrading visual quality; if LCP is poor, check first whether the LCP image is lazy-loaded (it shouldn't be) or oversized for its display width before assuming compression is the fix.

5

Use a bulk image-compression app if you have hundreds of existing product images to redo

Manually re-exporting and re-uploading images across a catalog of hundreds or thousands of products isn't practical. Several Shopify apps exist specifically to bulk-compress an existing product image library in place, and some can also help with missing alt text or oversized originals. This is worth reaching for only when you have a real backlog of legacy images to clean up in bulk - for new uploads going forward, exporting correctly the first time (the steps above) usually avoids needing an app at all.

Bottom line

Most of the under-200KB problem is solved for free: resize source photos to the dimensions your theme actually displays, export at roughly 75-85% quality, and let Shopify's image CDN handle format conversion and resized delivery through Liquid's image_url filter rather than duplicating that work yourself. Reach for a bulk image-compression app only if you're sitting on a large catalog of legacy oversized images that would take too long to fix by hand one product at a time.

Still Stuck?

Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.