Image Replacement

Image replacement is a technique for replacing a text HTML element with an image.

A canonical example is using an image for a website's title. Instead of doing the following:

<h1><img src="logo.jpg" alt="Website Name"></h1>

The bare text element can be used:

<h1>Website Name</h1>

And the text can be replaced with the image using the Phark method of image replacement:

h1
{
    background: url(logo.jpg);
    height: 100px;
    text-indent: -9999em;
    width: 400px;
}

This has a number of benefits:

• Ensures the element is clear to users with a screen reader
• Maintains a separation of concerns between HTML and CSS