Image Format Comparison at a Glance
Before diving into the details, here's a side-by-side comparison of the three formats across the metrics that matter for e-commerce.
| Feature | JPEG | PNG | WebP |
|---|---|---|---|
| File Size (typical product photo) | 200-400 KB | 800 KB - 3 MB | 120-250 KB |
| Transparency Support | No | Yes | Yes |
| Animation Support | No | No (APNG is rare) | Yes |
| Lossy Compression | Yes | No | Yes |
| Lossless Compression | No | Yes | Yes |
| Browser Support (2024) | 100% | 100% | 97%+ |
| Best For | Photos, gradients | Logos, icons, transparency | Almost everything |
The short answer: WebP is the best general-purpose format for e-commerce in 2024. It offers 25-35% smaller files than JPEG at equivalent quality and supports transparency that PNG provides, but at a fraction of the file size. The only reason to use JPEG or PNG today is for the 3% of browsers that don't support WebP.
JPEG: The Legacy Workhorse
JPEG has been the default image format for product photography since the early days of e-commerce. It handles photographic content well, compressing continuous-tone images efficiently through lossy compression.
When to still use JPEG:
- As a fallback for browsers that don't support WebP (under 3% of traffic)
- When your CMS or platform doesn't support WebP uploads
- For email marketing images, where WebP support is inconsistent
- As your archival source file before converting to WebP
JPEG quality settings for e-commerce:
- Quality 85-90: Hero product images where detail matters
- Quality 75-80: Category thumbnails and listing images
- Quality 60-70: Background images and decorative elements
JPEG compression artifacts are most visible in areas with sharp edges and solid colors (text overlays, graphics, logos). If your product images contain overlaid text or graphic elements, either use PNG/WebP for those specific images or increase JPEG quality to 90+.
PNG: When You Need Transparency or Pixel-Perfect Graphics
PNG is the format of choice when you need transparency (alpha channel) or when you're dealing with graphics rather than photographs. However, it's also the format most commonly misused in e-commerce, leading to unnecessarily large page weights.
The core issue: PNG uses lossless compression, meaning it preserves every pixel exactly. For photographs, this produces files 3-5x larger than JPEG with no visible quality improvement. The human eye can't distinguish between a lossless and a quality-85 lossy version of a product photograph.
Legitimate PNG use cases in e-commerce:
- Product images on transparent backgrounds for theme compositing
- Store logos and icons
- Size charts and technical diagrams with text
- Trust badges and payment icons
WebP: The Modern Standard for E-Commerce Images
WebP, developed by Google, combines the best attributes of JPEG and PNG into a single format. It supports both lossy and lossless compression, transparency, and even animation. For e-commerce, it's the optimal format for almost every use case.
The file size savings compound dramatically across a product catalog. A store with 1,000 product images averaging 300 KB each in JPEG would total 300 MB of image data. Converting to WebP at equivalent quality reduces that to approximately 195-210 MB, a saving of 90-105 MB. For page load times, that translates to faster Time to Interactive and better Core Web Vitals scores.
Most major e-commerce platforms now handle WebP automatically. Shopify's CDN converts to WebP server-side. WooCommerce supports WebP through plugins. BigCommerce added native WebP support in 2023. If your platform doesn't support automatic conversion, tools like Squoosh, ImageOptim, or batch processors can convert your catalog.
AVIF: The Next Generation Format
AVIF is worth mentioning as the format gaining momentum behind WebP. Based on the AV1 video codec, AVIF produces files 20% smaller than WebP at equivalent quality. However, browser support sits at roughly 92% (no Internet Explorer, limited Safari support on older versions), and encoding is significantly slower.
| Format | Relative File Size | Browser Support | Encoding Speed | E-Commerce Readiness |
|---|---|---|---|---|
| JPEG | Baseline (1x) | 100% | Fast | Mature |
| WebP | 0.65-0.75x | 97% | Fast | Ready |
| AVIF | 0.50-0.60x | 92% | Slow | Emerging |
For now, the recommended approach for e-commerce is: serve WebP as your primary format with JPEG as a fallback. Monitor AVIF browser support and encoding tool maturity. Once your platform's CDN handles AVIF automatically (Shopify and Cloudflare already do), you'll get the benefit without any workflow changes.
Implementing the Right Format Strategy
Here's a practical decision tree for choosing the right image format for each element on your e-commerce site:
- Product photographs (hero, gallery, thumbnails): WebP lossy at quality 80. Fallback to JPEG quality 82.
- Product images needing transparency: WebP lossy with alpha channel. Fallback to PNG-24.
- Logos, icons, and simple graphics: SVG where possible. Otherwise WebP lossless, with PNG-8 fallback.
- Banner images and promotional graphics: WebP lossy at quality 75. Fallback to JPEG quality 78.
- Email marketing images: JPEG quality 80. WebP support in email clients is still unreliable.
When using AI-generated product images from platforms like Retouchable, request output in WebP format directly. This avoids a generation-to-JPEG-to-WebP conversion chain that can introduce compounding quality loss. One conversion step always beats two.
Implementing format fallbacks is straightforward with the HTML <picture> element, which lets you specify WebP as the preferred source with JPEG or PNG as the fallback. Most modern e-commerce platforms handle this server-side through CDN-based content negotiation, so the browser automatically receives the best format it supports.