The Potter's First Centering: On the Defining Pressure of an Early Skeleton

At the heart of every beautiful, functional piece of pottery is a moment of intense pressure. Before the walls can be raised or the shape refined, the lump of clay must be perfectly centered on the wheel. It’s a foundational act, one of applied, consistent force that seems to fight back before finally surrendering to a stable, symmetrical core. Without this centering, everything that follows is doomed to wobble, collapse, or fly off entirely. In our craft, we have a parallel: the act of defining our page’s skeleton before the clay of our content has even begun to spin.

The chaos of a slow-loading page often isn't about the total megabytes; it's about the uncertainty. Elements shift as images lazily pop into place, text reflows when a custom font finally decides to show up, and the user’s cursor hovers over a button that wasn't there a moment ago. We spend so much energy on compression and caching, yet we neglect the fundamental geometry of the page itself. We fail to center the clay.

This is where the simple, powerful practice of defining `width` and `height` attributes on your images becomes our centering tool. For years, we were taught to omit these, to rely on CSS for all sizing in the name of responsive design. But in doing so, we threw the baby out with the bathwater. The browser, upon fetching your HTML, would see an `` tag with a source but no intrinsic dimensions. It would render everything else, and only once the image file was downloaded would it understand its proportions, forcing the entire layout to abruptly compensate. This is the wobble. This is the uncentered clay.

The modern solution is elegantly straightforward. On every image, specify the `width` and `height` attributes. Not as rigid, pixel-perfect commands, but as the intrinsic aspect ratio of the asset itself. Then, in your CSS, you simply set `img { max-width: 100%; height: auto; }`. What you’ve done is give the browser a crucial piece of information before a single byte of the image is downloaded. It now knows the aspect ratio. It can calculate the precise amount of space the image will occupy and reserve it.

The result is a kind of visual stability that feels almost magical. The text below an image doesn’t jump down the page. The grid of a gallery doesn’t reconfigure itself mid-scroll. You have given the layout a skeleton. The pressure of defining that space early—of centering the potential of that image—eliminates the janky, unprofessional dance of cumulative layout shift. It’s a small, almost silent gesture, as deliberate as a potter’s first push into the clay. But it’s this gesture that allows everything else to rise from a stable foundation, creating an experience that is not just fast, but solid and trustworthy from the very first moment.

Notes & further reading

A few pages I came back to while writing this: