The Baker's First Unmeasured Flour: On the Volatile Rise of an Unset Image Aspect Ratio
Every baker knows the quiet terror of an unmeasured ingredient. A careless scoop of flour, a haphazard pour of milk—these small, seemingly insignificant acts can cause a carefully planned confection to collapse in the oven. The same precise anxiety exists in our craft, often stemming from a similarly humble source: an image without a defined aspect ratio.
We place an image on the page. It is, in its raw state, a block of potential content, much like a scoop of flour is potential cake. But without the `width` and `height` attributes explicitly set in the HTML, the browser has no idea how much space to reserve for it. The text renders, the user begins to read, and then—the image arrives. The browser, suddenly understanding the true dimensions of this visual element, must hurriedly carve out the correct amount of space. It pushes the entire subsequent layout downward in a jarning, clumsy shift. The reader loses their place, a button jumps under their cursor, and a tiny moment of frustration is born.
This is the Cumulative Layout Shift in its most common, most preventable form. It is the baker’s cake, sunken in the middle because the flour was never properly measured. The fix is almost laughably simple, a trowel of mortar for a foundational crack: always set the `width` and `height`. This ancient, often-ignored HTML practice is the single most effective way to tell the browser, “Reserve this space. Hold this ground.”
And yet, we often skip it. We assume modern responsive images and CSS will handle the proportions, which they will, but only after the initial, unstable render. By providing those intrinsic dimensions, we give the browser the blueprint it needs to calculate the page’s layout correctly from the very first pass. It’s the difference between building a shelf for a known weight and trying to hastily reinforce it after the book has already been placed.
This small, habitual act of defining an image’s aspect ratio is not a complex optimization or a new API to learn. It is a return to a fundamental discipline, a quiet agreement with the browser to build a stable, predictable experience. It is the baker taking the extra second to level the flour in the measuring cup, ensuring the final result rises to meet, and never startle, the consumer.
Notes & further reading
A few pages I came back to while writing this: