Which Image Format is Faster: WebP vs AVIF Performance Test

AVIF compression efficiency is higher than WebP, often producing approximately 20-25% smaller files for similar quality, while WebP images may load slightly quicker on the client side due to lower CPU overhead whereas AVIF saves more bytes but can take a bit longer to decode. Per Can I Use usage share for October 2025, WebP global coverage is 94.38% and AVIF is 93.25%. For optimal performance, serve AVIF to supporting browsers, fall back to WebP for broader compatibility, and maintain JPEG as the universal safety net.

Which Format for Your Images: AVIF’s advantage is most pronounced with photographic content particularly with subtle gradients and textures, WebP achieves superior compression for simpler non-photographic images like logos and basic illustrations, AVIF excels in retaining fine detail and color depth supporting higher bit depths up to 10-12 bit color which means more precise colors and less banding, and progressive enhancement combining both formats delivers optimal compression across all user agents while maintaining universal compatibility.

Critical Implementation Rules:

  • Use picture element with type detection allowing browsers to automatically select AVIF, WebP, or JPEG based on native support without requiring JavaScript
  • Pre-convert images during build process or upload workflows because AVIF encoding cost depends strongly on speed presets and content characteristics, making real-time generation unsuitable for production environments
  • Store multiple format variants requiring approximately 2x to 2.5x original JPEG space depending on compression ratios achieved across formats
  • Implement proper fallback strategy because about 7% of browsers including older Safari versions and some legacy browsers cannot display AVIF images today
  • Use DSSIM and SSIMULACRA 2 metrics to compare output at comparable quality as these correlate better with human perception than SSIM alone, while keeping manual visual checks in your workflow

Additional Performance Benefits: Modern formats support both lossless and lossy compression with transparency capabilities, while AVIF specifically supports high bit depth with HDR and wide color gamuts enabling richer visuals.

Next Steps: Audit your image inventory identifying conversion candidates where compression benefits justify implementation effort, install conversion tools like cwebp and avifenc for format generation, implement progressive enhancement with proper picture element syntax and type attributes, monitor Core Web Vitals through PageSpeed Insights focusing on Largest Contentful Paint improvements, and configure your CDN to vary cache keys on Accept header to avoid serving cached AVIF to non-AVIF clients.

The Modern Image Format Challenge

Page load speed directly impacts user experience, conversion rates, and search rankings. Images typically account for the majority of page weight, making format selection critical for performance optimization.

Two prominent image formats have emerged to address performance needs: WebP introduced by Google in 2010 designed to outperform JPEG and PNG in compression, and AVIF released in 2019 by the Alliance for Open Media building on the advanced AV1 video codec. Both promise significant file size reductions compared to legacy JPEG and PNG formats.

This guide examines compression performance, encoding considerations, browser compatibility, and implementation strategies based on published benchmarks and real-world testing data.

Understanding WebP and AVIF

WebP: Google’s Established Format

WebP is a modern image format designed to outperform JPEG and PNG in compression, supporting both lossless and lossy compression as well as transparency and animation, making it a versatile replacement for older formats.

Core capabilities:

  • WebP images are typically much smaller than JPEGs, 25-34% smaller for equivalent quality by leveraging techniques from the VP8 video codec
  • Transparency support via alpha channel
  • Animation support as GIF alternative
  • Both lossy and lossless compression modes
  • Per Can I Use usage share for October 2025, WebP global coverage is 94.38%

Google Chrome added partial WebP support in 2011 and full support for all features in 2014, Firefox added support in 2019, and Safari added support in 2020.

AVIF: The Newer Contender

AVIF released in 2019 by the Alliance for Open Media builds on the advanced AV1 video codec with compression efficiency often producing approximately 20-25% smaller files than WebP for similar quality.

Core capabilities:

  • AVIF typically achieves the smallest file sizes thanks to its superior compression algorithms, around 50% smaller than equivalent JPEGs and significantly smaller than WebP in many cases
  • Supports higher bit depths up to 10-12 bit color which means more precise colors and less banding in gradients
  • HDR and wide color gamut support
  • Both lossy and lossless compression modes
  • Per Can I Use usage share for October 2025, AVIF global coverage is 93.25%

Browser support specifics: AVIF is fully supported on Chrome 85+, Firefox 93+, Safari 16.5-18.4, and Edge 121-133. AVIF requires iOS 16+ and Safari 16.4+ on macOS Monterey/Big Sur, Safari 16+ on Ventura and later, with Edge 121+ enabling AVIF by default.

Why JPEG Falls Short

JPEG from 1992 lacks capabilities modern web development requires:

  • No transparency support
  • No animation capabilities
  • Visible artifacts at aggressive compression
  • Substantially larger files than modern alternatives

The performance gap between legacy and modern formats directly impacts Core Web Vitals metrics that influence search rankings.

Compression Performance: Published Benchmark Data

Independent benchmarks testing 600 photos and images across six sizes from 96px to 1080px wide using structural dissimilarity measured by DSSIM targeting a value of 0.0025 found that AVIF outperformed both JPEG and WebP for every image in the test, with AVIF’s 85th percentile matching WebP’s 15th percentile and achieving a median saving of 50% at the same DSSIM quality metric.

Photographic Content

Testing across 1,000 diverse images in five categories at high 90%, medium 75%, and low 50% quality settings using JPEG, WebP, and AVIF encoders found that AVIF consistently outperforms WebP across all content types in terms of file size reduction, with the gap widening at lower quality settings where AVIF maintains better visual quality while achieving greater compression.

AVIF’s advantage is most pronounced with photographic content particularly with subtle gradients and textures.

Graphics and Illustrations

Benchmark testing of the SpeedVitals logo compressed to a similar quality level found that at the same quality the WebP image turned out 35% smaller demonstrating WebP’s superiority for simpler non-photographic images.

WebP shows greatest gains over JPEG with illustrations and graphics with areas of flat color.

Note: Format performance varies significantly by content type. WebP often compresses flat graphics and simple illustrations better than AVIF, while AVIF excels with complex photographic content.

Visual Quality Characteristics

When examining complex textures like fabric or foliage at high compression ratios, JPEG shows noticeable blurring and loss of fine details, WebP provides better retention of larger details but still loses some fine texture, while AVIF demonstrates superior preservation of fine details and texture patterns.

For smooth color transitions like sky gradients or shadows, JPEG exhibits visible banding and color blocks in subtle gradients, WebP shows reduced banding compared to JPEG but still noticeable in extreme cases, while AVIF demonstrates minimal banding with smoother transitions even at high compression.

When displaying text or graphics with sharp edges, JPEG shows noticeable ringing artifacts around high-contrast edges while WebP provides significantly cleaner edges with minimal artifacts and AVIF achieves similar or slightly better edge clarity compared to WebP.

Encoding and Decoding Performance

WebP has relatively lower encoding and decoding times compared to AVIF, with WebP having an edge in decode times though for most users the difference is not noticeable.

In practice WebP images may load slightly quicker on the client side due to lower CPU overhead whereas AVIF saves more bytes but can take a bit longer to decode.

In 2025 improved algorithms and optimizations have significantly improved AVIF decoding speeds, and the smaller file sizes of AVIF easily compensate for lower decoding speeds in most cases.

Performance Trade-offs

In summary AVIF wins on pure compression efficiency with smaller file sizes and WebP wins on decoding speed, both being important for performance.

Real outcomes vary by content, device, and encoder settings. Measure both transfer and decode times for your LCP element to determine optimal format for your specific use case.

The optimal choice depends on specific scenarios:

  • AVIF advantages: Maximum compression, reduced bandwidth, faster transfer on slower connections, better quality at low bitrates
  • WebP advantages: Faster encoding, faster decoding, lower CPU usage, broader browser support, better tooling maturity

Browser Compatibility Analysis

Current Support Status (November 2025)

WebP:

  • Per Can I Use usage share for October 2025, WebP global coverage is 94.38%
  • Supported by all major browsers including Chrome, Firefox, Edge, and Safari
  • Mature ecosystem with extensive tooling support
  • Minimal fallback concerns for modern deployments

AVIF:

  • Per Can I Use usage share for October 2025, AVIF global coverage is 93.25%
  • Fully supported on Chrome 85+, Firefox 93+, Safari 16.5+, and Edge 121+
  • Requires iOS 16+ and Safari 16.4+ on macOS Monterey/Big Sur
  • About 7% of browsers including older Safari versions and some legacy browsers cannot display AVIF today
  • Fallback strategy remains necessary for complete coverage

Implementation Strategy

Always keep WebP and JPEG fallbacks for remaining clients. Serve modern files first then WebP and keep JPEG or PNG as safety nets with a picture pattern to preserve compatibility across major browsers and devices.

Implementation: Progressive Enhancement

HTML Picture Element

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

Browser processing logic:

  1. Check AVIF support via type attribute
  2. Load image.avif if supported
  3. Fall back to WebP check
  4. Load image.webp if WebP supported
  5. Load JPEG for remaining browsers

Responsive Images with Multiple Formats

<picture>
  <source 
    type="image/avif"
    srcset="
      image-400.avif 400w,
      image-800.avif 800w,
      image-1200.avif 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  <source 
    type="image/webp"
    srcset="
      image-400.webp 400w,
      image-800.webp 800w,
      image-1200.webp 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  <img 
    srcset="
      image-400.jpg 400w,
      image-800.jpg 800w,
      image-1200.jpg 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
    src="image-800.jpg"
    alt="Responsive image"
    width="1200"
    height="800"
    loading="lazy"
  >
</picture>

Important: Do not use loading="lazy" on your LCP image. Instead, use fetchpriority="high" on the LCP image to prioritize its loading.

Server-Side Content Negotiation

Serve optimal formats automatically using Accept header:

Nginx configuration:

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

map $http_accept $avif_suffix {
  default "";
  "~*image/avif" ".avif";
}

location ~* ^/images/(.+)\.(jpe?g|png)$ {
  set $image_path $1;
  set $image_ext $2;
  
  # Try AVIF first, then WebP, then original
  try_files /images/${image_path}${avif_suffix} 
            /images/${image_path}${webp_suffix}
            /images/${image_path}.${image_ext} =404;
  
  # Critical for CDN caching
  add_header Vary Accept always;
}

CDN Cache Configuration: If you negotiate by Accept header, configure your CDN to vary cache keys on Accept and always return Vary: Accept header to avoid serving a cached AVIF to a non-AVIF client. This prevents format mismatches across different browsers.

PHP detection:

function getOptimalImageFormat($imagePath) {
  $accept = $_SERVER['HTTP_ACCEPT'] ?? '';
  
  // Check AVIF support first
  if (strpos($accept, 'image/avif') !== false) {
    $avifPath = preg_replace('/\.(jpg|jpeg|png)$/i', '.avif', $imagePath);
    if (file_exists($avifPath)) return $avifPath;
  }
  
  // Fall back to WebP
  if (strpos($accept, 'image/webp') !== false) {
    $webpPath = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $imagePath);
    if (file_exists($webpPath)) return $webpPath;
  }
  
  // Return original
  return $imagePath;
}

Converting Images: Tools and Commands

Command Line Tools

Install converters:

# Debian/Ubuntu
sudo apt install webp libavif-bin

# macOS (Homebrew)
brew install webp libavif

Convert to WebP:

# Single file
cwebp -q 85 input.jpg -o output.webp

# Batch convert directory
for img in *.jpg; do
  cwebp -q 85 "$img" -o "${img%.jpg}.webp"
done

Convert to AVIF:

# Single file (speed preset 6 balances quality and encoding time)
avifenc -s 6 --min 0 --max 63 input.jpg output.avif

# Batch convert
for img in *.jpg; do
  avifenc -s 6 --min 0 --max 63 "$img" "${img%.jpg}.avif"
done

Important: AVIF encoding cost depends strongly on avifenc speed presets (-s flag). Speed preset 6-8 offers reasonable balance for most web use cases. Document your preset and hardware in benchmarks, and always pre-encode outside the request path.

Quality Settings Guide

QualityJPEGWebPAVIFUse Case
95-100LargeMediumSmallPrint/archive
85-90MediumSmallTinyHigh-quality web
75-85SmallTinyMinimalStandard web (recommended)
65-75TinyMinimalMinusculeMobile-first
50-65MinimalMinusculeMicroscopicThumbnails

Quality 80-85 typically provides optimal balance between visual fidelity and file size for web delivery.

WordPress Plugins

ShortPixel:

  • Automatic WebP and AVIF conversion
  • Bulk optimization for existing libraries
  • CDN integration available
  • Free tier: 100 images monthly

