Avif Webp Fallback

AVIF WebP Fallback

Adds a real browser fallback for AVIF responsive images: for each AVIF , the module inserts a matching WebP (type="image/webp") and writes a sibling .webp file next to the AVIF image-style derivative.

Drupal core’s AVIF convert can fall back to WebP on the server when AVIF encoding fails. This module is different: it offers both formats in the
element so browsers that cannot decode AVIF still get a working image.

It works with standard Responsive Image styles and is especially useful with Container Query Images: that module toggles width groups via media, while the browser chooses AVIF vs WebP via type. Without Container Query Images, viewport media + type still work as usual.

Requirements: Drupal 11.1+, Image + Responsive Image, and a toolkit that can encode both AVIF and WebP.

Quick test: append ?noavif=1 to a page URL to hide AVIF sources and force the WebP path.