I’m writing this article because I regularly find myself explaining this (somewhat) basic CSS maneuver to many people. I know that when I first started learning CSS this task befuddled me. However, looking back it’s definitely one of the more easy techniques to master. I find a lot of folks that want to replace text with an image do something like this:
<h1> <img src="blog-title.gif" alt="blog title" /></h1>So instead of the blog title appearing in plain text you have an image. While this techincally “works” it really doesn’t work. Mostly because now you have no text at all for Google to crawl, or for people to search, or for screen readers to read. The only audience this method works for is people who can see images and that excludes a lot of your desired audience. Google bots, people who can’t see well, and humans searching your site all will be hurt by the fact that no text at all is present. So generally speaking, if you want to replace text with an image you really don’t want to completely do away with the text, you just want to make it so seeing people can’t see it.
It should also be noted that it’s commonly believed to be a “best practice” to use real HTML text when you need text. This is opposed to, say, using an image of text rather than text itself. Text is preferred because it’s searchable, indexable, and you can cut & paste it. However, there are some times where using an image for text is preferred but this is suitable only for limited instances. Basically, you don’t want to be replacing large blocks of text with an image … bad idea. But sometimes you’ll want to replace a company name with an image so you can use a special font or something. OK, now that we have that covered, let’s move on.
In my toolbox I have two techniques that will replace text with an image. It should be noted that I will not go into sIFR here. Also, there are other methods of replacing text with an image but for the purposes of this article I’m only going to go into the two most simple ones.
Phark
This one, as far as I know, was invented by Mike Rundle and the name “Phark” is what the book CSS Mastery gives this technique, so I’ve begun using that title too. It solves the challenge of replacing text with an image in a way that screen readers can still handle. This method is the first way I learned, and I still use this method the most.
First, create your markup:
<h1> Blog title</h1>Then style it:
h1 { text-indent: -9999px; background: url(blog-title.gif) no-repeat; width: 100px; height: 50px;}What we’re doing here is basically just putting a background to the text and then pulling the text waaaaay to the left, off the screen. Incidentally, you should get in the habit of only pulling text to the left with a negative text-indent. Pulling the text in other directions will often work but sometimes it won’t and when it doesn’t you’ll end up scratching your head for hours only to remember “Oh yeah, Ben said to pull it to the left!”
FIR
The Fahrner Image Replacement technique was the second way I learned how to replace text with an image. I find that this is the most foolproof means to do so and if you’re a n00b to CSS and webdesign I’d just use this until you feel ready to move on (or if you become a professional web designer).
First create your markup. Wrap the text you want to replace in <span> tags like this:
<h1> <span>Blog title</span></h1>Second, you apply your image to the background of the text. Note that the width and height MUST be the exact same as the dimensions of the image you’re using!
h1 { background: url(blog-title.gif) no-repeat; width: 100px; height: 50px;}Third, and finally, you set the <span> to display: none; like this:
h1 span { display: none;}This method is super simple and I see it used all over the place. The only problem (as I’m told) is that many screen readers will categorically ignore (and not audibly reproduce) any text that is set to display:none; in the CSS. So if you use this method you can pretty much count on leaving some of your visitors out to dry.
There you have it. It’s really very simple to replace text with an image. Again, I would recommend you use the Phark technique where possible but I’ve been known to use the FIR technique in some instances. If this tutorial helped you please let me know.
