The Chef's Finished Consommé: On the Surprising Clarity of an Image Without a src
We are taught, from the first line of front-end craft, that an image must have a source. The <img src=“...”> is an immutable law, as fundamental as the opening <html> tag. Performance advice orbits this law: compress the file, specify dimensions, use modern formats, lazy load. But the law itself is never questioned. What if the most performant image, at times, is the one that deliberately points to nothing at all?
I am speaking, of course, of the empty src. Not an error, not a broken link, but a purposeful omission: <img src=“” alt=“...” />. To conventional wisdom, this is heresy. It is a recipe for 404s, for layout shifts, for a parade of console errors. And yet, in the specific, simmering context of a complex component that must paint its own interface first, this emptiness is not a void. It is a placeholder of perfect stability. It is the chef's consommé—a broth clarified of all particulate matter, leaving only the pure, intentional essence of the space it will occupy.
The Chaos of a Premise
The common advice is to preload, to eager-load, to ensure every visual asset is on its way. But consider a hero card: a complex stack of text, a background gradient, and a decorative image that is non-essential, a stylistic flourish. If that src is populated, the browser sees a task. It will fetch, it will decode, it will paint. It will do this while the critical layout—the text hierarchy, the padding, the button—is still being calculated. The result is not speed, but contention. The image, in its eagerness to arrive, becomes a noisy guest disrupting the careful setup of the room.
An empty src, paradoxically, brings instant silence. The browser parses the element, notes its dimensions (which you have explicitly provided, as you always should), and places it. It is a settled, inert block. The critical CSS paints the gradient, the typography snaps into place, the interactive elements become ready. The layout is stable from the first microsecond. The Cumulative Layout Shift score doesn't just improve; it becomes a non-issue for that component. The space is reserved, not with a frantic promise, but with a calm declaration.
Later, only after the main thread is free and the component is fully interactive, a sliver of JavaScript can gently assign the real source. The image loads quietly, a beneficiary of the now-idle network. It fills a container that is not going to move, because the container was finished long before. This is not 'lazy loading'—it is 'deferred dignification.' The image is not a foundational load; it is a final garnish.
This technique is not for every image. It is for the decorative, the supplemental. It requires discipline: explicit width and height are non-negotiable, and the eventual population must be handled with care. But it challenges the core dogma that a source must be declared at parse time. Sometimes, the highest performance is achieved not by fetching faster, but by deciding, with surgical precision, when not to fetch at all. It is the clarity of a decision, the stability of a space held open by nothing but intent. The finest consommé, after all, is defined not by what it contains, but by what has been meticulously removed.
Notes & further reading
A few pages I came back to while writing this: