The Calligrapher's Spilled Ink: On the Unforseen Blot of an Intrinsic Sizing

A reader recently wrote in with a question that stopped me in my tracks. They had meticulously optimized their site: images were sized and compressed, fonts were efficiently loaded, and Core Web Vitals were, by all standard metrics, in the green. Yet, they reported a persistent, maddening flicker on a particular page—a product gallery—that they simply couldn’t diagnose. "It feels," they wrote, "like the page is being laid out twice. It's fast, but it stutters." The culprit, it turned out, wasn't in the usual suspects, but in a quiet, often-overlooked assumption we make about the most basic element on the page: the image itself.

We pour so much energy into ensuring images are the right format and file size, but we often neglect to tell the browser how much physical space they will occupy. We lean on intrinsic sizing, letting the image's own dimensions dictate the layout. It seems logical, even respectful to the asset. But the browser, in its eager rush to paint something—anything—to the screen, makes a bargain. It will render the text and the boxes it understands, and when the image finally arrives, it will shoehorn it in, often displacing everything around it. This is the spilled ink: the unforeseen blot of content suddenly rewriting the page.

The problem is one of sequence. Without explicit dimensions, the browser has no scaffolding. It’s like a calligrapher starting a manuscript without ruling their lines. They might begin a letter beautifully, but when they realize the space is wrong, the elegant stroke becomes a messy correction, a blot that mars the entire composition. Similarly, a paragraph of text renders, but the moment a tall, intrinsic-sized image loads below it, the text is pushed down, buttons jump aside, and the user’s focus is shattered. This is the very essence of Cumulative Layout Shift (CLS), but it’s a flavor of it that feels particularly preventable, a self-inflicted wound.

The Discipline of the Reserved Space

The antidote is a simple but profound act of discipline: reserving the space. It’s the practice of explicitly defining an image’s aspect ratio in your CSS, creating a placeholder box of the exact proportions the image will fill. It feels counterintuitive at first. We’re adding code, ostensibly making things more "complex." But what we are really doing is giving the browser a crucial piece of information upfront. We are ruling the lines on the page before the ink touches it.

This practice transforms the loading experience. The browser now knows, with certainty, that a 4:3 image will occupy a specific footprint. It can render the surrounding text, the buttons, the borders, all in their final positions. When the image file finally downloads, it simply fills the reserved space like water pouring into a glass. There is no shift. No stutter. The layout is stable from the first moment. The user’s attention remains on your content, not on the browser’s struggle to accommodate it.

So, the next time you find yourself battling a flicker that logic says shouldn’t exist, look past the file sizes and the loading strategies. Look at the humble image tag. Have you given the browser the dimensions? Have you ruled the lines? It’s a small, almost clerical detail, but it’s the difference between a page that feels hurried and chaotic, and one that unfolds with the quiet, confident grace of a well-planned composition.

Notes & further reading

A few pages I came back to while writing this: