Time to first sizing โ one photo, three strategies
One ~3MB PNG, loaded three ways. Each panel has its own Run button โ click to feel the click-to-dimensions delay for each strategy. Naive <img src> can only tell you dimensions once the full transfer is decoded. Declared width/height attributes are instant but require the author to already know them. prepare() streams the response and parses the format header out of the first ~2KB โ dimensions arrive long before the image finishes downloading.
Cache-bust
Naive <img src>
Dims known—
Space reserved—
Image painted—
Visible shifts—
Native <img width height>
Dims known—
Space reserved—
Image painted—
Visible shifts—
Preimage prepare(src)
Dims known—
Space reserved—
Image painted—
Visible shifts—