The Archivist's First Unlabeled Canister: On the Silent Decay of Unattributed Image Dimensions
There is a quiet room in the back of the municipal archives where the old nitrate film reels are kept. Each one is sealed inside a small, metal canister, and on the side of each canister, a meticulous hand has written its dimensions—the exact width and height of the fragile image contained within. This isn't just for identification; it’s a promise of stability. The archivist knows that without this simple, declarative act, the reels inside would be vulnerable, shifting and warping against each other in the dark, their form lost to time and pressure.
We have our own canisters in the digital archive of the web. We call them <img> tags. And for years, many of us, in our haste to build, have sent them out into the world like unlabeled film canisters. We dropped the image asset into our code but left off its most fundamental descriptors: its intrinsic width and height. We assumed the browser would simply figure it out. And it did, but at a cost.
Without those explicit dimensions, a browser must perform a frantic, silent calculation the moment the image file finally arrives over the network. It must parse the image, decode its true size, and then—violently—reflow the entire page layout to accommodate it. Text jumps, buttons shift under the user's cursor, and the entire experience feels unsettled, brittle. This is Cumulative Layout Shift (CLS), the silent decay of a page’s stability, and it is the direct descendant of an unlabeled canister.
The modern fix is so elegantly simple it feels like a return to that archivist’s wisdom. It is the width and height attributes, not just applied as presentational pixels, but used in their intrinsic form. By setting these attributes, we are effectively writing the dimensions on the side of the canister. We are giving the browser a crucial piece of information before the image itself has even begun to load. The browser can then reserve the exact amount of space needed, creating a perfectly sized placeholder. When the image finally arrives, it slots into its pre-allocated space without a single jitter, without displacing a single pixel of surrounding content.
It is a small act of preservation, a declarative gesture that speaks of care. It is the archivist pausing to label the canister, not for their own benefit, but for the integrity of the work itself and for the experience of whoever encounters it next. In a medium that often feels ephemeral, these small, stable declarations are how we build a web that endures, one that doesn't shift and warp beneath our users' eyes.
Notes & further reading
A few pages I came back to while writing this: