WebP and AVIF
WebP (Google, 2010) and AVIF (AV1 Image File Format, 2019) are modern raster formats that typically beat JPEG and PNG on compression at similar visual quality — especially AVIF for photos.
Quick comparison
| Feature | JPEG | PNG | WebP | AVIF |
|---|---|---|---|---|
| Lossy | Yes | No | Yes | Yes |
| Lossless | No | Yes | Yes | Yes |
| Alpha channel | No | Yes | Yes | Yes |
| Animation | No | No (APNG separately) | Yes | Yes (limited tooling) |
| Typical encode CPU | Low | Medium | Medium | High |
Responsive delivery
Use <picture> with AVIF first, WebP second, JPEG/PNG fallback. CDNs can transcode on the fly from a high-quality master.
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="…" width="800" height="600" loading="lazy">
</picture>
Encoding cost. AVIF encodes slowly; pre-build at deploy time or cache at the edge. Real-time user uploads may stay JPEG until a background job recompresses.