JPEG vs WebP vs AVIF for E-Commerce: Which Format Boosts Sales?
How much does image format affect your Shopify store’s conversion rate? Google’s data says: every 1-second delay in load time drops mobile conversions by 20%. And product images are typically the heaviest part of your store pages — 60-75% of total page size.
So the question isn’t “should I optimize images” — it’s “which format should I optimize to?”
Three Formats, One Comparison Table
I took the same 2400x2400 product photo and exported it in three formats at “visually identical” quality settings:
| Format | File Size | Reduction vs JPEG | Browser Support | Shopify Compatible |
|---|---|---|---|---|
| JPEG (baseline) | 480 KB | — | 100% | Native |
| WebP | 142 KB | -70% | 97% | Native |
| AVIF | 98 KB | -80% | 93% | No direct upload |
Verdict: WebP is the current best choice for e-commerce product images — 30% of JPEG’s size, 97% browser coverage, native Shopify support.
Why Not AVIF?
AVIF does compress better (about 30% smaller than WebP), but has two deal-breaking issues:
- Shopify doesn’t support direct AVIF uploads: While Shopify’s CDN can serve AVIF to supported browsers, you can’t upload AVIF source files
- Slow encoding: AVIF encoding is 5-10x slower than WebP — very noticeable when batch-processing 200+ images
If you run your own store (non-Shopify) with an AVIF-capable CDN, AVIF is worth considering. For 99% of e-commerce sellers, WebP is the answer.
The Awkward Case of PNG
Many product images are PNGs — especially logos, icons, and transparent-background product shots. But PNG is almost always the worst choice for e-commerce:
| Scenario | PNG | WebP |
|---|---|---|
| Standard product photo (no transparency) | 800KB+ | 120KB |
| Transparent-background product | 600KB | 80KB (WebP supports alpha channel) |
| Logo/icon | Fine | Better (60% smaller) |
WebP supports transparency. There’s virtually no reason to use PNG for product images unless the target platform demands it.
Batch Convert Formats with TinyOpt
Got hundreds of product images to convert from JPEG/PNG to WebP?
- Open TinyOpt, ‘Compress’ tab
- Drag in all product photos
- Set output format to WebP
- Optional: set resize dimensions (2048x2048 recommended)
- Click Start, wait a few minutes
Compression + format conversion + size unification in one pass. No intermediate steps.
Real Before/After: A Shopify Store Switching to WebP
| Metric | Before (JPEG) | After (WebP) |
|---|---|---|
| Homepage total size | 4.8 MB | 1.2 MB |
| First screen load time | 6.2 s | 1.8 s |
| PageSpeed mobile score | 42 | 81 |
| Bounce rate | 62% | 48% |
This was a real small fashion store (80 products, ~400 images). No code changes, no theme switch, no CDN changes. The single variable: batch-recompressing every product image to WebP using TinyOpt.
Format Recommendations by Use Case
| Use Case | Format | Why |
|---|---|---|
| Shopify/Etsy product images | WebP | Small size, great platform support |
| Amazon/eBay product images | JPEG | Platform requirement (Amazon: JPEG/PNG/TIFF only) |
| Self-hosted store + modern CDN | WebP or AVIF | CDN auto-negotiates best format per browser |
| Social media previews (Pinterest/Instagram) | JPEG | Maximum compatibility across all platforms |
| Logo/watermark assets | PNG (transparent) | WebP alpha not universally supported in older tools |
Related: 9 Image Format Benchmark: JPEG, PNG, WebP, or AVIF?
TinyOpt Team
The team behind the TinyOpt open-source project, focused on building and optimizing desktop image processing tools. We help designers, front-end developers, and content creators process images in bulk — efficiently and for free.