My product images were 6-8MB each. High resolution, minimal compression, maximum quality. They looked incredible when you zoomed in.
They also took 8 seconds to load on mobile. And 53% of mobile users abandon a page that takes more than 3 seconds to load.
I was losing more than half my mobile visitors before they even saw my products. All because I was uploading images that were 10x larger than they needed to be.
The Problem
Image file size is determined by three factors:
- Resolution (pixel dimensions)
- Compression level (JPEG quality percentage)
- Color depth and format (JPEG vs PNG vs WebP)
My images were 2500×2500 pixels at 100% JPEG quality. Each one was 6-8MB. For a product page with 7 images, that's 42-56MB of images alone.
On a fast WiFi connection, this loads in 2-3 seconds. On a mobile connection (which is how 70%+ of my customers browse), it takes 6-10 seconds.
The Compression Sweet Spot
I tested different compression levels on the same image and compared file size vs visual quality:
| JPEG Quality | File Size | Visual Difference from 100% |
|---|---|---|
| 100% | 7.2MB | Reference |
| 95% | 3.1MB | Imperceptible |
| 90% | 1.8MB | Imperceptible |
| 85% | 1.2MB | Barely perceptible at 200% zoom |
| 80% | 0.9MB | Slightly softer at 200% zoom |
| 70% | 0.6MB | Noticeable softness at 100% |
| 50% | 0.3MB | Visible artifacts |
The sweet spot: 85% quality. At 85%, the file is 83% smaller than 100% quality, and the visual difference is only detectable when zooming to 200% — which most customers never do.
Going from 100% to 85% reduced my page weight from 50MB to 8.4MB. Page load time went from 8 seconds to 2.1 seconds on mobile.
Format Comparison
| Format | File Size (same image) | Browser Support | Best For |
|---|---|---|---|
| JPEG 85% | 1.2MB | Universal | Product photos (opaque backgrounds) |
| PNG | 4.8MB | Universal | Transparent backgrounds, graphics |
| WebP 85% | 0.8MB | 97%+ browsers | Everything (if supported) |
| AVIF 80% | 0.5MB | 92% browsers | Future-proof, best compression |
My recommendation: Export as JPEG at 85% for maximum compatibility. If your platform supports WebP (Shopify does automatically), even better — 33% smaller than JPEG at the same quality.
When to use PNG: Only when you need transparency (transparent background images). PNG files are 3-4x larger than JPEG for photos. Never use PNG for product photos on white backgrounds — use JPEG.
Resolution: How Much Is Enough?
| Use Case | Recommended Resolution | Why |
|---|---|---|
| Amazon main image | 2500×2500 | Enables zoom, future-proof |
| Shopify product page | 2048×2048 | Shopify's recommended max |
| Thumbnails/collection pages | Served automatically | Platform generates from source |
| Social media | 1080×1080 | Platform standard |
| Email marketing | 600×600 | Email client limitations |
Don't upload 4000×4000 images. The extra resolution provides zero benefit (no platform displays images that large) and doubles the file size.
Don't upload below 1600×1600. This is the minimum for zoom functionality on most platforms. Without zoom, your conversion rate drops 15-25%.
The Optimization Workflow
- Shoot at maximum resolution (your camera's highest setting)
- Process through pic1.ai (background removal, centering, platform sizing)
- Export at the right resolution (2500×2500 for Amazon, 2048×2048 for Shopify)
- Compress to 85% JPEG quality (most tools have this setting in export options)
- Verify file size (should be 0.8-1.5MB per image for 2500×2500)
The Impact
| Metric | Before (100% quality) | After (85% quality) |
|---|---|---|
| Avg image size | 7.2MB | 1.2MB |
| Page weight (7 images) | 50MB | 8.4MB |
| Mobile load time | 8.0s | 2.1s |
| Mobile bounce rate | 53% | 38% |
| PageSpeed score | 31 | 72 |
The bounce rate improvement alone was worth the change. 15% fewer bounces = 15% more potential customers seeing my products.
And the visual quality? I showed the 100% and 85% versions side-by-side to 10 people. None of them could tell the difference at normal viewing size. Only 2 could tell at 200% zoom.
For the complete page speed optimization, check out how I fixed my PageSpeed score of 23. And for the mobile-specific considerations, here's the mobile optimization guide.