Media that behaves

Start from evidence. Open your Network panel, filter to images, and sort by size. Write down the total. That number is your baseline and you will compare against it at the end.

For each image over about 50KB: generate three widths with a real encoder, sharp on Node, or ImageMagick, or squoosh-cli, in AVIF, WebP and JPEG. Write the <picture> element with <source type="image/avif">, <source type="image/webp"> and an <img> fallback, each with srcset and a sizes value that matches how your layout actually uses it.

Add width and height attributes to every single image on the page, even the small ones. These are not layout instructions, CSS still controls the rendered size, they are an aspect ratio for the browser to reserve space with. Then reload with the network throttled to Slow 3G and watch: nothing should move as the images arrive.

Add loading="lazy" to everything below the first screenful and to nothing in it. Then add fetchpriority="high" to your largest above-the-fold image, which tells the browser to get it before the other things competing for bandwidth.

Video, if you have any. Never autoplay with sound. Always set poster so there is something to look at before it loads. Use preload="metadata" rather than auto so you are not downloading a 40MB file for someone who will not press play. Add a <track kind="captions">, and if you do not have captions, that is a reason to write them, not a reason to skip the element.

Measure again. Same Network panel, same filter, new total. Record both numbers and the percentage in your repo. On a page that had not been through this, a sixty to eighty per cent reduction is normal, and seeing your own number is what makes this stick.