Drop zone — inline images from Blob input
Drag any images from your desktop into the drop zone. Each file is a File — a Blob, no network, no URL to measure from. The left panel inlines each file as <img height="56"> with no width; the browser knows the height but not the width until the bytes decode, so text to the right of each image shifts. The right panel runs prepare(file) — the byte-probe path, ~5ms per file — and writes the resolved width into the <img> before it's inserted. Text around it never moves.
Drop image files here — or
PNG, JPEG, WebP, GIF, BMP, SVG. Larger files make the delta more visible.
Naive inline <img>
Images dropped—
Images that resized after insert—
Strategyonload — width unknown until full decode
Preimage prepare(Blob)
Images dropped—
Images that resized after insert—
Strategybyte-probe — width set before insert