Images are still your biggest win

Every audit we run, the largest single optimization is still images. Not JS bundles. Not CSS. Not fonts. Images. And the fix is boring and repeatable.

Serve the format the browser wants

AVIF beats WebP beats JPEG on file size at equal quality, but not every browser wants AVIF. A <picture> element with the right sources lets each browser pick its own path, and cuts weight in half without touching design.

Size to the layout, not the source

A 2400px source served into a 400px slot is 6x more pixels than the browser will ever show. Generate a proper srcset from the layout (not from a static config) and let the browser choose.

            <Image
  src={hero}
  widths={[400, 800, 1200]}
  sizes="(min-width: 768px) 50vw, 100vw"
  loading="eager"
  fetchpriority="high"
/>
          

Make it the default

The best pipeline is the one the content team does not have to remember to use. Wire the transform into your CMS or your component library so <Image> is the only thing anyone reaches for.

The right thing has to be the default thing. Everything else decays.