WebP and AVIF: modern image formats with a fallback
WebP and AVIF produce much smaller files than JPEG and PNG at the same visual quality. How to convert your images and serve them with the picture element.
JPEG dates from 1992 and PNG from 1996. Both still work everywhere, and both produce files far larger than necessary. Two newer formats compress much better and are supported by every current browser.
The formats compared
| Format | Best for | Typical size against JPEG | Transparency |
|---|---|---|---|
| JPEG | Photos, as the universal fallback | Baseline | No |
| PNG | Screenshots and sharp graphics, as a fallback | Much larger for photos | Yes |
| WebP | Photos and graphics | About 25 to 35 percent smaller | Yes |
| AVIF | Photos | Often around half the size | Yes |
A 500 KB product photo in JPEG commonly becomes about 150 KB in WebP and less in AVIF, with no difference a visitor would notice. On a page with twenty such images, that is several megabytes saved.
Serve them with a fallback
The <picture> element lets the browser pick the first format it understands.
<picture>
<source srcset="/img/product.avif" type="image/avif" />
<source srcset="/img/product.webp" type="image/webp" />
<img
src="/img/product.jpg"
alt="Blue ceramic mug on a wooden table"
width="800"
height="600"
loading="lazy"
/>
</picture>
A current browser takes the AVIF. One without AVIF support takes the WebP. Anything older falls back to the JPEG. The alt, width and height attributes go on the <img> and apply to whichever file is chosen.
Converting your images
One by one. Squoosh, a free tool that runs in the browser, shows the result side by side as you adjust the quality.
On the command line.
cwebp -q 80 product.jpg -o product.webp
In a build script. The sharp library for Node.js converts and resizes in one pass.
import sharp from "sharp";
const source = sharp("product.jpg").resize({ width: 1600, withoutEnlargement: true });
await source.clone().webp({ quality: 80 }).toFile("product.webp");
await source.clone().avif({ quality: 55 }).toFile("product.avif");
This site does the same: its images are converted to WebP during the build.
Automatically. An image CDN or a framework image component can convert on request, based on what each browser says it accepts. You upload one original and never handle formats yourself.
Practical advice
- Keep the originals. Convert from the source file each time, never from an already compressed copy.
- Judge quality with your eyes. The quality numbers mean different things in each format. An AVIF at 50 to 60 often matches a JPEG at 80.
- AVIF encodes slowly. For thousands of images, convert them in a build step or a queue, not during a request.
- Photos gain the most. Logos and icons should be SVG, which stays sharp at any size and is usually smaller still.
- Test graphics with fine text. AVIF can soften small details at low quality settings. Raise the quality or use WebP for those.
The result
Changing formats is one of the largest performance wins for the least effort. Layout, markup and design stay the same, and the page gets lighter.
Format is one step of several. For resizing, responsive sizes and loading order, see image optimization for the web. For when images load, see native lazy loading.