The Potter's First Un-centered Clay

I remember the first time I threw a pot on a wheel. My instructor, a patient woman with clay permanently etched into the lines of her hands, told me the single most important thing was to center the clay. "If it's not centered here," she said, pressing her thumb into the spinning, wet mound, "everything you build on top of it will be unstable. It might look fine for a moment, but it will always, always wobble."

I thought of her words years later, watching a hero image on a site I was building load in a way that was technically perfect but fundamentally flawed. I had spent the afternoon meticulously following every rule. I had compressed it to a whisper, converted it to modern formats, and set up lazy loading with intricate `IntersectionObserver` logic. When I fired up the test on a throttled connection, I held my breath. The image appeared, sharp and beautiful, exactly when it should. A performance audit would have given it a perfect score.

And then the text below it jumped. It was a tiny, jarring movement—a fractional shift downward as the final dimensions of the image were calculated and applied by the browser. My perfectly optimized image had loaded without a defined container. I had forgotten to set the `width` and `height` attributes, to reserve the space. In my pursuit of a fast, lean payload, I had failed to center the clay.

That fractional jump was the wobble of an un-centered pot. It was the user’s experience, for one disorienting moment, being yanked out from under them. The content reflowed, the layout shifted, and the carefully constructed illusion of a stable, trustworthy page was broken. All my technical optimization was for nothing because I had ignored the foundation. I had given the browser a beautifully packaged image but no instructions on how to hold it steady.

Now, I see that `width` and `height` are not just attributes; they are the centering hands on the wheel. They are the silent, foundational work that allows the artistry on top to stand firm. They are the promise to the user that the ground will not move beneath their eyes. It is the most basic, most humble part of the front-end craft, and like centering clay, it is the thing that must be done right before anything else beautiful can happen.

Notes & further reading

A few pages I came back to while writing this: