The Glassblower's Steady Hand: On the Stable Shape of a Properly Sized Container

There’s a quiet, almost invisible art to ensuring a webpage doesn’t shudder and jump as it loads. We’ve all felt it—the sudden lurch as you’re about to click a link, only for an image or an ad to inflate the space beneath your cursor. In the workshop of front-end performance, we often speak of lazy-loading and efficient bundling, but one of the most fundamental techniques for ensuring layout stability is far more humble: setting explicit dimensions on your images and containers.

Think of it like a glassblower preparing a mold. They don't simply gather molten glass and hope for the best; they have a precise, fixed form ready to receive it. Without this mold, the glass would sag and bulge unpredictably. On the web, an <img> tag without its width and height attributes is that uncontained blob of glass. The browser sees it, knows it needs space for it, but has no idea how much until the file finally downloads and reveals its intrinsic dimensions. This moment of uncertainty is what causes the page to reflow, shifting content in a jarring dance.

The practice is disarmingly simple, yet its effect is profound. For every image you place, include the width and height attributes in your HTML. These values should reflect the image’s intrinsic aspect ratio. If your image is 800x600 pixels, set width="800" height="600". This act is the equivalent of telling the browser, "Reserve a space exactly this size." Even when CSS later resizes the image for responsive design—perhaps setting a max-width: 100%; height: auto;—the browser uses those original attribute values to calculate the required space and reserve it upfront. The layout is locked in.

This technique is the cornerstone of Cumulative Layout Shift (CLS) prevention. It’s a commitment to declarative stability. You are giving the browser a crucial piece of information it cannot yet know on its own, allowing it to construct a stable layout from the very first moment. It’s not about restricting your design; it’s about providing the necessary constraints for that design to unfold smoothly and predictably. The page breathes as one cohesive unit, rather than gasping for space as assets arrive.

Adopting this habit requires a shift in mindset, from reacting to content to anticipating its needs. It is the glassblower’s steady hand, confidently shaping the experience from the very first line of code. The result is a page that feels solid, intentional, and trustworthy—a seamless vessel for your content, built on a foundation that doesn't waver.

Notes & further reading

A few pages I came back to while writing this: