The Weaver's Unraveled Selvage: On the Unseen Edge of a Properly Sized Image

In the quiet corner of a workshop, a weaver secures the edge of her tapestry with a tightly bound selvage. This reinforced border, often overlooked in the final piece, is fundamental. It prevents the entire work from fraying, from losing its shape and integrity under its own tension. It is the first line of defense against unraveling.

On the web, an unsized image is a tapestry without its selvage. It is a raw edge, a loose thread waiting to be pulled. We upload our beautiful, high-resolution photographs, often from cameras with sensors the size of a postage stamp, and drop them into our pages without a second thought. We assume the browser will handle it. And it does, but at a cost.

When an <img> tag lacks explicit width and height attributes, the browser is left guessing. It must first fetch the image—downloading often megabytes of data—before it can understand its intrinsic dimensions. During this brief but critical moment, the image occupies no space. The surrounding text and components are rendered, the page is ‘loaded’ in the user’s mind, and then—the jolt. The image finally arrives, the browser calculates its size, and a block of content is violently shoved downward to make room. Buttons jump under cursors, paragraphs leap from view. It is the digital equivalent of a frayed edge giving way.

This act of reserving space, of weaving in that initial selvage, is the simple act of providing width and height. These attributes, often dismissed as archaic or redundant in the age of CSS, are not about visual presentation. They are the blueprint the browser’s rendering engine uses before a single pixel of the image is downloaded. They describe the aspect ratio, the proportional relationship between width and height. With this tiny piece of information, the browser can instantly calculate and reserve the precise amount of vertical space the image will eventually occupy.

The result is not a faster download, but a profoundly more stable experience. The content around the image settles into its final position from the very first moment. There is no jump, no shift, no moment of disorientation for the visitor. The page feels solid, reliable, and whole from the instant it paints to the screen. It is a quiet, almost invisible act of craftsmanship. Like a well-woven selvage, it is a structural integrity that goes unnoticed precisely because it does its job so perfectly. It is the commitment to finishing the edge, to ensuring that the beautiful tapestry of your content holds its form, from the first load to the last.

Notes & further reading

A few pages I came back to while writing this: