by Dream Intrepid Ltd

WebP vs AVIF: The Complete Guide for US and Canadian Websites in 2026

By Optimage

WebP cut file sizes in half. AVIF cuts them in half again. Here is what every US and Canadian web developer, designer, and site owner needs to know about modern image formats in 2026 and which one to actually use.

Table of Contents

In 1992, the JPEG format launched and immediately became the standard for photographic images on the web. For 18 years, nothing better came along. Then in 2010, Google released WebP, claiming 26% smaller files than JPEG at equivalent quality. The web industry spent the next decade arguing about whether it was real and whether browser support would ever materialize.

It did materialize. And just as WebP became genuinely universal, AVIF arrived to make WebP look as old as JPEG once did.

We are now at a point where a US or Canadian website using JPEG for its primary photographic content is leaving 40 to 60% of its image data on the table every single request, for every single visitor. This is not a marginal edge-case improvement. For a site that serves 100,000 page views per month, switching from JPEG to AVIF can reduce monthly bandwidth by hundreds of gigabytes, improve mobile load times by 2 to 4 seconds, and meaningfully boost Google PageSpeed scores. The question is no longer whether to switch. It is how and when.

This guide answers both.

The Image Format Arms Race: A Brief History {#image-format-history}

Understanding why we have multiple competing formats helps explain why the industry has not converged on a single answer.

JPEG (1992): The Joint Photographic Experts Group standard for lossy compression of photographic images. JPEG uses discrete cosine transform (DCT) compression optimized for the frequency characteristics of natural images. It remains remarkably effective for its age and is still the most widely deployed image format on the web.

PNG (1996): Portable Network Graphics, designed as a lossless alternative to GIF (which had licensing issues). PNG handles transparency, supports lossless compression, and is the standard for graphics, logos, and images requiring crisp edges. PNG files are significantly larger than JPEG for photographic content.

GIF (1987, still inexplicably alive): Graphics Interchange Format, limited to 256 colors, but supports animation. GIF animation has persisted for social media content despite its technical inferiority. The HTTP Archive reports that millions of web pages still deliver GIF content, often at absurd file sizes compared to what modern video formats or AVIF animation could achieve for the same visual content.

WebP (2010): Developed by Google from the VP8 video codec technology. WebP supports both lossy and lossless compression, alpha transparency, and animation. Lossy WebP is typically 25 to 35% smaller than JPEG at equivalent perceptual quality. Lossless WebP is typically 26% smaller than PNG. Google open-sourced the format and pushed adoption through Chrome, which accelerated uptake significantly.

AVIF (2019-2020): The AV1 Image File Format, derived from the AV1 video codec developed by the Alliance for Open Media (AOMedia), a consortium including Google, Apple, Microsoft, Netflix, Amazon, and Mozilla. AVIF achieves significantly better compression than WebP, typically 40 to 55% smaller than JPEG and 20 to 35% smaller than WebP at equivalent perceptual quality.

JPEG XL (2022): A newer format with excellent compression and additional features including lossless JPEG recompression (allowing existing JPEG files to be transcoded to JPEG XL without quality loss and with file size reduction). Browser adoption of JPEG XL has been inconsistent: Chrome removed support, then re-added it behind a flag, and as of 2026 it remains in experimental status in most browsers. JPEG XL is worth monitoring but not yet practical for mainstream web deployment.

The trajectory is clear: every generation of image format delivers roughly 40 to 50% better compression than the previous generation at equivalent quality. Each format also trades increased compression for increased encoding complexity and typically slower encode times.

WebP Explained: How It Works, What It Delivers {#webp-explained}

WebP's compression is based on predictive coding, where the encoder predicts what each block of pixels will look like based on neighboring blocks and only encodes the difference between the prediction and the actual pixels. This approach, borrowed from video codec technology, is fundamentally more efficient than JPEG's DCT approach for many types of visual content.

Lossy WebP

Lossy WebP is what you will use for photographic content: product photos, lifestyle images, food photography, real estate photos. The quality parameter in WebP is analogous to JPEG quality settings but maps differently. WebP quality 80 produces results comparable to JPEG quality 90 in most visual comparisons, at a file size roughly 30% smaller.

At quality settings of 75 to 85, lossy WebP produces files that are perceptually indistinguishable from their JPEG equivalents to most viewers in normal browsing conditions, while being substantially smaller.

Lossless WebP

Lossless WebP preserves pixel-perfect accuracy, making it suitable for UI screenshots, logos, and content where every pixel matters. Lossless WebP files are typically 26% smaller than equivalent PNG files. For web assets that currently use PNG (icons, interface graphics, charts), switching to lossless WebP reduces file sizes without any quality trade-off.

WebP with transparency

WebP supports alpha channel transparency, just like PNG. A product photo with a transparent background that currently weighs 3MB as PNG-24 can typically be reproduced as WebP with transparency at 400 to 600KB, an 80 to 85% reduction.

Browser support for WebP in 2026

WebP is supported by every browser that matters for US and Canadian audiences. Chrome (since version 23, 2012), Firefox (since version 65, 2019), Safari (since iOS 14 and macOS Big Sur in 2020), Edge (Chromium-based, since 2020), and Samsung Internet (since version 4). Global WebP support stands above 97% of browsers in use today according to Can I Use.

The 2 to 3% of browsers that do not support WebP are predominantly legacy versions of Safari on older iOS devices (iOS 13 and earlier). These users can be served JPEG fallbacks using the HTML <picture> element, which adds minimal implementation complexity.

AVIF Explained: AV1 Codec Technology and What Makes It Different {#avif-explained}

AVIF takes the video compression technology developed for AV1, the open-source next-generation video codec, and applies it to still images. This is not just an incremental improvement over WebP. It represents a fundamentally different approach to image compression.

How AVIF compression works

AV1 uses a more sophisticated prediction model than WebP, combining spatial prediction (looking at neighboring blocks in the same frame) with intra-frame prediction transforms that more accurately model the frequency content of images. The encoder can also apply more sophisticated noise modeling, which is particularly effective for photographic images where film grain and digital sensor noise would otherwise create large amounts of high-frequency data that is difficult to compress.

AVIF also supports wider color gamuts (including HDR content in Display P3 and Rec. 2020 color spaces) and 10-bit and 12-bit color depth, which matters for high-end photography workflows. Standard JPEG and WebP are limited to 8-bit color.

AVIF quality vs JPEG quality equivalence

Comparing quality settings between formats is not straightforward because the quality parameter means something different in each encoder. As a practical reference:

  • AVIF quality 60 is typically comparable to JPEG quality 90 in perceptual quality, at roughly half the file size
  • AVIF quality 50 to 55 is typically comparable to JPEG quality 80 to 85, at 40 to 55% of the file size

These are general rules. Actual results vary significantly by image content. Images with lots of fine texture detail (fabric, grass, hair) tend to show more visible AVIF artifacts at aggressive compression settings than similar JPEG compression would. AVIF performs extremely well on smooth gradients, portraits, and product photography.

AVIF encoding speed

This is the most significant practical limitation of AVIF. AVIF encoding is substantially slower than JPEG or WebP encoding. Encoding a single high-resolution image to AVIF can take 2 to 10 seconds on a modern laptop, compared to under a second for WebP or JPEG. For large batch processing jobs, AVIF encoding time is a real workflow consideration.

The encoding speed limitation also affects real-time CDN-based image conversion. CDNs that convert images to AVIF on-the-fly (such as Cloudflare Image Resizing) cache the AVIF versions after the first request, so only the first visitor to each unique image URL experiences the encoding overhead.

Real Benchmark Numbers: JPEG vs WebP vs AVIF {#benchmark-numbers}

Theoretical claims about format compression ratios are useful, but real images on real websites are what matters. Our comprehensive format benchmark published on this blog contains full test methodology and raw data. Here is a summary of the most relevant findings.

Test conditions

Images tested: 20 photographs representative of common web content categories (portrait photography, product images, landscape/lifestyle, food photography, UI screenshots).

Quality targets: All formats encoded to match the visual quality of JPEG quality 85 as the reference, assessed using SSIM (Structural Similarity Index) and visual inspection.

Results summary

Portrait photography (skin tones, hair detail):

  • JPEG quality 85: average 280 KB
  • WebP quality 80: average 185 KB (34% smaller than JPEG)
  • AVIF quality 55: average 120 KB (57% smaller than JPEG)

E-commerce product photos (white background, clothing):

  • JPEG quality 85: average 220 KB
  • WebP quality 80: average 148 KB (33% smaller)
  • AVIF quality 55: average 88 KB (60% smaller)

Lifestyle/landscape photography (complex natural scenes):

  • JPEG quality 85: average 450 KB
  • WebP quality 80: average 310 KB (31% smaller)
  • AVIF quality 55: average 198 KB (56% smaller)

Food photography (rich colors, complex textures):

  • JPEG quality 85: average 380 KB
  • WebP quality 80: average 265 KB (30% smaller)
  • AVIF quality 58: average 185 KB (51% smaller) [higher quality setting needed for texture content]

UI screenshots (sharp text, gradients, icons):

  • PNG: average 420 KB
  • Lossless WebP: average 298 KB (29% smaller)
  • AVIF quality 65: average 195 KB (54% smaller vs PNG)

What these numbers mean in practice

A product page with 10 images at JPEG 85 averaging 250 KB each carries 2.5 MB of image data. The same page with AVIF images at equivalent quality carries approximately 1.0 MB. On a 4G mobile connection averaging 20 Mbps, that difference represents roughly 0.6 seconds of download time saved on image data alone, before accounting for other performance improvements. Across thousands of visitors per month, this improvement is reflected directly in bounce rates, time on page, and conversion rates.

Browser Compatibility in 2026: The Full Picture {#browser-compatibility-2026}

Format support has been the primary barrier to WebP and AVIF adoption. In 2026, that barrier has largely fallen for US and Canadian audiences.

WebP browser support (2026)

Browser WebP Support Market Share (US/CA)
Chrome (desktop + mobile) Full support ~65%
Safari (iOS 14+, macOS Big Sur+) Full support ~19%
Firefox Full support ~4%
Edge (Chromium) Full support ~4%
Samsung Internet Full support ~3%
Legacy Safari (iOS 13 and below) No support ~1%

Effective US/Canadian coverage: approximately 97-98%.

AVIF browser support (2026)

Browser AVIF Support Notes
Chrome 85+ Full support Since August 2020
Firefox 93+ Full support Since October 2021
Safari 16.4+ Full support Since March 2023
Edge (Chromium) Full support Follows Chrome
Samsung Internet 14+ Full support
iOS 16+ Full support Safari-based
iOS 15 and below No support Approximately 3-4% of iOS

Effective US/Canadian coverage for AVIF: approximately 93-95%. This means 5 to 7% of visitors need a fallback format.

The practical compatibility strategy

For WebP: serve WebP as the default with a JPEG fallback in a <picture> element. The 2-3% without WebP support gets a JPEG. This has been the recommended approach for several years and is well-established.

For AVIF: serve AVIF as the primary format, WebP as the first fallback, and JPEG as the final fallback. This three-tier approach ensures maximum compression for the majority while guaranteeing compatibility for all visitors.

When to Use AVIF, When to Use WebP, When to Stay With JPEG or PNG {#format-decision-guide}

This is the practical decision framework, free of format evangelism.

Use AVIF when:

  • You are serving photographic content where bandwidth savings are significant (product images, hero images, blog photography)
  • Your CDN supports automatic AVIF encoding (Cloudflare, Fastly, or similar)
  • You are pre-processing images before upload and can absorb the longer AVIF encode time
  • Your audience is predominantly on modern devices (launched 2020 or later), where AVIF support is near-universal
  • File size reduction is a priority (ecommerce stores with large image counts, high-traffic media sites, mobile-first content)

Use WebP when:

  • You need faster batch encoding (WebP encodes 5 to 10 times faster than AVIF)
  • You are replacing PNG for UI assets, logos, or graphics (lossless WebP is excellent here)
  • Your workflow does not yet support AVIF or your CDN does not transcode to AVIF automatically
  • You need transparency and are currently using PNG
  • You want the best balance of compression, encode speed, and browser compatibility

Our comparison of PNG vs WebP specifically for UI design assets covers the lossless format decision in more detail.

Use JPEG when:

  • You are uploading to a platform that applies its own compression (Shopify portals, social media, MLS platforms) and WebP or AVIF would be double-compressed. Upload JPEG at quality 85-90 in these cases and let the platform handle the final delivery
  • You are generating images that will be processed by software with unknown format support
  • You need a universally compatible photographic format for email attachments, document inclusion, or print workflows

Use PNG when:

  • You need lossless storage of images that will be further edited (PNG is a lossless master format)
  • A legacy system requires PNG and cannot accept WebP
  • The image has very sharp edges, text, or line art at small sizes where lossy compression artifacts would be visible (though lossless WebP handles this equally well)

Never use GIF when:

You need animation. Use AVIF animated or WebP animated instead. The file size savings are dramatic and the quality improvement is significant.

Serving Next-Gen Formats With the HTML Picture Element {#html-picture-element}

The <picture> element is the standard HTML mechanism for serving different image formats based on browser support. Here is the correct implementation.

Basic WebP with JPEG fallback

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

The browser reads the <source> elements in order and uses the first one it supports. If it supports WebP, it uses image.webp. If not, it falls back to image.jpg in the <img> element.

Full three-tier implementation with AVIF

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

Browsers that support AVIF use the AVIF version. Browsers that support WebP but not AVIF use the WebP version. All others use JPEG.

Combining picture with responsive srcset

For responsive images that need both format selection and size selection:

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

This serves the optimal format at the optimal size for every device and browser combination. It requires maintaining three sets of image files but delivers maximum performance. CDNs that support on-the-fly resizing and format conversion (discussed in the next section) can handle this automatically without requiring you to pre-generate every combination.

For the MDN reference documentation on the <picture> element, see MDN Web Docs: picture element.

CDN Support for AVIF and WebP in 2026 {#cdn-support}

For sites that process high image volumes, CDN-level automatic format conversion is a powerful approach: you upload the master format (JPEG or even original high-quality files) and the CDN serves AVIF or WebP automatically based on the browser's Accept header.

Cloudflare Image Resizing

Cloudflare's Image Resizing service supports automatic WebP and AVIF conversion. When enabled, Cloudflare reads the browser's Accept request header (which includes image/avif for AVIF-capable browsers and image/webp for WebP-capable browsers) and serves the most efficient supported format automatically. The first request triggers encoding; subsequent requests are served from cache.

Cloudflare Image Resizing is available on Business and Enterprise plans, or as a separate Images add-on.

Fastly

Fastly's image optimization, built on Fastly's edge network, supports WebP serving based on Accept header negotiation. AVIF support through Fastly requires specific configuration and is available on higher-tier plans.

AWS CloudFront with Lambda@Edge or CloudFront Functions

AWS CloudFront does not natively convert image formats, but combining CloudFront with Lambda@Edge allows Accept header inspection and routing to pre-generated format variants stored in S3. This requires more setup than Cloudflare but gives very fine-grained control and integrates naturally into AWS-native architectures.

For self-hosted setups, Imgix and Cloudinary both offer format auto-conversion as a service and are widely used by US and Canadian media companies, ecommerce platforms, and content-heavy websites. Cloudinary's State of Visual Media Report consistently documents significant file size reductions and performance improvements for sites implementing format auto-conversion.

When CDN conversion is worth it

If you have an existing large image library in JPEG format and cannot realistically re-encode everything in AVIF or WebP, CDN-based conversion is the fastest path to serving modern formats without touching your source files. For new sites or sites undergoing rebuilds, pre-encoding to AVIF and WebP before upload is more efficient and gives you more control.

The Conversion Workflow: Bulk Converting Your Image Library {#conversion-workflow}

Whether you are converting a few dozen product images or a library of thousands, the process follows the same steps.

Step 1: Audit your existing library

Identify what you have: file formats, dimensions, approximate quality settings, and estimated total size. For a WordPress site, the media library can be audited with a plugin like Media Cleaner or by exporting the media library database table. For standalone file servers, any bulk file listing tool can generate the inventory.

Prioritize images on high-traffic pages. Converting 50 images on your homepage, most-visited landing pages, and top product pages has more impact than converting 5,000 images in an archive section nobody visits.

Step 2: Prepare source files

The best source for AVIF or WebP conversion is the highest-quality version of each image available. If you have original JPEG files at quality 90 or higher, use those as the source. Re-encoding an already-compressed JPEG to AVIF at aggressive settings compounds compression artifacts. For the best output quality, start from the highest quality source.

If your only available source is a compressed JPEG, still convert it. The AVIF output at a conservative quality setting (65 to 70) will be smaller than the JPEG with similar perceptual quality, even accounting for re-encoding generations.

Step 3: Set conversion parameters

For photographic content (product images, portraits, lifestyle):

  • Primary: AVIF, quality 55 to 65 (test and verify visually before committing)
  • Secondary: WebP, quality 80 to 82

For UI and graphic content (logos, icons, screenshots, illustrations):

  • Primary: Lossless WebP
  • AVIF quality 65 to 70 for lossy versions of high-frequency content

Maximum dimensions:

  • Set a maximum dimension appropriate for your largest display context. For most web content, 1920px on the longest edge is sufficient. Product images: 2048px.

Step 4: Batch process

Optimage handles bulk AVIF and WebP conversion with a folder drag-and-drop interface. Set your target format, quality, and maximum dimensions once, process the entire folder, and review the before/after file size summary. For a library of 500 images, processing takes a few minutes for WebP output and somewhat longer for AVIF due to encoding speed differences.

Step 5: Quality review

After batch conversion, review a representative sample across image categories. Look specifically at:

  • Fine texture areas (fabric, hair, grass, food)
  • High-contrast edges (product edges against white backgrounds, text in images)
  • Smooth gradient areas (sky, skin tones, blurred backgrounds)

If any category shows unacceptable artifacts, increase the quality setting for that image type and reprocess. A per-category quality setting (photographic content at quality 60, UI content at quality 70) produces better overall results than a single global setting.

Impact on Google PageSpeed Scores: Real Before and After {#pagespeed-impact}

Google PageSpeed Insights explicitly flags unoptimized image formats under "Serve images in next-gen formats" in the Opportunities section. The estimated savings shown are specific to each flagged image.

Typical score improvements from format conversion

Based on real-world implementations across various site types:

Small business website (10 to 20 images per page, all JPEG):

  • Pre-conversion PageSpeed mobile: 38 to 52
  • Post-conversion PageSpeed mobile (WebP): 65 to 78
  • Post-conversion PageSpeed mobile (AVIF): 72 to 85

Ecommerce product page (8 to 12 product images, JPEG):

  • Pre-conversion: 28 to 45
  • Post-conversion (WebP): 60 to 75
  • Post-conversion (AVIF): 68 to 82

Photography portfolio (15 to 25 large images per page, JPEG):

  • Pre-conversion: 18 to 35
  • Post-conversion (WebP): 55 to 70
  • Post-conversion (AVIF): 65 to 80

Note that PageSpeed scores above 90 for image-heavy pages typically require additional optimization beyond format conversion: proper image sizing, lazy loading, preloading LCP images, and eliminating render-blocking resources. Format conversion alone delivers the largest single jump in score for most unoptimized sites, but reaching 90+ requires addressing all the other opportunities too.

The LCP metric shows the most dramatic improvement from format conversion. A 400 KB JPEG hero image that was taking 1.8 seconds to download on a simulated mobile connection becomes a 170 KB AVIF at identical visual quality, downloading in under 0.8 seconds. That LCP improvement is often the difference between a "Needs Improvement" rating (2.5 to 4 seconds) and a "Good" rating (under 2.5 seconds).

Frequently Asked Questions {#faq}

Should I use AVIF or WebP in 2026?

For new projects: use AVIF as the primary format with WebP and JPEG fallbacks. The compression benefits are significant enough to justify the encoding overhead, and browser support is now at a level where AVIF serves the large majority of US and Canadian visitors. For projects where simplicity is a priority or batch encoding speed matters, WebP remains an excellent choice with near-universal support.

Does AVIF look worse than JPEG at the same file size?

No, the opposite is true. AVIF achieves better perceptual quality at a given file size than JPEG. The question is whether AVIF looks worse than JPEG at a given quality setting, and the answer depends on image content. For smooth gradients and portraits, AVIF is superior. For very fine texture content (grass, fabric), AVIF can show different (not necessarily worse) artifact characteristics at aggressive compression. The solution is to use a slightly higher quality setting for texture-heavy content.

Will switching to AVIF or WebP affect my SEO?

Switching to modern formats improves SEO by improving page speed, which is a confirmed ranking signal. Google can index and serve AVIF and WebP images in image search results. There is no SEO downside to switching formats. Keep the same image URLs where possible, or implement proper redirects if URLs change.

How do I serve WebP/AVIF on a static site or custom server?

If you are serving images from your own web server (Apache or Nginx), you can configure the server to serve WebP/AVIF variants when the browser supports them. The approach involves content negotiation via Accept headers and serving the appropriate file from a format-specific subdirectory. This requires server configuration access but provides automatic format serving without any HTML changes.

What is JPEG XL and should I use it?

JPEG XL (JXL) is a next-generation format with excellent compression and a unique lossless JPEG transcoding feature. Browser support remains inconsistent in 2026: Chrome has it behind a flag, and other browsers have varying levels of support. JPEG XL is worth watching but not yet ready for production deployment as a primary format.

Ready to optimize your images? Try Optimage free and convert your first batch to AVIF or WebP in minutes. Bulk conversion with quality preview, format comparison, and automatic fallback generation.

Related reading:

Try Optimage Free

Compress, convert, and optimize your images in seconds. No sign-up needed to start.

Start Optimizing Free
Back to The Optimage Journal