The image pipeline is the performance budget
Almost every page that feels slow is slow because of its images. Everything else on the budget is rounding error by comparison.
Run any content site through a slow connection and the waterfall tells the same story. The HTML arrives, the CSS arrives, the fonts arrive — and then a single hero image spends four seconds arriving at a size no phone can display.
What a CMS can decide for you
An asset pipeline that knows the original dimensions can do three things a hand-written tag cannot:
- Serve a width the device asked for, rather than the width that was uploaded.
- Serve a modern format when the browser accepts one, and fall back when it does not.
- Crop around a hotspot the editor chose, so a 3:1 banner still has a face in it.
Dimensions are not optional
A responsive image without width and height reserves no space, so every image on the page is a layout shift waiting to happen. The aspect ratio is known at build time; there is no reason for the browser to guess it.
One image is eager, the rest are not
Exactly one image on a page should be fetchpriority="high" — the one already in the viewport. Marking three of them urgent is the same as marking none of them.
The part that is not technical
None of it survives an editor uploading a 12 MB screenshot as a thumbnail. Validation on asset size, and a description saying what the image is for, does more for a page-speed score than any amount of tuning further down.
Written by
Jordan Hale
Front-end Engineer
Jordan builds front ends that stay fast after launch, and spends most of that time deleting work the browser was never asked to do.
