1. Home
2. web
3. Optimizing Images: WebP vs. AVIF and Responsive Sizes

Introduction

Optimizing image assets is one of the most effective ways to improve web performance metrics like Lighthouse scores and LCP (Largest Contentful Paint).

In many web applications, images make up more than half of the total payload size. Slow image loading times directly degrade user experience.

Replacing legacy formats like JPEG and PNG with next-generation formats like WebP and AVIF has become standard practice in modern web development. This article compares these two formats and explains how to configure responsive, optimized image delivery.

1. Comparing Next-Generation Formats: WebP vs. AVIF

Compared to JPEG and PNG, next-generation formats compress files much more efficiently while maintaining visual quality.

① WebP

Developed by Google, WebP is a versatile image format.

• Features: Supports both lossy compression (replacing JPEG) and lossless compression (replacing PNG). It also supports alpha channel transparency and animations.
• Compression: Reduces file size by 25% to 30% compared to a JPEG of equivalent quality.
• Support: Supported by almost all modern web browsers, making it the de facto standard for web images.

② AVIF

AVIF is an open, royalty-free image format based on the AV1 video codec.

• Features: Offers higher compression ratios than WebP and supports wide color gamuts and HDR. It performs well with gradients and detailed photographic images, minimizing compression artifacts.
• Compression: Reduces file size by 50% or more compared to an equivalent JPEG.
• Support: Supported by major browsers like Chrome, Firefox, and Safari, making it ready for production environments.

2. Using the HTML Element for Fallback Delivery

Since not all browsers support AVIF, the recommended approach is to provide a fallback chain: serve AVIF if supported, fall back to WebP, and use standard JPEG or PNG as a final fallback.

You can configure this delivery directly in HTML using the <picture> element.

<picture>
  <!-- 1. Preferred: High-compression AVIF (served if the browser supports it) -->
  <source srcset="image.avif" type="image/avif">
  
  <!-- 2. Secondary: Widely supported WebP format -->
  <source srcset="image.webp" type="image/webp">
  
  <!-- 3. Final Fallback: Traditional JPEG for older browsers -->
  <img src="image.jpg" alt="Optimized showcase image" width="800" height="600" loading="lazy">
</picture>

Advantages of This Approach

• No JavaScript Required: The browser evaluates the type attribute, selects the most efficient format it supports, and downloads only that file.
• Prevents Layout Shifts: Setting explicit width, height, and loading="lazy" attributes on the fallback <img> element reserves layout space on the page, preventing Cumulative Layout Shift (CLS).

3. Automated CDN-Side Image Optimization

If you want to keep your HTML markup simple, you can offload image optimization to hosting platforms and CDNs (such as Cloudflare or Vercel).

These services read the browser’s incoming Accept request header (e.g., image/avif,image/webp,*/*) and dynamically transpile, cache, and serve images in the most efficient format supported by the client.

• Example (Cloudflare Images API): Requesting /cdn-cgi/image/format=auto,width=800/image.jpg instructs the CDN to automatically return a correctly sized WebP or AVIF file based on the client’s capabilities.

Conclusion

Optimizing your site’s images is a straightforward way to improve page loading speeds.

1. Standardize on WebP for general assets, and add AVIF for high-quality photos.
2. Use the HTML <picture> element to structure fallbacks from AVIF down to JPEG.
3. Consider using automated CDN optimizations to keep your markup clean.

Implementing these strategies will reduce your page sizes and speed up rendering times for your users.