WebP vs AVIF vs JPEG: Real-World File Size Comparison

Image format choices on the web have real performance consequences. A homepage that loads in 1.8 seconds instead of 2.4 seconds has measurably better SEO and conversion rates. Choosing the right image format — and knowing when the "better" format isn't worth the compatibility trade-off — is one of the highest-ROI optimisations available for most sites.

---

The benchmark setup

I tested three types of images to reflect real-world web content:

• Photo: A 1200×800 landscape photo (complex gradient, high detail)
• Product shot: A 800×800 product image on white background (relatively simple)
• Screenshot: A 1280×800 interface screenshot (text-heavy, solid colours)

Quality target: visually indistinguishable from the source at normal viewing distance on a 1080p display. Not mathematically lossless — just perceptually equivalent to a non-expert viewer.

---

The numbers

Photo (1200×800, landscape)

Format	File size	Notes
JPEG q80	187 KB	Baseline
WebP q80	128 KB	32% smaller than JPEG
AVIF q60	89 KB	52% smaller than JPEG

Product shot (800×800, white background)

Format	File size	Notes
JPEG q80	94 KB	Baseline
WebP q80	63 KB	33% smaller than JPEG
AVIF q60	41 KB	56% smaller than JPEG

Screenshot (1280×800, UI with text)

Format	File size	Notes
JPEG q80	156 KB	Noticeable artefacts around text
JPEG q90	241 KB	Better quality, much larger
WebP q80	98 KB	No text artefacts, 37% smaller
AVIF q60	71 KB	Best quality/size, 54% smaller
PNG	312 KB	Lossless — best quality, largest

---

What the numbers mean

WebP is 30–37% smaller than JPEG at equivalent quality across all content types. This is the consistent finding I've seen with my own web projects. You're not gaining back any quality by using JPEG over WebP.

AVIF is 50–56% smaller than JPEG. The gains are real and substantial. On a page with 10 product images averaging 94 KB as JPEG, switching to AVIF saves roughly 530 KB per page load. At 100,000 monthly visitors, that's 53 GB of bandwidth saved — meaningful for hosting costs and user experience on mobile.

The screenshot case is instructive. JPEG at quality 80 produces visible artefacts around text and sharp edges — the DCT block compression pattern becomes visible at boundaries. WebP and AVIF handle high-contrast edges dramatically better. For screenshots, UI documentation, and any image with text on it, WebP is the minimum — AVIF is even better.

---

Browser support reality

WebP: Supported in all major browsers since 2020. Safari added support in Safari 14 (September 2020). Internet Explorer does not support WebP, but its usage is under 0.5% globally.

AVIF: Supported in Chrome 85+ (August 2020), Firefox 93+ (October 2021), Safari 16+ (September 2022). Edge 121+ (January 2024). Overall global support: approximately 93% as of mid-2026. iOS Safari 16 and later support it; older iOS devices (iPhone 7 running iOS 15) do not.

The 7% AVIF gap matters. If 7% of your users can't see AVIF images, you need a fallback. The standard approach is the HTML <picture> element:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" />
</picture>

This serves AVIF to supported browsers, WebP as the fallback, and JPEG as the final fallback. Most modern image CDNs (Cloudinary, Imgix, Vercel Image Optimisation) handle this automatically.

---

The encoding speed trade-off

AVIF's better compression comes with a cost: encoding time. Converting a 100-image product catalogue from JPEG to WebP is fast. Converting to AVIF takes 5–10× longer per image. For server-side on-demand conversion, this can be a bottleneck.

In practice:

• Static sites / pre-built catalogues: AVIF is worth it — convert once at build time
• Dynamic image resizing / on-the-fly: WebP is more practical unless you have a powerful CDN handling encoding

---

Which to use

For new web projects in 2026: WebP as the minimum, with AVIF for the <picture> first source. Most image optimisation frameworks (Next.js <Image>, Astro, Nuxt Image) handle this automatically.

For existing sites doing a format migration: WebP first — it's the safer upgrade with universal browser support and 30% savings. Revisit AVIF in the next project or as a background optimisation.

For email images: JPEG or PNG. Most email clients don't support WebP or AVIF, and the engagement cost of broken images isn't worth the bandwidth savings.

For our image tools: If you're using the Image Resizer or JPG to PNG converter for web images, consider resizing to WebP for best results. The Image Resizer supports WebP output directly and applies efficient compression in one step.

---

FAQ

Is AVIF always better than WebP? For file size at equivalent quality, yes — consistently 20–30% smaller than WebP. But AVIF requires a fallback for older browsers/iOS, takes longer to encode, and isn't supported in all image processing toolchains yet. WebP is often the pragmatic choice.

Should I convert my existing JPEG library to WebP? For a large photo library, the ROI depends on traffic. At 100,000+ page views/month with image-heavy pages, the bandwidth savings justify the conversion time. For a low-traffic personal site, the effort isn't worth it.

Does WebP support transparency? Yes. WebP supports both lossy and lossless modes, and both support transparency (alpha channel). WebP lossless with transparency is typically 20–25% smaller than equivalent PNG.

Can I use AVIF for product images on e-commerce sites? Yes, with a <picture> fallback. Major e-commerce platforms like Shopify and WooCommerce support AVIF. The 7% non-supported browser share means you must have the JPEG fallback in place before serving AVIF.

What's the best format for OG (social media preview) images? JPEG or PNG. Social media platforms (Twitter/X, LinkedIn, Facebook) have inconsistent WebP/AVIF support in their crawlers. Use JPEG at 80+ quality for OG images.