The image pipeline nobody designed
Formats, responsive sources, transformation at the edge, lazy loading, and why images are usually the largest paint on the page.
On most content sites the largest contentful paint is an image, which means the image pipeline is the performance strategy whatever else you do. The chain is: pick the right format, generate the right sizes, let the browser choose between them, reserve the space before it arrives, and load the ones below the fold later. Skip any link and the others stop paying.
srcset offers the browser candidate files; sizes tells it how wide the image will be rendered at each breakpoint, which it needs before layout to make the choice. Get sizes wrong and it will confidently download a 2000-pixel file for a 300-pixel slot. Width and height attributes, or an aspect-ratio, let the browser reserve the box, which is the difference between a page that settles and one that jumps as each image lands.
Transform at the edge rather than committing variants to your repository: a URL-driven image service resizes and re-encodes on demand and caches the result, so a new breakpoint is a query parameter rather than a build step. Then be careful with lazy loading. Applying loading="lazy" to the hero image is a common own goal. It delays exactly the image the metric is measuring, and it is a one-word fix in the wrong direction.
You should now be able to
- Choose formats and sizes from the layout rather than by habit
- Explain what srcset and sizes tell the browser
- Stop images from causing layout shift or delaying the largest paint
Loading…