WebP and AVIF are the two formats every web developer should reach for first. Both beat JPEG and PNG on file size at comparable quality — often substantially — and both carry support across every major browser as of 2026. The question is no longer whether to use them, but which, and how to deliver a safe fallback.
WebP (Google, 2010) covers every practical web case: lossy for photos, lossless for flat colour, and an alpha channel JPEG lacks. AVIF is the harder-working option — its AV1 codec handles wide gamut and HDR, and at moderate quality it can beat WebP noticeably on photographs. The trade-off is slower encoding.
01Delivering both, safely
The <picture> element takes the first source it understands and ignores the rest:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" width="1200" height="800">
</picture>On the command line, ImageMagick ↗ and ffmpeg ↗ handle batch conversion cleanly; Squoosh ↗ lets you compare AVIF, WebP and JPEG live before committing. Strip EXIF before publishing. HEIC should be converted before it touches the web; TIFF and BMP have no role here at all.