Picking an image format on a static site is a trade: an encoding cost you pay once at build time against a transfer saving you collect on every request. It is tempting to standardize on a single format, but after measuring, the answer for me was to use both.
The compression-versus-time trade-off
Encoding the same source photos to the same subjective quality, AVIF came out roughly twenty to thirty percent smaller than WebP. Its encode time, however, was several times longer. With a handful of posts this is invisible; once every article carries a cover image, it starts to show up in build times.
My working rule
- Photos and images with gradients get AVIF first
- Line art and flat diagrams stay lossless WebP, or simply remain PNG
- The
picturefallback chain stops at WebP; I no longer ship JPEG
Takeaway
Which format wins depends on the material, so the fastest route is to pick three representative images and measure. Once the rule is written down, the next post costs no decision at all.