What is Image Replacement?

No Comments

I mentioned the phrase ‘Image Replacement’ in my interview with Blair Millen. A few days later I was asked what this was. So in response to this ‘web wondering’ I will briefly explain what Image replacement is, how it looks on screen and provide links to resources for further reading.

What is Image Replacement?

Put simply, Image Replacement is the act of using CSS to replace an image with text should that image not be displayed. Although there is the HTML alt attribute (the text you see when you hover over an image) which does something similar and that is screen reader friendly, Image Replacement makes for a far more ‘friendly’ user experience.

Although the Alt attribute is great for explaining what an image is, it degregates the user experience somewhat if the image is not visible and the tiny Alt attribute is displyed.

See Image Replacement in action.

To demonstrate this visually, look at the three images below. On the left is our first website with the images visible and on the right they have been turned off. On the final image underneath, the same site is displayed with images off and no Image Replacement. You can quite clearly see the difference in the visibility of the text with and without the image replacement technique.

Image Replacement Examples

There’s no easy fix.

There are loads of techniques out there from the Fahrner technique to the Leahy/Langridge to the Phark technique (links coming later) and they each come with their own pros and cons. For example:

  • some are (ironically)  not accessible for screen readers,
  • some require the use of extraneous mark up,
  • some display nothing when images are off and CSS in on.

Finding a solution:

While it can be argued that Image Replacement may not be necesary it may be something that you do want to cater for on your accessible website.

With this article we do not intend to go over each and every option available to you. However, you will find a whole host of Image Replacement techniques and further reading at the links below.

http://css-discuss.incutio.com/?page=ImageReplacement

http://www.mezzoblue.com/tests/revised-image-replacement/

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

Fields marked with an * are required

More from our blog

See all posts