Image Formats Compared: WebP vs AVIF vs JPEG in 2026

Images make up nearly half the weight of a typical web page. That’s a lot of bytes, and the format you pick determines how many of them you’re wasting.

The good news? In 2026, the format landscape has settled down. WebP is the default. AVIF is gaining ground fast. JPEG is the universal fallback. The question isn’t which one is “best” anymore. It’s which one to serve to which browser.

Where Things Stand Today

The web has moved well beyond the old JPEG-or-PNG choice. Most production sites now serve multiple formats through content negotiation, letting the browser pick the best option automatically.

47%

Page Weight

Average from images

25–50%

Savings

Modern formats vs JPEG

97%+

WebP Support

Global browsers

2.5s

LCP Impact

Google's "Good" threshold

Format Deep Dive

Use the tabs below to explore each format’s strengths, limitations, and ideal use cases:

JPEG

WebP

AVIF

WebP

25–35% smaller

Introduced

2010

Compression

Lossy & Lossless

Transparency

Yes

Browser Support

97%+

✓Advantages

• +Excellent compression
• +Supports transparency & animation
• +Wide browser support

✕Limitations

• –Slightly slower encoding
• –Not ideal for print workflows
• –Limited editing tool support

When Should You Use Each Format?

There’s no single “best” format. It depends on your content and audience.

Use AVIF when:

• Photographic content is your primary media (product photos, hero images, editorial photography)
• You need the smallest possible file sizes and can accept slightly slower encoding
• Your audience is on modern browsers (Chrome, Firefox, Safari 16+)

Use WebP when:

• You need the best balance of compression, speed, and compatibility
• Your content includes transparency (product cutouts, logos with alpha)
• You need a single format that works almost everywhere

Use JPEG when:

• You need a universal fallback for older browsers and email clients
• You’re working with print workflows that don’t support modern formats
• File size is less critical than maximum compatibility

💡

The CDN approach

Instead of choosing one format, let your CDN handle format negotiation automatically. Sirv detects each visitor’s browser capabilities and serves the optimal format (AVIF where supported, WebP as a fallback, and JPEG as the baseline) from a single source image.

Real-World Performance Impact

How much difference does format choice actually make? Here’s what the data shows for typical e-commerce product pages.

Measured with quality=80, typical product photography

Simulated on 4G connection, 800px image width

Metric	JPEG Only	WebP	AVIF	Improvement
LCP	3.2s	2.4s	2.1s	34% faster
Page Weight	2.8 MB	1.9 MB	1.4 MB	50% lighter
Time to Interactive	4.1s	3.5s	3.2s	22% faster

Note: CLS (Cumulative Layout Shift) is not affected by image format. CLS depends on whether your <img> tags include width and height attributes, and that’s the same regardless of JPEG, WebP, or AVIF.

✅

Pro tip

Always set explicit width and height attributes on your images (or use CSS aspect-ratio) to prevent layout shifts. This eliminates CLS issues regardless of format choice.

Implementation with Sirv

Sirv makes multi-format serving dead simple. Upload your original image once, and Sirv handles the rest:

<!-- Single URL, automatic format negotiation -->
<img
  src="https://demo.sirv.com/product.jpg?w=800&q=85"
  alt="Product photo"
  width="800"
  height="600"
  loading="lazy"
/>

The same URL serves AVIF to Chrome 100+, WebP to Safari 14+, and optimized JPEG to everything else. No <picture> element needed, no build-step complexity, no multiple source files.

Key Sirv Features for Image Optimization

⚡

Zero Config

Automatic Format Conversion

Sirv detects each visitor's browser and serves the optimal format — WebP, AVIF, or JPEG — with zero code changes on your end.

📐

Dynamic

Real-Time Resizing

Resize any image on-the-fly via URL parameters. Request ?w=400 and get a perfectly sized thumbnail, cached at the edge for instant delivery.

🌐

Performance

Global CDN

Images served from 20+ PoPs worldwide with sub-50ms latency. Your users get fast images regardless of where they are.

🎯

AI-Powered

Smart Cropping

AI-powered face and object detection ensures the subject is always in frame, even when cropping to different aspect ratios.

Responsive Images + Modern Formats

For the best results, combine format negotiation with responsive images. With Sirv, you still use standard srcset. The format conversion happens server-side:

<img
  src="https://demo.sirv.com/hero.jpg?w=800"
  srcset="
    https://demo.sirv.com/hero.jpg?w=400 400w,
    https://demo.sirv.com/hero.jpg?w=800 800w,
    https://demo.sirv.com/hero.jpg?w=1200 1200w,
    https://demo.sirv.com/hero.jpg?w=1600 1600w
  "
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="Hero image"
  width="1600"
  height="900"
/>

Each size variant automatically gets format-negotiated. A visitor on Chrome mobile gets a 400px AVIF, while the same visitor on desktop Safari gets an 800px WebP.

⚠️

Don't forget the LCP image

Your above-the-fold hero image should never be lazy-loaded. Add fetchpriority="high" and omit the loading="lazy" attribute for the image that drives your Largest Contentful Paint score.

Quality Settings Matter More Than You Think

Format choice is only half the equation. Quality settings have a massive impact on file size.

File size grows exponentially above q=80, with diminishing returns for all formats

• JPEG: q=80 is the sweet spot for most content. Diminishing returns above 85.
• WebP: q=80 produces visually identical results to JPEG at q=90.
• AVIF: q=60-70 matches JPEG at q=85 with dramatically smaller files.

With Sirv, set quality via URL parameter (?q=80) or configure account-wide defaults. Sirv’s adaptive quality engine can also pick the optimal quality level per-image, maintaining visual fidelity while minimizing bytes.

What to Do Next

Here’s the short version:

1. Serve AVIF where possible. It offers the best compression for photographic content.
2. Use WebP as your primary fallback. Near-universal support with excellent compression.
3. Keep JPEG for edge cases like email, print, and legacy browser requirements.
4. Automate format selection with a CDN like Sirv instead of managing formats manually.
5. Combine with responsive images for the maximum performance gains.
6. Monitor Core Web Vitals, especially LCP and page weight, to measure real impact.

The era of manually converting and managing multiple image formats is over. Modern CDNs handle the complexity. Pick one and focus on creating great visual content instead.