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

Why image format choice matters in 2026

Images account for more than 50% of the average webpage's total byte weight, according to the HTTP Archive. On mobile connections, every unnecessary kilobyte translates directly into slower Largest Contentful Paint (LCP) scores, higher bounce rates, and lower Core Web Vitals.

The median webpage in 2026 serves approximately 1.8 MB of images. Switching from JPEG to WebP alone could save 450-630 KB per page. Switching to AVIF could save 750-900 KB. At scale, that is the difference between passing and failing Google's Core Web Vitals assessment, which directly impacts search rankings.

Beyond SEO, format choice affects user experience in measurable ways. A Google study found that when LCP improves from 2.5 seconds to 1.8 seconds, conversion rates increase by an average of 8.4%. Image format is one of the highest-leverage changes you can make to improve LCP with zero design changes.

Three formats now dominate the conversation: JPEG (the 30-year standard), WebP (Google's modern replacement), and AVIF (the state-of-the-art newcomer). Each has clear strengths and real tradeoffs. This guide gives you the data to choose correctly.

A brief history of each format

JPEG (1992) - the universal standard

JPEG (Joint Photographic Experts Group) was standardized in 1992. Its lossy compression algorithm is specifically tuned for photographic content with continuous tonal gradients. For 30 years, it was the only image format that mattered on the web, and it earned 100% compatibility with every browser, OS, email client, CMS, and image editor ever built.

JPEG encodes and decodes extremely fast on any hardware. It handles complex photographic scenes well. But it has no transparency, no animation, and its compression efficiency has been surpassed by newer codecs. At quality 80, a 1200px photograph typically weighs around 100 KB as JPEG. That is the baseline for all comparisons in this article.

WebP (2010) - the practical modern choice

Developed by Google and released in 2010, WebP took nearly a decade to achieve broad browser support. Safari was the last major holdout, adding support in Safari 14 (September 2020). In 2026, WebP has 97%+ global browser support, making it effectively universal for web use.

WebP supports both lossy and lossless compression, transparency (alpha channel in both modes), and animation. According to Google's compression studies, lossy WebP files are 25-34% smaller than comparable JPEG files at equivalent perceptual quality. Lossless WebP is 26% smaller than PNG. The same 1200px photograph that weighs 100 KB as JPEG typically compresses to 65-75 KB as WebP.

AVIF (2018) - the compression champion

AVIF (AV1 Image File Format) was finalized in 2018, derived from the royalty-free AV1 video codec developed by the Alliance for Open Media (Google, Apple, Amazon, Meta, Microsoft, Mozilla, and Netflix). It represents the current state of the art in image compression.

AVIF achieves 30-50% smaller file sizes than WebP at equivalent visual quality, with particularly strong results at low bitrates. It supports transparency, animation, HDR (high dynamic range), and wide color gamut (WCG). The same 1200px photograph that weighs 100 KB as JPEG and 65-75 KB as WebP compresses to just 40-55 KB as AVIF.

The tradeoff is encoding speed. AVIF uses computationally expensive techniques inherited from the AV1 video codec, including multi-reference prediction and advanced tile partitioning. Encoding a single 1200px image can take 3-20 seconds, compared to under 1 second for WebP and under 100 milliseconds for JPEG. Browser support is strong but not universal at approximately 93% globally.

Real-world benchmark: 5 test images, 3 formats

We tested five different types of images to see how each format performs across real-world content. All images were resized to 1200px wide and encoded at quality 80 (or the equivalent quality setting for each encoder). We used cjxl for JPEG XL benchmarks, cwebp for WebP, and avifenc for AVIF.

Average results at quality 80:

• WebP vs JPEG: 31% smaller on average across all five images
• AVIF vs JPEG: 54% smaller on average across all five images
• AVIF vs WebP: 33% smaller on average across all five images

These numbers are consistent with published benchmarks from Netflix and Cloudinary, both of which report AVIF achieving 40-60% smaller files than JPEG at matched SSIM (structural similarity) scores.

For an e-commerce site with 500 product images, switching from JPEG to WebP saves approximately 19 MB in total image weight. Switching to AVIF saves approximately 31 MB. That difference compounds across every page view, every visitor, and every device.

Try it yourself: interactive comparison

Benchmarks on someone else's images are useful, but seeing results on your own images is better. Drop any image into the tool below to see how it compresses as JPEG, WebP, and AVIF at quality 80. Everything runs entirely in your browser using the Canvas API. No files are uploaded anywhere.

Note: AVIF encoding via the Canvas API requires Chrome 113+ or Firefox 121+. Safari does not support AVIF encoding through Canvas.toBlob() yet, though it fully supports AVIF decoding. If AVIF shows as unsupported, the comparison will still show JPEG and WebP results.

Browser support in 2026

Browser support is the primary practical constraint when choosing an image format. A format that is 50% smaller but only works in half of browsers is not useful for production. Here is the current state as of April 2026, based on Can I Use data.

Encoding speed: the hidden cost

Compression ratio is only half the equation. Encoding speed determines whether a format is practical for your workflow, especially for dynamic image generation, real-time uploads, and large batch processing.

This speed difference matters in three scenarios:

• User uploads: If you re-encode images when users upload them (like a CMS), WebP adds negligible latency. AVIF can add 5-15 seconds per image, which may require background processing.
• Build pipelines: A site with 5,000 images encoded to AVIF at build time takes 4-20 hours versus 16 minutes for WebP. This affects CI/CD pipeline costs and deployment speed.
• CDN on-the-fly encoding: Services like Cloudflare Images, Cloudinary, and imgix handle AVIF encoding at their edge, removing the speed concern from your workflow entirely.

Quality at low bitrates: where AVIF shines

At typical web quality (quality 75-85), the visual difference between JPEG, WebP, and AVIF is subtle. Most viewers cannot distinguish them in an A/B comparison. The gap becomes obvious at lower quality settings, which is relevant when you need aggressive compression for bandwidth-constrained users (mobile, emerging markets, offline-first PWAs).

At quality 40 (very aggressive compression):

• JPEG: Visible block artifacts around edges, color banding in gradients, and noticeable mosquito noise in smooth areas. Files are small but quality degradation is clearly visible.
• WebP: Fewer block artifacts than JPEG, but some blurring in fine details and occasional ringing around high-contrast edges. Acceptable for thumbnails.
• AVIF: Remarkably clean even at aggressive compression. Smooth gradients are preserved, fine textures remain readable, and edge artifacts are minimal. AVIF at quality 40 often looks better than JPEG at quality 65.

This low-bitrate advantage is why Netflix adopted AVIF for their title cards and promotional images. When serving billions of images per day, the quality-per-byte ratio at aggressive compression levels saves substantial bandwidth without degrading the visual experience.

Decision flowchart: which format to use

Use this flowchart to determine the right format for any specific use case. Start at the top and follow the path that matches your situation.

The key insight: you do not have to choose only one format. The HTML <picture> element lets you serve AVIF to browsers that support it and WebP to everyone else, automatically. This is the optimal approach for sites where performance matters.

How to serve all three formats with the picture element

The HTML <picture> element is the production-ready way to serve multiple image formats. The browser evaluates each <source> element from top to bottom and uses the first format it supports. No JavaScript, no server-side user agent detection, no cookies.

<picture>
  <!-- Best compression: served to Chrome, Firefox, Safari 16.4+ -->
  <source srcset="photo.avif" type="image/avif">

  <!-- Good compression: served to Safari 14+, older Chrome, etc. -->
  <source srcset="photo.webp" type="image/webp">

  <!-- Universal fallback: every browser, every email client -->
  <img src="photo.jpg" alt="Description" width="1200" height="800"
       loading="lazy" decoding="async">
</picture>

In practice, this means:

• ~93% of visitors get the AVIF version (smallest file)
• ~4% of visitors get the WebP version (still 30% smaller than JPEG)
• ~3% of visitors get the JPEG fallback (full compatibility)

For Next.js users

If you use Next.js, the next/image component handles format negotiation automatically. It serves AVIF or WebP based on the browser's Accept header, with zero configuration. You can control the default format priority in next.config.js:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

For WordPress users

WordPress 6.5+ generates WebP versions of uploaded images automatically when the server supports it. For AVIF, you currently need a plugin like Performance Lab (by the WordPress Performance Team) or a CDN that handles format conversion at the edge. The simplest approach for WordPress: convert images to WebP before uploading using a browser-based tool like SammaPix WebP converter.

How to convert your images

Converting existing images to modern formats does not require installing software or uploading files to a third-party server.

Browser-based (no install, no upload)

• SammaPix WebP Converter: Convert any image to WebP in your browser. Batch processing, quality control, ZIP download. No account required, files never leave your device.
• SammaPix Compress: Compress JPEG, PNG, WebP, GIF, and AVIF with adjustable quality. See the exact file size before downloading.
• Squoosh: Google's open-source tool with side-by-side comparison. Supports AVIF, WebP, JPEG XL, and more. Single-image only (no batch).

Command-line (for developers and build pipelines)

# Convert to WebP (quality 80)
cwebp -q 80 input.jpg -o output.webp

# Convert to AVIF (quality 80, speed 6)
avifenc --min 20 --max 40 -s 6 input.jpg output.avif

# Batch convert all JPEGs in a folder to WebP
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

CDN-based (automatic, zero code changes)

The simplest production approach for large sites is to let your CDN handle format conversion. These services detect the browser's Accept header and serve the optimal format automatically:

• Cloudflare Images / Polish: automatic AVIF and WebP conversion at the edge
• Cloudinary: format auto-detection with the f_auto parameter
• imgix: auto format negotiation with the auto=format parameter
• Vercel / Next.js: built-in image optimization via next/image serves AVIF and WebP automatically

5 common mistakes to avoid

Complete format comparison table

What about JPEG XL?

JPEG XL (JXL) deserves a mention. It was designed to be the long-term replacement for JPEG, with features like progressive decoding, lossless JPEG recompression, and compression quality between WebP and AVIF. However, as of April 2026:

• Chrome removed JPEG XL support in Chrome 110 (February 2023), citing insufficient ecosystem interest
• Safari supports it since Safari 17 (September 2023)
• Firefox does not support it by default (behind a flag only)

With only Safari support in 2026, JPEG XL is not viable for production web use. It remains an excellent archival format and is worth watching, but for web delivery, AVIF and WebP are the practical choices today.

FAQ

Is AVIF better than WebP for websites?

AVIF produces files 30-50% smaller than WebP at equivalent visual quality, making it technically superior for compression. However, WebP has 97%+ browser support versus AVIF's 93%, and WebP encodes 5-10x faster. For most websites, WebP is the better default. Use AVIF as a progressive enhancement for browsers that support it, served via the HTML picture element.

Should I still use JPEG in 2026?

JPEG remains necessary for email campaigns (Gmail, Outlook, and Apple Mail do not reliably render WebP or AVIF), legacy CMS platforms, print workflows, and any context where you cannot control the downstream software. For web delivery, WebP and AVIF are strictly better choices in terms of file size and quality.

Does AVIF work in Safari?

Yes. Safari has supported AVIF decoding since Safari 16.4 (released March 2023) on macOS Ventura 13.3 and iOS 16.4. All current Safari versions in 2026 support AVIF. The gap is with older devices stuck on Safari 15 or earlier, which accounts for approximately 3-4% of global browser traffic.

How much smaller is WebP than JPEG?

At equivalent visual quality (quality 80), WebP is typically 25-35% smaller than JPEG for photographic content. A 100 KB JPEG photo usually converts to 65-75 KB as WebP with no perceptible quality difference. For images with sharp edges and text, the savings can be even higher at 30-45%.

How do I serve AVIF with a WebP fallback?

Use the HTML <picture> element with multiple source elements. List AVIF first with type="image/avif", then WebP with type="image/webp", then use <img src="photo.jpg"> as the universal fallback. The browser picks the first supported format automatically with zero JavaScript.

Why is AVIF encoding so slow?

AVIF is based on the AV1 video codec, which uses computationally expensive techniques like multi-reference prediction, advanced tile partitioning, and iterative rate-distortion optimization to achieve its superior compression. Encoding a single 1200px image can take 3-20 seconds versus under 1 second for WebP. Hardware AV1 encoders are improving, but in 2026 AVIF encoding remains 5-10x slower than WebP in software.

Can I convert images to AVIF and WebP for free?

Yes. The SammaPix WebP converter handles WebP conversion entirely in your browser with no upload and no account required. For AVIF conversion, Squoosh (by Google) and the command-line tool avifenc are both free. You can also use the interactive comparison widget above in this article to test how your specific images compress in each format.

For format-specific conversion workflows see: PNG to JPG vs WebP benchmark, SVG to PNG for developers, and GIF to MP4 migration.