Image Compression for E-Commerce: Faster Stores Sell More

Why Image Weight Is a Conversion Problem

On a product page, the images are the product. A shopper can't pick the item up, so the photos do all the convincing — which means stores tend to load a lot of them: a hero shot, four or five angles, a zoom view, lifestyle photos, and a wall of related-product thumbnails. Each one is a file the browser has to download before the page feels ready.

The cost shows up in two places. The first is bounce rate: shoppers leave pages that feel slow, and on mobile connections a few oversized photos can push a page well past the point where people wait. The second is search ranking. Google uses page speed as a ranking signal through Core Web Vitals, and the single biggest culprit behind a poor Largest Contentful Paint score is almost always a heavy hero image. A slow product page gets seen by fewer people and converts fewer of the people who do see it.

The fix is not "use fewer photos." Shoppers want the photos. The fix is making each photo as light as it can be while still looking sharp.

How Big Should Product Images Actually Be?

The most common mistake is uploading the file straight off the camera. A modern phone or DSLR produces images that are 4000 pixels wide or more and several megabytes each. No storefront displays an image at that size — the theme scales it down in the browser, so you've paid the full download cost to show a fraction of the detail.

A practical rule: figure out the largest size the image is ever displayed at, then export at roughly twice that width to stay crisp on high-resolution screens. For most stores that works out to:

• Main product images: 1200–2000 px on the longest side. This covers the zoom view on almost every theme.
• Gallery thumbnails: 400–600 px wide.
• Collection and category grids: 600–800 px wide.
• Full-width lifestyle banners: up to 2000 px, but these benefit most from aggressive compression because they're decorative, not detail-critical.

Resize first, then compress. Shrinking a 4000 px image to 1600 px removes most of the weight before the encoder even starts.

Per-Platform Notes

Shopify automatically generates resized versions of whatever you upload and serves WebP to browsers that support it. That's helpful, but it doesn't excuse uploading a 6 MB original — Shopify's own guidance is to keep files under about 20 MB, which is far larger than you ever want. Compress and resize before upload so the source Shopify works from is already lean, and your zoom view stays sharp without a giant download.

WooCommerce runs on WordPress, which does generate thumbnail sizes but serves your original full-size image in the lightbox and zoom. WordPress does not compress aggressively on its own. Compressing before upload — or pairing it with an optimization plugin — makes the biggest difference here. Recommended product image width is around 800–1000 px for the main display, with a larger 1500–2000 px version only if you use zoom.

Etsy accepts images up to 3000 px on the longest side and recommends at least 2000 px so the zoom feature looks good. Etsy re-compresses what you upload, so there's no point sending a 5 MB file — export a well-compressed JPEG or WebP around 2000 px and you keep control over how the final image looks rather than leaving it entirely to Etsy's encoder.

Which Format for Product Photos?

Product photography is photographic content with smooth gradients and millions of colors, which is exactly what lossy compression handles well. That points to JPEG (via MozJPEG) or WebP, not PNG. A product photo saved as PNG can be five to ten times larger than the same photo as a quality-80 JPEG, with no visible benefit.

Use WebP as your primary format if your platform serves it — Shopify does this automatically, and most modern themes support it. Use MozJPEG when you need a single file that works everywhere, including older systems or when you're sending a catalog to a partner. The one place PNG earns its keep is flat graphics: size charts, logos, badges, and diagrams with sharp text. For the full breakdown, see JPEG vs PNG vs WebP.

A Worked Example: One Product, Twelve Photos

Take a typical apparel listing: one hero shot, five alternate angles, and six thumbnails, all coming off a camera at 4000×4000 and roughly 4 MB each. Uploaded as-is, that's about 48 MB the browser has to deal with for one page.

Now process the same set properly:

• Hero image: resized to 1600 px, MozJPEG quality 82 → about 240 KB. As WebP → about 170 KB.
• Five alternate angles: resized to 1600 px, WebP quality 80 → about 160 KB each, roughly 800 KB total.
• Six thumbnails: resized to 500 px, WebP quality 78 → about 35 KB each, roughly 210 KB total.

The page drops from 48 MB to under 1.2 MB — a 97% reduction — and a shopper would struggle to tell the difference between the compressed hero and the original. That's the gap between a page that loads instantly and one that makes people wait.

Common Misunderstandings

• "More compression always means worse photos." Below a certain quality, yes. But the range from quality 75 to 85 is nearly invisible on photographic content while cutting file size dramatically. The damage from over-compression is real but lives below quality 60, not at 80.
• "The platform handles optimization, so I don't need to." Platforms resize and sometimes convert format, but they start from whatever you give them. A bloated original limits how good the result can be, and platforms rarely compress as efficiently as a dedicated encoder.
• "PNG looks sharper, so I'll use it for products." PNG is lossless, which only helps for flat graphics and text. On a photograph it preserves invisible detail at enormous file-size cost. Reserve PNG for size charts and logos.

Frequently Asked Questions

Q: Will compressing my product images hurt SEO?

The opposite. Faster pages rank better, and image weight is the most common cause of a poor Largest Contentful Paint score. Compressing images is one of the highest-leverage things you can do for both speed and ranking. Just keep descriptive filenames and alt text so the images stay searchable.

Q: Should I compress before uploading, or rely on a plugin?

Compressing before upload gives you the most control over how the final image looks, because you can preview the result. Plugins are convenient for stores with hundreds of existing images. Doing both is fine — a pre-compressed image simply gives the plugin less to do. If you're on Shopify, the compressor for Shopify product images walks through the right sizes.

Q: What quality setting should I use for a store?

Start at quality 80 for main images and 78 for thumbnails, then check the result on the worst-case product — usually something with smooth gradients or subtle texture. If it holds up there, it holds up everywhere. See how image compression works for why that range is the sweet spot.

Q: How do I keep transparency for a product on a white background?

If the background is pure white, a JPEG is fine and far smaller. If you genuinely need transparency — a product floating over a colored section — use WebP, which supports transparency at a fraction of PNG's size.