The Potter's First Un-centered Clay: On the Wobbling Wheel of a Perfectly Sized Image Without an Aspect Ratio

Imagine a potter, hands slick with cool, grey clay, ready to throw their first pot. They have the perfect amount of material, the wheel is spinning at a steady, ideal speed, and their tools are laid out neatly. They press their thumbs into the center of the mound, but something is wrong. The clay is not centered. It wobbles violently, refusing to find its balance, and the potter must fight against the instability, applying pressure here and there, just to keep the form from flying off the wheel entirely. The process is fraught with tension and unpredictable movement.

This is the precise experience of a browser trying to render an image without a defined aspect ratio. We, as developers, often focus on the weight of the image—its file size, its format, its compression. We see a ‘perfectly sized’ 1200px by 800px JPEG, optimized to the kilobyte, and we pat ourselves on the back. We drop it into our HTML with a simple <img src="hero.jpg" alt="..."> and consider the job done. We’ve provided the clay and the wheel, but we’ve neglected to center it.

Without the width and height attributes, or better yet, the modern CSS aspect-ratio property, that image is just a wobbly lump of data to the browser. It knows it needs to load this resource, but it has no idea how much space to reserve for it in the document’s flow. The renderer must wait, holding the space open like a tentative question mark. Then, when the image finally loads, the browser gets its answer. The sudden injection of the image’s true dimensions forces a recalculation of the entire page layout, pushing text down, shifting elements sideways, and causing the entire content to jank and jump. This is the dreaded Cumulative Layout Shift (CLS), and it feels to the user exactly like that wobbly potter’s wheel—unsettling and unprofessional.

The Simple Act of Centering

The fix is an act of profound simplicity, a single gesture of consideration that brings instant stability. By explicitly defining an aspect ratio, either through the traditional width/height method (which the browser uses to calculate a ratio) or directly with the aspect-ratio: 16 / 9; CSS property, we give the browser a crucial piece of information before the image ever loads. We are saying, ‘Reserve this exact amount of space. The content is coming.’

Suddenly, the wobble is gone. The layout is stable from the first moment it paints. Text and other elements lock into their final positions, immune to the asynchronous arrival of images. The user’s experience is smooth, confident, and trustworthy. It is the difference between a potter fighting a losing battle with a chaotic mass and one who, with a single, knowing touch, finds the perfect center and begins to create something beautiful and stable from the very first rotation.

Notes & further reading

A few pages I came back to while writing this: