We all know that graphic headers are never a good thing: they add weight to page downloads, they hinder accessibility, and at times could even hinder usability.
But, if you work in a professional environment, then you know there are situations where you are not going to be able to avoid them…
So, when you have to replace text with a background graphic, what is the best approach?
Option 1: In-Page Image
<h2><img src="images/header-image.jpg" alt="This is the header text" width="150" height="50" /></h2>
Pretty simple, straight-forward stuff: the <h2> provides semantic value, the image displays your header as your wish, search engines (SEs) and screen readers can read your header image’s alt attribute for the actual header text, and if the user is browsing without images, the alt attribute will display the header text. However, this technique requires you to bloat the weight of your HTML with the lengthy mark-up of an image element for each and every header on the page, maintain a unique image for each and every header on the page and requires an additional HTTPRequest for each and every header on the page (now imagine if you had a page with 10-20 headers!). Additionally, if the user is browsing without images, IE will display it’s broken image marker, so you cannot reliably style the alt text…
Option 2: Background Image Replacement
<h2>This is the header text</h2>
h2{background:url('images/header-sprite.jpg') left top no-repeat;text-indent:-9999px;}
With this technique we still have the semantic value of the <h2>, the actual text is now in-page for SEs and screen readers, the text-indent now pushes the text off-screen allowing the background image to shine through, and you can now use an image sprite for all your headers, positioning the sprite where needed for various headers, meaning one image to maintain and one HTTPRequest for all your headers. However, if the user is browsing without images, they will see nothing but a big gaping hole in your page…
Option 3: In-Page Image Float
<h2>This is the header text <img src="images/header-image.jpg" alt="This is the header text" width="150" height="50" /></h2>
h2{position:relative;width:150px;height:50px;overflow:hidden;}
h2 img{position:absolute;z-index:1;}
On the surface this technique looks like the best-of-both-worlds, combining all the positives of Options 1 and 2 (you have the <h2>, the text is in-page, the image floats over the text, so if the user does not have images, the in-page text is still there) but with the added bonus of being able to apply CSS to the text so it would look “okay” even without the graphic header. However, this technique actually combines all the negatives of Options 1 and 2… You still have bloat of all the images elements (ples all the weight of the in-page text), you still have to maintain a unique image for each and every header, it still requires an additional HTTPRequest for each and every header on the page, and either the images alt text or IE’s broken image will now float over the in-page text, making it pretty unreadable…
Option 4: Floating Background Replacement
<h2>This is the header text<p></p></h2>
h2{position:relative;width:150px;height:50px;overflow:hidden;}
h2 p{position:absolute;z-index:1;background:url('images/header-sprite.jpg') left top no-repeat;}
Now this technique actually does combine all the positives from above, with the only negative being the additional weight of the empty <p>: the <h2> provides semantics, the text is in-page for SEs and screen readers, all the header images can be combined into a single image sprite (so one image to maintain and one HTPPRequest), and the image is applied as a background to the <p> and floated over the in-page text, so if the user is browsing without images, the text would simply shine right through, no alt text, no broken image marker…
So, yes, this last technique does have a tiny extra HTML (the empty <p>), but when you absolutely, positively, have to have a graphic header, doesn’t this make your life as easy as possible?
Happy coding,
Atg