WebP vs AVIF vs JPEG: Which Image Format Should You Use in 2026?

Images are the heaviest part of most web pages. Switching from JPEG to a modern format can cut image bytes by 30 to 50 percent with no visible quality loss, which directly improves Core Web Vitals, mobile data usage and hosting bills. But picking between WebP and AVIF is not obvious, and there are real trade-offs around encoding speed and tooling. This guide compares all three formats against the metrics that actually matter in production, and shows how to serve the right format with a single <picture> element.

The Three Formats at a Glance

JPEG was standardized in 1992 and is still the most widely supported image format on the planet. It uses discrete cosine transform compression, which works extremely well for photographic content but creates visible blocky artifacts and ringing around high-contrast edges at aggressive compression levels. JPEG has no alpha channel and no animation.

WebP was released by Google in 2010 and uses the same VP8 intra-frame coding as the WebM video codec. It supports both lossy and lossless compression, full alpha transparency, and animation. In practical terms WebP produces files about 25 to 35 percent smaller than a JPEG of equivalent visual quality.

AVIF is the newest of the three. It is based on the AV1 video codec and was first supported in Chrome 85 (2020). AVIF typically delivers files 40 to 55 percent smaller than JPEG and 15 to 25 percent smaller than WebP at the same quality. The catch is that encoding is significantly slower, which matters when you are processing thousands of images in a build pipeline.

Browser Support in 2026

As of April 2026, the support matrix is almost perfect across all three formats.

• JPEG — every browser that has ever existed.
• WebP — every actively supported browser. Safari added support in 14 (2020), so anything newer than macOS Big Sur and iOS 14 works.
• AVIF — Chrome, Firefox, Edge, Safari 16.4+ (March 2023), Opera. Samsung Internet supports it. The last holdout was older iOS, which is now well below 3% of global traffic.

For a site launching in 2026, you can safely serve AVIF as the primary format with WebP and JPEG fallbacks. Global support for AVIF is above 94% according to Caniuse, and users on browsers that do not support it fall back gracefully.

Real-World File Size Comparison

Numbers from a typical 1920x1080 photographic image, perceptual quality tuned to look identical to the eye:

Results vary with image content. Flat graphics and illustrations tend to favor AVIF even more dramatically, sometimes producing files 70% smaller than JPEG. Photos with very fine texture (grass, fabric, hair) see smaller gains because the AV1 codec is aggressive about smoothing micro-detail.

Encoding Speed Matters

This is where AVIF pays a price. On typical server hardware, encoding a 1920x1080 image takes roughly:

• JPEG — 50 to 100 ms
• WebP — 200 to 400 ms
• AVIF — 2 to 10 seconds at high quality effort, sometimes longer

If you are generating images on demand (user uploads, dynamic thumbnails), AVIF encoding cost becomes a real consideration. For build-time processing or a CDN with caching, it does not matter. Tools like libaom, @jsquash/avif, and sharp (with libheif) let you trade quality for speed by lowering the effort setting.

Quality Per Kilobyte

At aggressive compression levels, each format fails differently. JPEG produces visible 8x8 blocks and ringing around text and edges. WebP smooths detail but can introduce a waxy or plastic look, especially on faces. AVIF smooths more aggressively and sometimes produces banding in gradients at very low bitrates, though it avoids the visible blockiness of JPEG.

Because each format uses its own quality scale, you cannot compare quality numbers directly. A JPEG at q=85 is roughly equivalent to a WebP at q=80 and an AVIF at q=60. Always compare by matching visual quality or bytes, never by matching the quality number.

Transparency and Animation

If your image needs transparency, JPEG is out. Both WebP and AVIF support full alpha channels. For logos, icons, and UI assets that need transparency, WebP or AVIF replace PNG and typically cut file size by half or more at visually identical quality.

For animation, both WebP and AVIF outperform animated GIF by one to two orders of magnitude. A 3-second looping clip that is 4 MB as GIF is usually under 200 KB as AVIF. If you still have animated GIFs on your site, replacing them is one of the highest-leverage performance wins available.

Serving the Right Format with Picture

The standard pattern is the <picture> element with progressive fallback. The browser picks the first format it supports.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image"
       width="1920" height="1080" loading="lazy">
</picture>

Include the width and height attributes on the <img> so the browser reserves layout space and you do not get Cumulative Layout Shift. Add loading="lazy" on below-the-fold images and fetchpriority="high" on your LCP image.

Responsive Sizes with Srcset

Combine format negotiation with responsive sizes for maximum savings on mobile.

<picture>
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w"
    sizes="(max-width: 768px) 100vw, 800px">
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
    sizes="(max-width: 768px) 100vw, 800px">
  <img src="hero-800.jpg" alt="Hero image"
       width="800" height="450" loading="lazy">
</picture>

Content Negotiation with the Accept Header

Instead of generating multiple URLs, your CDN or image server can read the Accept header the browser sends. Browsers that support AVIF include image/avif in the header, so you can serve the best format from a single URL. Cloudflare Polish, Bunny Optimizer, imgix, and Next.js Image all do this automatically. Remember to add Vary: Accept so caches key on the header.

When to Stick with JPEG

JPEG is still the right choice in a few scenarios. Email: most clients do not render WebP or AVIF. Open Graph images: social media crawlers universally prefer JPEG or PNG. Legacy platforms and some printing workflows. For web pages served to any modern browser, JPEG should no longer be the primary format.

The Bottom Line

• Serve AVIF first for the smallest files and best visual quality at low bitrates.
• Use WebP as the middle fallback for the sub-1% of users whose browsers predate AVIF.
• Keep JPEG as the base fallback and for use cases outside the web (email, OG images, print).
• Always specify intrinsic dimensions on the <img> element to prevent layout shift.
• Use a CDN that does content negotiation if you do not want to manage multiple files per image.