Imagify:

  • One-click optimization
  • Format generation on upload
  • Original file backups
  • Various pricing tiers

When to Use Each Format

Use AVIF When:

✓ Photography and complex images

  • Photographic content with subtle gradients and textures where AVIF’s advantage is most pronounced
  • Landscape and portrait photography
  • Product photography for e-commerce
  • High-detail architectural shots

✓ File size is critical priority

  • Bandwidth-constrained deployments
  • Mobile-first applications
  • International audiences with slower connections
  • Image-heavy portfolios requiring maximum compression

✓ Quality at low bitrates

  • Situations requiring minimal banding with smoother transitions even at high compression
  • Progressive web apps
  • Thumbnail generation

Use WebP When:

✓ Graphics and illustrations

  • Simple non-photographic images like logos and basic illustrations where WebP achieves superior compression
  • Flat design elements
  • UI components
  • Icons with transparency

✓ Encoding speed matters

  • User-generated content platforms
  • Real-time image processing
  • High-volume conversion workflows
  • Dynamic resizing services

✓ Maximum compatibility required

  • Deployments targeting 94%+ coverage
  • Enterprise applications
  • International audiences including older devices

Use JPEG When:

✓ Universal compatibility mandatory

  • Email marketing campaigns
  • PDF generation
  • Print materials
  • Download archives

✓ Legacy system integration

  • Systems predating modern format support
  • Cross-platform sharing with unknown capabilities

Consider SVG First

For simple logos, icons, and vector graphics, prefer SVG over raster formats. SVG provides resolution independence, smaller file sizes for simple graphics, and perfect scaling without quality loss.

Quality Assessment Methods

Assessing quality of lossy image compression requires careful metric selection as no metric correlates perfectly with human perception, with DSSIM and SSIMULACRA 2 likely providing the best insight since they correlate well with Mean Opinion Scores and encoders are not specifically optimizing for them.

Using structural dissimilarity as measured by DSSIM provides an objective and comparable metric for comparing different image formats, allowing different encoders to make different decisions on how they sacrifice image quality to achieve smaller file sizes within a similar loss of quality budget.

Recommended Testing Approach

  1. Visual inspection: Always perform manual quality checks on target devices
  2. Objective metrics: Use DSSIM and SSIMULACRA 2 for consistent measurement that correlates better with human perception
  3. Target thresholds: Aim for DSSIM values around 0.0025 for web quality
  4. A/B testing: Compare formats on actual target devices and connections
  5. LCP measurement: Test transfer size and decode time impact on Largest Contentful Paint

Common Implementation Mistakes

Mistake 1: No Fallback Format

Problem:

<img src="image.avif" alt="Image">

Breaks for approximately 7% of users without AVIF support.

Solution:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image" width="800" height="600">
</picture>

Mistake 2: Wrong Quality Settings

Problem: Using quality 100 for all images wastes bandwidth.

Solution: Use lossy compression for photos and lossless compression for logos and text overlays. Match quality settings to use case and content type.

Mistake 3: Missing Vary Header

Problem: CDN serves wrong format to users when caching single URL.

Solution: Always set Vary: Accept header for content negotiation endpoints and configure CDN to vary cache keys on Accept.

Mistake 4: Converting Inappropriate Images

Problem: Converting tiny icons or SVG-eligible graphics.

Solution: Consider SVG first for simple vector art and icons. Only convert raster images above 10KB where compression benefits justify storage costs.

Mistake 5: Lazy Loading LCP Image

Problem: Using loading="lazy" on the hero image delays LCP.

Solution: Set fetchpriority="high" on LCP image and never lazy-load it. This has measurable LCP impact.

SEO and Core Web Vitals Considerations

URL Stability

If filenames change during re-encode batches:

  • Keep stable URLs when possible
  • 301 redirect old assets if URLs must change
  • Update internal links systematically

Image Sitemaps

  • Regenerate image sitemaps if you move or rename assets
  • Re-verify in Search Console after large batches
  • Monitor indexing status for critical images

Core Web Vitals Impact

Smaller image files directly improve:

  • Largest Contentful Paint (LCP): Faster image loading
  • Cumulative Layout Shift (CLS): Set width/height attributes
  • Total Blocking Time (TBT): Reduced decode overhead

