The Boatwright's First Unchecked Plank: On the Unseen Warp of an Unspecified Image
Old man Hemlock, as we called him in the shed, wasn’t one for blueprints. His boat-building was a folk art, passed down through palms and fingertips. He’d run a hand along a plank of oak, feeling for the grain, the density, the story the wood had to tell. His greatest rule, one he’d mutter while tapping a caulking iron, was simple: "A space must know what's coming to fill it." Leave a gap in the hull without knowing the exact shape and dimension of the piece meant to seal it, and you’d invite a slow, inevitable warp as the wood adjusted to the wrong pressure. The boat would never sit true in the water.
We web craftspeople, hunched over our terminals instead of workbenches, commit Hemlock’s cardinal sin with startling regularity. We create spaces without telling them what’s coming. Specifically, we leave empty gaps in our layouts, placeholders for images that have yet to arrive. We write an <img> tag, point it to a source, and think our job is done. But without a width and a height, that innocent tag becomes a potential breach in the hull of our user’s experience.
The browser, desperate to be helpful, reserves a sliver of space for the incoming image. But it’s a guess, a sliver no deeper than a single line of text. It paints the page with this assumption. Then, the image file finally downloads—a panoramic landscape, a portrait of a person, a tall, slender icon. The browser realizes its reserved space is all wrong. In a jarring jolt, it shoves the entire content below the image downward. Text reflows, buttons jump from under a hovering cursor, and the user’s place on the page is lost. This is Cumulative Layout Shift in its most elementary, and most easily prevented, form. It’s the unseen warp of an unspecified image.
Hemlock’s solution was elegant in its specificity. Before setting a plank, he’d take its measure and mark the hull accordingly. The space and the plank became a matched set. Our digital equivalent is just as straightforward: always include the intrinsic width and height attributes on your image tags. These dimensions aren’t instructions for the final displayed size—that’s the job of CSS. Instead, they are a whispered confidence to the browser, a set of precise measurements that allow it to calculate the correct aspect ratio and reserve the exact amount of vertical space the image will eventually occupy.
It’s a small act, almost clerical. Yet, this simple gesture of completeness is what separates a jerry-built page from a craftsmansured one. It respects the user’s place, their attention, their sense of a stable reality. The page renders, the space is held, and when the image finally paints itself into the reserved gap, it does so without disturbing a single pixel of its surroundings. The boat, as Hemlock would say, sits true. The water remains still.
Notes & further reading
A few pages I came back to while writing this: