Library code snippets
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.
Related articles
Related discussion
-
Inserting checkbox values into one field
by ramsenthil2000 (1 replies)
-
How to do we process these things like web hosting?web development?
by ephraimgasel (0 replies)
Related podcasts
-
Top Web Design Mistakes
Pete LePage is Product Manager of Internet Explorer Developer Division and he doesn’t want your web site to stink. Sharing from his talk given at TechEd 2008, Pete highlights 10 common web design mistakes and tells you how you can bypass the same blunders. Pete also tells us how future features o...
Events coming up
-
Jul
29
July Web Design Meetup
Gig Harbor, United States
Anyone interested in web design or development can attend: whether you're a website owner, a full or part-time designer or developer, or a student. We're meeting at the Pierce County Library again since they have a large meeting room and free wireless access. Please RSVP if you plan to attend. Agenda We'll have a helping of our normal, free-form discussion, but we're also planning to have a few highlight discussions, which will be announced closer to the meetup.
This thread is for discussions of Image replacement technique.