Accessibility and User Experience

Alt Text Best Practices

  • Keep alt text specific and descriptive
  • Use empty alt (alt="") for decorative images
  • Avoid redundant “image of” phrasing

Text in Images

  • Prefer HTML text over rasterized text whenever possible
  • If unavoidable, replicate text near the image or with ARIA labels
  • Ensure sufficient contrast for accessibility

HDR Considerations

HDR images may appear different on SDR displays. Test both SDR and HDR rendering for critical UI art and product photography.

Security and Operations

Encoding Security

  • Do not run AVIF encoding synchronously in request paths
  • Use background jobs or upload hooks for conversion
  • Strip sensitive EXIF metadata unless needed
  • Preserve orientation information appropriately

Rollback Strategy

  • Keep original source files for future re-conversion
  • Maintain previous generation for fast rollback
  • Document encoding settings and versions used

Frequently Asked Questions

Should I delete JPEGs after converting to WebP/AVIF?

No. Keep JPEG originals for fallback support (7% of users), future re-conversion with improved encoders, and compatibility with non-web applications like PDF generators and email clients.

How much server space does storing multiple formats require?

Approximately 2x to 2.5x the original JPEG size for all three formats combined, depending on achieved compression ratios and content characteristics.

Can I use AVIF for all images now without fallbacks?

No. About 7% of browsers including older Safari versions and some legacy browsers cannot display AVIF images today. Always implement progressive enhancement with WebP and JPEG fallbacks.

Does AVIF support transparency?

Yes. AVIF offers both lossy and lossless modes and supports transparency, similar to PNG and WebP capabilities.

Which format is better for screenshots with text?

For text and graphics with sharp edges, both WebP and AVIF provide significantly cleaner edges than JPEG with minimal artifacts. WebP often performs slightly better for lossless text preservation, while AVIF excels at lossy compression with better edge clarity.

How do these formats affect SEO?

Indirectly through improved page load times. Smaller image files reduce Largest Contentful Paint which Google uses as a Core Web Vitals ranking signal.

What about image CDNs?

Most modern image CDNs (Cloudinary, ImageKit, Cloudflare) support automatic format conversion based on browser Accept headers. Check specific CDN documentation for AVIF support status and cache configuration requirements.

Which metrics should I use for quality comparison?

Use DSSIM and SSIMULACRA 2 to compare output at comparable quality as these correlate better with human perception than SSIM alone. Keep manual visual checks in your workflow for final quality assurance.

Implementation Checklist

Assessment Phase:

  • [ ] Audit image inventory (identify candidates above 10KB)
  • [ ] Analyze user browser data (determine actual AVIF/WebP support)
  • [ ] Measure current Core Web Vitals (establish baseline LCP)

Tool Setup:

  • [ ] Install cwebp command-line tool
  • [ ] Install avifenc (libavif)
  • [ ] Configure build process for automatic conversion
  • [ ] Document encoder versions and speed presets

Implementation:

  • [ ] Convert images to WebP and AVIF formats
  • [ ] Implement picture elements with progressive enhancement
  • [ ] Add width and height attributes to prevent layout shifts
  • [ ] Set up Vary Accept headers for content negotiation
  • [ ] Configure CDN to vary cache keys on Accept
  • [ ] Set fetchpriority=”high” on LCP image
  • [ ] Avoid lazy loading LCP image

Testing:

  • [ ] Verify format serving across browsers (Chrome, Firefox, Safari, Edge)
  • [ ] Test on older devices (iOS 15 and earlier)
  • [ ] Compare visual quality using DSSIM and SSIMULACRA 2
  • [ ] Measure LCP improvements with WebPageTest or Lighthouse

SEO Tasks:

  • [ ] Regenerate image sitemaps if paths changed
  • [ ] Set up 301 redirects for changed URLs
  • [ ] Re-verify in Search Console

Monitoring:

  • [ ] Track Core Web Vitals in Google Search Console
  • [ ] Monitor format adoption rates via server logs
  • [ ] Calculate bandwidth savings and storage costs

The pragmatic playbook: lead with AVIF images for the smallest file sizes, fall back to WebP for broad browser support, and keep JPEG or PNG as safety nets.

Further Reading: