Compress Product Images for Ecommerce Without Making Them Look Like Garbage
I spent two years obsessing over image quality on a store that got maybe 40 visitors a day. Forty. I'd zoom into JPEG artifacts at 400% like I was restoring a Renaissance painting.
Meanwhile the actual problem was that every product photo weighed 4MB and my pages loaded slower than a DMV queue. (BTW, our design toolkit saves you the trouble.)
So yeah. This is the article I wish someone had shoved in my face back then. (BTW, our online file converter saves you the trouble.)
Quick Verdict
If you just want images smaller right now: run them through Squoosh or TinyPNG and stop reading. If you've already compressed and they look mushy, upscale them first at toolsail.com/upscaler then compress. Best format for product shots in 2024 is WebP, but keep a JPEG fallback unless you enjoy angry customer emails.
The real answer is boring: compress to under 200KB per image, keep dimensions around 1500px on the long side, and stop trying to make one file do every job. Your hero image and your thumbnail shouldn't be the same file.
That's it. That's the whole game.
I wasted months trying to find a magic setting that would give me both. There isn't one. Resize specifically for where the image lives and everything gets easier.
Pros & Cons
โ Pros
- Faster load times actually move conversion rate โ I saw a 12% bump just from going 3MB to 180KB average
- Google uses page speed as a ranking signal, and image weight is usually the biggest lever
- Smaller files mean cheaper CDN bills and less bandwidth if you're on a metered host
- Compressed images are easier to batch process, so uploading 50 products doesn't take an afternoon
โ Cons
- Over-compression kills detail on textured products โ fabric, wood grain, jewelry all suffer first
- You can't just run everything through the same preset; a flat t-shirt and a gemstone need different treatment
- Re-compressing an already-compressed JPEG is a one-way trip to mush city
Step-by-Step
- Start with the biggest, cleanest source you have: Pull the original from your phone or camera, not the version already sitting on your site. The pitfall here is grabbing the wrong file โ I've re-compressed compressed files more times than I want to admit. Check the file size first. If it's under 500KB for a full product shot, it's probably already been through the wringer.
- Resize before you compress: Set the long edge to whatever your template actually needs. Most Shopify and WooCommerce themes render product images around 1200-1500px, so uploading 4000px is just wasted bytes. Common pitfall: resizing after compressing. Do it the other way around or you're compressing noise.
- Convert to WebP and compare side by side: WebP typically gives you 25-35% smaller files than JPEG at the same visual quality. Upload both versions and do an actual A/B glance at 100% zoom. If you can't tell the difference, ship it. If you can, back off the quality slider one notch.
Pro tip: If you've already compressed too hard and the image looks soft, upscale it before re-compressing. Sounds backwards but it works โ a 2x upscale followed by a light sharpen recovers a surprising amount of detail. Toolsail's upscaler handles this without needing Photoshop or a credit card.
The thing nobody tells you: batch processing saves real time, but it produces worse results. If you have 20 products, fine, use a batch tool. If you have 3 hero images that drive most of your traffic, treat them individually. I know that's annoying. Do it anyway.
FAQ
Q: What's the ideal file size for ecommerce product images?
A: Aim for 100-200KB for main product photos and under 100KB for thumbnails. Under 50KB usually means you've destroyed something. Above 500KB and you're punishing mobile users for no reason.
Q: Does compressing images actually help SEO?
A: Yes, but indirectly. Google cares about page speed and Core Web Vitals, and image weight is usually the single biggest factor. I use TinyPNG for quick jobs and Squoosh when I need to eyeball the quality tradeoff in real time.
Q: Can I just use PNG for everything and call it a day?
A: Only if you hate your hosting bill. PNGs are often 3-5x larger than an equivalent JPEG for photos. Use PNG only for images with transparency or flat graphics like logos. Product photos should almost always be JPEG or WebP.
Q: What if my images already look bad and I don't have the originals?
A: Upscale them first โ it won't be perfect but it beats re-uploading mush. Try the free upscaler here and see if it's good enough for your thumbnails at least.
Q: How often should I re-compress product images?
A: Basically never, unless your theme changes and demands different dimensions. Pick good settings once, upload correctly sized files, and leave them alone. Re-compressing is like reheating leftovers โ it's never better the second time.