Images remain the heaviest thing on most pages—and the cheapest thing to fix, because the win requires no refactor. AVIF is supported everywhere that matters and lands at roughly half of JPEG’s weight at the same visual quality. Photographic hero at 200KB instead of 450KB, with better gradients and real alpha support.

The stack, in order

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..."
       width="1200" height="800"
       fetchpriority="high">
</picture>

Three attributes do disproportionate work. width/height let the browser reserve space—that is your layout shift fix. fetchpriority="high" on the LCP image tells the browser to stop politely queueing your most important pixel. And everything below the fold gets loading="lazy" instead.

“The fastest image is a smaller image. Every other optimisation is a rounding error.”

Practical calibration

AVIF rewards aggressive compression—quality 50 in most encoders looks clean where JPEG would be visibly blocky; do not encode at quality 90 out of habit. Serve responsive sizes with srcset/sizes so phones stop downloading desktop pixels. And let tooling own the pipeline—image CDNs or build plugins that emit the whole format ladder automatically. Set it up once; every image you ever upload afterwards arrives optimised.