The four formats at a glance
Each format makes a different trade-off between file size, image quality, and feature support. Here is how they compare for typical product photography use cases.
| Format | Compression | Transparency | Browser Support | Best For |
|---|---|---|---|---|
| JPEG | Lossy | No | Universal | Photos, hero images |
| PNG | Lossless | Yes | Universal | Logos, icons, graphics |
| WebP | Lossy + lossless | Yes | 97%+ | Modern default for everything |
| AVIF | Lossy + lossless | Yes | ~95% | Hero images, large photos |
The short version: WebP is the safe modern default. AVIF saves even more bytes but encoding is slower. JPEG and PNG still have a role as fallbacks and for specific edge cases.
How much smaller are WebP and AVIF, really?
We compressed the same 2000×2000px studio product photo at visually equivalent quality across all four formats. The differences are not subtle.
Compared to JPEG, WebP cuts file size by roughly 25-35% at the same perceived quality. AVIF cuts it by 50% or more. Across a 500-SKU catalog with five images each, that is the difference between shipping 3 GB and 1.4 GB of photo bytes per month.
Visually equivalent quality, not equivalent quality-slider numbers. JPEG q85, WebP q80, and AVIF q60 typically look the same to the human eye.
When to use each format
Pick by image type, not by personal preference.
Product photos on white or natural backgrounds
Use WebP as your primary, with a JPEG fallback for the <3% of users on browsers that do not support it. Almost every CDN and image transformation service (Cloudinary, imgix, Vercel, Shopify, Supabase) will negotiate the right format automatically based on the Accept header.
Hero banners and lifestyle imagery
This is where AVIF earns its keep. The savings are largest on big, photographic images. Encoding is slow, but you only do it once.
Logos, badges, and UI graphics
Use PNG or SVG. Lossy compression destroys the crisp edges of logos. PNG is small enough for these because they have few colors.
Cutouts and ghost mannequin shots that need transparency
Use WebP. It supports transparency at a fraction of PNG’s file size — typically 60-80% smaller for the same alpha-channel image.
The old default (PNG everywhere)
- Bloated catalog, 5-10x larger than needed
- Slow Largest Contentful Paint on mobile
- Higher CDN bandwidth costs
- Hurts Core Web Vitals and SEO
The 2026 default (WebP + AVIF)
- Smaller catalog, faster pages
- Same visual quality as JPEG/PNG
- Auto-negotiated by your CDN
- Better Core Web Vitals scores
Browser support and fallbacks in 2026
Format support is no longer a real obstacle. Both WebP and AVIF are supported in every major modern browser.
The cleanest way to ship modern formats with fallbacks is the <picture> element:
<picture><source srcset="hero.avif" type="image/avif"><source srcset="hero.webp" type="image/webp"><img src="hero.jpg" alt="Product"></picture>
Or skip the markup entirely and let your image CDN do format negotiation. Shopify, Next.js Image, Vercel, Cloudinary, imgix, and Supabase Storage transformations all handle this automatically — you upload one source file and they serve the optimal format per browser.
Quality settings that actually matter
Quality sliders are not linear and they are not comparable across formats. Here are the settings that match what most e-commerce stores need.
| Use Case | JPEG | WebP | AVIF |
|---|---|---|---|
| Catalog thumbnails (under 400px) | 75 | 70 | 50 |
| Product detail page | 85 | 80 | 60 |
| Zoom / high-res | 92 | 88 | 75 |
| Hero banner | 85 | 80 | 60 |
Re-compressing an image multiple times at lossy settings (JPEG → WebP → JPEG) compounds artifacts. Always compress from the original PNG or TIFF source, never from a previously compressed file.
Format choice and SEO
Google has officially used Core Web Vitals — and Largest Contentful Paint in particular — as a ranking signal since 2021. The hero image on a product page is almost always the LCP element. Shaving 600 KB off it by switching from JPEG to AVIF can move a slow page into the “Good” threshold and lift rankings on competitive product queries.
Image format also affects Google Image Search. Both WebP and AVIF are crawled and indexed normally, but their smaller file sizes mean Google can fetch and render thumbnails faster, which improves how often your images get surfaced in shopping carousels.
If your store still serves PNGs for product photos by default, switching to WebP is one of the highest-leverage SEO changes you can make this quarter — it costs you nothing and lifts every product page at once.