Product photos are usually the heaviest images on an e-commerce site, and often the most numerous, with multiple angles per product multiplied across a full catalog. Getting the format and settings right here has an outsized effect on page speed. A typical e-commerce site might have 500–5,000 products, each with 3–8 photos. That’s anywhere from 1,500 to 40,000 images. Optimizing each one properly can mean the difference between a site that loads in 2 seconds and one that takes 6.
Why Image Optimization Matters for E-commerce
According to research from Portent, a one-second delay in page load time can reduce conversions by 7%. For e-commerce, where customers rely heavily on product visuals, unoptimized images are a direct hit to revenue. A typical uncompressed product photo from a modern camera is 3–6 MB. Even after basic resizing to web dimensions (1200×1200 pixels), you’re often looking at 800 KB–2 MB per image in JPG format.
For a store with 1,000 products and 4 photos each, that’s 3.2–8 GB of image data before optimization. Proper format and compression settings can reduce that to 800 MB–2 GB—a 60–75% reduction—with zero visible quality loss to customers.
Format: WebP in Lossy Mode
Product photos are photographs, so lossy WebP is the right mode. It delivers the biggest file size reduction over the original JPG, typically 25–34% smaller with no visible quality loss when settings are correct.
Real-world example
- Original JPG photo (1200×1200px): 520 KB
- Lossy WebP (quality 82): 385 KB
- File size reduction: 26%
Across 4,000 product photos, that’s a savings of 540 MB—enough to meaningfully improve page load times, especially for customers on mobile or slower connections. WebP also has better compression for high-detail product photos compared to JPG, so you get smaller files and equal or better visual quality.
Quality Setting: Finding the Right Balance
This is where most people either over-compress (making photos look bad) or under-compress (leaving file sizes too large).
Full-size product photos: 80–85% quality
This is your baseline for the main product image customers will click to view in detail. At 80% quality in WebP, the image is visually identical to 100% quality to the human eye, but the file size is 30–40% smaller. Test this on your own products—zoom in on details like fabric texture, buttons, or metal finishes. Most people won’t detect any quality loss.
Thumbnail and gallery preview versions: 70–75% quality
If you display product photos at 300×300 pixels or smaller in category grids, gallery previews, or search results, you can safely drop to 70–75% quality. These images are never viewed at full size, so the compression artifacts are invisible. A thumbnail at 70% quality might be 25 KB instead of 45 KB—small individually, but significant in aggregate across thousands of images.
Setting consistency
Use the same quality percentage across your entire catalog. Inconsistent compression makes some products look crisper than others when browsing a category page, which looks unprofessional and can hurt trust.
The Transparent Background Exception
If your product photos use a transparent or removed background—common for marketplace listings like Amazon, eBay, or Shopify apps—you must use lossless WebP for those specific images to preserve the transparency. Lossy compression destroys alpha channels.
This is normal: your catalog will contain both lossy WebP product photos (with backgrounds) and lossless WebP cutouts (transparent backgrounds). They coexist perfectly fine. Simply flag your transparent-background images in your asset management system and process them separately.
Bulk Processing Your Catalog
Processing thousands of images one at a time is impractical. Here’s a realistic workflow:
- Convert your full catalog in batches. Use bulk conversion tools rather than one product at a time. Aim to process 100–500 images per batch to avoid timeouts or system strain.
- Maintain consistent quality settings. Define a standard—e.g., “all full-size product photos at 82% quality, all thumbnails at 73%”—and apply it uniformly across the catalog. This ensures products look cohesive when displayed together.
- Audit file sizes after conversion. Bulk processing is the moment to catch oversized source images that were never properly resized before upload. If a product photo is still 1.2 MB after WebP compression at 80% quality, the source image was likely 4000×4000 pixels when it should be 1200×1200.
- Test on real browsers and devices. After processing a batch, spot-check 5–10 images on mobile (Chrome, Safari) and desktop to confirm quality looks acceptable. This catches compression issues before your entire catalog is converted.
- Plan for updates. As you add new products, apply the same settings immediately. Don’t accumulate unoptimized images for a later bulk run.
Summary
Use lossy WebP at 80–85% quality for full-size product photos and 70–75% for thumbnails. Use lossless WebP only for transparent-background images. Process your catalog in bulk, maintain consistency, and audit results. This approach typically cuts image file sizes by 60–75% while maintaining the visual quality customers expect.