There was an era when every stylesheet had a favourite way to hide text. You wrote a real word inside an element, then contorted the CSS so a background image showed instead. On the mobile web, where bandwidth was precious and Retina logos were fashionable, this felt like craft. Mostly it was a workaround for a gap the platform hadn't yet closed.
Image replacement had a genealogy of increasingly clever hacks, each fixing the last one's sins:
text-indent: -9999px, shoving the text off-screen. Cheap, but it painted a giant invisible box and behaved badly right-to-left.text-indent refinement with white-space: nowrap and overflow: hidden, to stop the offscreen text from forcing layout.clip rectangle — the ancestor of the modern visually-hidden pattern./* The classic, now a curiosity */
.logo {
display: block;
width: 160px;
height: 40px;
background: url(logo.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}On small screens the appeal was real. You could keep a genuine text heading — good for SEO, selectable, translatable — while presenting a crisp bitmap logo. Swap the background in a media query and you had an art-directed header before responsive images existed. For a while, this was the responsible thing to do.
Every image-replacement hack was really an apology: sorry, the platform can't yet say "this is an image with this text alternative" cleanly.
The ground shifted underneath the technique. Three changes retired it almost completely:
<title> for accessibility, and needs no font-hiding gymnastics at all. Put the mark in the markup where it belongs.srcset and <picture>, the browser picks the right resolution for the device. The whole reason to smuggle images through CSS backgrounds — density switching — moved into HTML.<img alt> or a titled SVG does. Screen-reader users stopped being an afterthought.If the image is the content — a logo, a diagram — put it in the HTML with an honest text alternative:
<a href="/" class="logo">
<svg role="img" aria-label="Elementary Standards">…</svg>
</a>When you genuinely need to hide text for assistive tech only — an icon-only button, a skip link — use the modern visually-hidden pattern (a clipped, one-pixel box), not a five-figure negative indent. It keeps the text in the accessibility tree while removing it visually, which is exactly what those old hacks were fumbling toward.
Image replacement was good engineering under bad constraints. The constraints are gone. The honest lesson is that when you find yourself hiding real text to show a picture, the platform has probably grown a better way — and usually the better way is simply to write the image into the page.