Image Replacement

CSS Image Replacement

This technique should only be used for headings (h1..h6 elements basically); it should not be used for the body text.

WHAT?

Image replacement is the process of replacing the text in a heading element with an image that has the same text. This replacement is all done through CSS. Image replacement does not mean that you don’t have to style text with CSS. You should still add font-family, font-size and color etc.

WHY?

There are a few problems that Image Replacement (IR) addresses: Problem 1: Users can only see fonts they have installed on their computers. But sometimes you really want them to see a particular font. Problem 2: Using an image element (<img>) instead of text add problems: the text is not as accessible to screen readers, it is not searchable and printing can be a problem. Solution: With IR there is both the text so that the content is searchable (indexed by search engines) and an image so the user sees the exact font you want them to see.

WHY NOT?

IR is not all good. There are some reasons not to use it:

  • Since 2010 browsers have been able to show web fonts well which greatly reduces the need for IR.
  • If the user has images turned off and CSS turned on in their browser then they won’t be able to see your image and depending on your IR technique, they might not be able to see the text either.
  • Depending on the technique you use people using screen readers may not have the text read to them.
  • You have to create separate images for each title you will be replacing.
  • You have to write CSS to do the replacement for each heading
  • Depending on the technique you use, you may need to add extra divs or spans to your HTML. This adds to the file size and adds markup that isn’t related to the meaning of the content (not semantically correct).
  • Using images means more data to download for the page

HOW?

The basic idea is that you use CSS to hide the text in the title and then add a background image with the same text in the font you want. There are a number of ways to accomplish this. Some set the text to display:none, some indent it so much it moves off screen, others add an extra span that gets placed over the text, … you get the point. Some of them solve some of the issues mentioned before but none solve all of the issues. For a comprehensive list of IR techniques visit this site: http://mezzoblue.com/tests/revised-image-replacement/ In this technique you start with the normal heading  element like h1, h2, h3. This element should have the title written inside of it. There are a number of versions of the technique but they all involve the same basic steps:

  1. Style the heading with CSS as normal
  2. In a program like Photoshop you create an image of the heading you want in the font you want. Each title will need a separate image.
  3. Export the images as png or gif files.
  4. Add a unique id to each of the headings you will be replacing. This id will be used to match the correct background images with heading elements.
  5. Add the IR CSS (visit http://mezzoblue.com/tests/revised-image-replacement/ for the CSS).

Dave Shea, an expert an author on CSS and Web Design, has complied a list of some of the techniques on his website. I’ve mentioned this site a couple of times already but it is one of the best places to see the techniques in action. Also looking at the techniques and trying to figure out how they work is a good way to improve your CSS knowledge.  Again, here is the link to the list: http://mezzoblue.com/tests/revised-image-replacement/

 

This three part video tutorial outlines everything described on this page and shows how to apply IR step-by-step:

Part 1: What, Why, How?

Part 2: Using Image Replacement, Step-by-Step

Part 3: Using Image Replacement, Step-by-Step (adding more headings)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>