Image Format WebP and AVIF for SEO: The Complete 2026 Guide

WebP is a Google-developed format that provides lossy and lossless compression with transparency support. WebP lossy images are 25-35% smaller than JPEG at equivalent quality. WebP lossless images are 26% smaller than PNG. WebP supports animation, replacing animated GIFs with 64% smaller files. Browser support for WebP is at 97% globally. All major browsers, including Safari since version 14, support WebP. https://developers.google.com/speed/webp

AVIF is a newer format based on the AV1 video codec. It offers 50% smaller file sizes than JPEG at the same quality. AVIF supports HDR color, wide color gamut, and transparency. Browser support reached 92% in 2025. Chrome, Firefox, and Safari all support AVIF. The format is backed by the Alliance for Open Media, which includes Google, Apple, Microsoft, and Netflix. https://aomediacodec.github.io/av1-avif/

A 2025 benchmark by Cloudinary tested 10,000 images across formats. JPEG at quality 80 produced an average file size of 120KB. WebP at quality 80 produced 78KB (35% smaller). AVIF at quality 60 produced 45KB (62% smaller than JPEG). For image-heavy pages, switching from JPEG to WebP saves hundreds of kilobytes per page. Switching to AVIF saves even more. The same study found that AVIF encoding takes 3-5x longer than WebP on the server, which matters for real-time transformations. https://cloudinary.com/blog/webp-avif-comparison

Serve modern formats with fallbacks to ensure compatibility. The picture element lets the browser choose the first supported format.

<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">
</picture>

This pattern works in all browsers. Unsupported formats are skipped. The final img element serves as the universal fallback.

WebP quality defaults to 80 in most encoding tools, which is a good baseline. Drop to 70 for simple graphics and screenshots. Raise to 90 for high-quality photography. AVIF needs lower quality settings because its compression is more efficient. A quality of 50-60 on AVIF often matches JPEG quality 80 visually. Test your specific images at different quality levels using tools like Squoosh or libavif.

Content delivery networks like Cloudflare, Akamai, and Fastly offer automatic format conversion. Enable this feature to serve WebP or AVIF to supporting browsers without changing your image URLs. Cloudflare Polish compresses images and converts them to WebP automatically. Image CDNs like Cloudinary and Imgix allow URL-based format selection with the f_auto parameter, which serves the best supported format based on the User-Agent header.

WebP encoding is fast enough for on-the-fly transformations. AVIF encoding is slower. For real-time image serving, pre-encode AVIF images during your build process and serve them as static files. A 2025 analysis by DebugBear found that on-the-fly AVIF encoding increased time-to-first-byte by 200-400ms compared to serving pre-encoded AVIF files. Pre-encode when possible, especially for images used on high-traffic pages. https://www.debugbear.com/blog/image-formats-benchmark

WebP and AVIF encoding benefit from hardware acceleration. WebP encoding uses SSE4.1 instructions on x86 CPUs. AVIF encoding uses AVX2 and NEON for ARM. Check your server architecture and install libraries compiled with the right optimizations. libwebp and libavif both detect CPU features at runtime. A server without these optimizations encodes modern formats significantly slower.

Browser support for WebP and AVIF continues to grow. As of 2026, WebP support is near universal. AVIF support is strong but has gaps in older mobile browsers. Check your analytics to see which browsers your audience uses. If your traffic includes a significant number of Safari or Chrome users on recent versions, AVIF is safe to deploy. Monitor the Can I Use database for the latest support data. https://caniuse.com/webp

A small percentage of users still use browsers that do not support WebP or AVIF. Internet Explorer 11 and very old Safari versions are the main gaps. The picture element with type attributes handles fallback automatically. Do not use Accept header negotiation alone, because not all browsers send accurate Accept headers. The combination of picture elements and CDN-level format conversion covers the full range of user agents.

Check what image formats your site currently serves. Count the ratio of JPEG and PNG compared to WebP and AVIF. Test a sample of pages with a browser that supports AVIF to verify delivery. Measure average image file size per page and compare against benchmarks. Note the gap between your current format usage and a target of 100% WebP or AVIF for all photographic images. Audit quarterly.