Image replacement technique

It’s always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you’ve absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you’ve got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you’re a widget seller and you’d like to be found for this phrase in the search engines. You’re pretty set on it being an obscure font so you need to use an image:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

This is OK but there’s strong evidence to suggest that search engines don’t assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1>Buy widgets</h1>

Now, this obviously won’t use your obscure font. To fix this problem place these commands in your CSS document:

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

Be sure to change “image height” to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. Please note, this can cause accessibility issues as any user with images turned off won’t be able to see the text.

Advertisements

8 thoughts on “Image replacement technique

  1. I simply want to mention I am new to blogging and seriously liked your blog. Almost certainly I’m going to bookmark your website . You absolutely have beneficial well written articles. Regards for sharing with us your webpage.

  2. I merely wanted to thank you once more for the amazing web page you have built here. Its full of ideas for those who are really interested in this subject, specifically this very post. You really are all amazingly sweet plus thoughtful of others in addition to the fact that reading your website posts is an excellent delight if you ask me. And what generous treat! Ben and I will certainly have excitement making use of your points in what we need to do next week. Our checklist is a kilometer long which means that your tips will definitely be put to very good use.

  3. I enjoy you because of your entire effort on this website. My mom delights in doing research and it is simple to grasp why. All of us learn all concerning the compelling tactic you provide worthwhile secrets by means of this web site and as well inspire contribution from website visitors on that concept and our favorite girl is now understanding a great deal. Enjoy the remaining portion of the year. You have been conducting a good job.

  4. We are a bunch of volunteers and opening a brand new scheme
    in our community. Your website provided us with helpful info
    to work on. You have done an impressive activity and
    our whole community shall be grateful to you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s