HTML Course 12.4 Modern image formats (WebP, AVIF, etc. at a conceptual level)

12.4 Modern image formats (WebP, AVIF, etc.)

With the web’s growing need for performance, modern image formats such as WebP and AVIF have emerged to deliver higher compression ratios, support for transparency, animation, and improved visual quality compared to traditional JPEG, PNG, and GIF. This section dives into their features, benefits, browser support, and practical usage patterns in HTML.

Why New Formats?

• Smaller file sizes at equal or better visual quality → faster page loads.
• Support for alpha transparency (PNG-like).
• Built‐in animation (GIF‐like), but more efficient.
• Advanced compression techniques (predictive coding, entropy coding).

Overview of Formats

WebP

Introduced by Google in 2010. Supports lossy, lossless, alpha, and animation.

AVIF

Based on the AV1 video codec. Offers even better compression than WebP, with both lossy and lossless modes, alpha, and animation.

Feature Comparison

Browser & Tooling Support

• WebP: Supported by Chrome, Firefox, Edge, Opera, Safari 14+.
• AVIF: Supported by Chrome 85+, Firefox 93+, Opera, Safari Technology Preview.
• Tools for conversion:
  • cwebp, dwebp (WebP CLI)
  • avifenc & avifdec (libavif)
  • Online converters or build‐time plugins (Webpack, gulp, etc.)

Serving Modern Formats with <picture>

Use the <picture> element to deliver AVIF or WebP with fallbacks to JPEG or PNG. Browsers will pick the first supported format.

Responsive & Density‐Aware Images

Combine modern formats with srcset and sizes for responsive images:

Animation

Both WebP and AVIF support animation with smaller footprints than GIF. Example of an animated WebP:

Performance Considerations

• Encode at appropriate quality levels (e.g., quality=75–85 for WebP).
• Use lazy loading: loading='lazy' on <img> for off‐screen images.
• Serve correct Content-Type (e.g., image/avif, image/webp).
• Automate conversions in build pipelines to avoid manual errors.

Workflow & Tools

1. Keep a high‐quality master image (TIFF, PSD).
2. Run CLI converters or plugins:
   • cwebp: cwebp -q 80 input.png -o output.webp
   • avifenc: avifenc --min 30 --max 50 input.png output.avif
3. Integrate with bundlers (Webpack’s image-webpack-loader, gulp-webp).
4. Test in multiple browsers and validate file sizes.