Grow your CSS skills. Land your dream job.

Rethinking CSS Image Replacement

Published by Chris Coyier

When I say CSS image replacement, I mean taking a page element that isn't normally an image and turning it into an image. This is a very common trick and popular because of it's semantic meaningfulness and SEO benefits. A common place to use this is with a header tag.

The OLD Way

<h1 class="main-logo">
   CSS-Tricks
</h1>
h1.main-logo {
	width: 350px; height: 75px;
	background: url(images/header-image.jpg);
	text-indent: -9999px;
}

PROBLEM:
If you turn CSS off, this will just degrade into text. Not a bad thing, but just because someone has their CSS turned off doesn't necessarily mean they want their images turned off too.

The NEW Way

<h1 class="main-logo">
   <a href="#">
       <img src="images/header-image.jpg" alt="CSS-Tricks" />
   </a>
</h1>

WHY THIS IS BETTER:
With CSS turned off you can still display an image. With CSS and images turned off, you will get the ALT text from the image. You can even use a different image inside than you used for your CSS image, if there is a good contextual reason to do so.

REMAINING PROBLEMS:
Neither of these techniques are perfect yet. While the latter solves one piece of the puzzle, there is still one missing piece. That is CSS ON, images OFF. In this scenario you will get blank space instead of either text or an image. Not great. The other issue is turning these elements into links. You can wrap the header tag in an anchor element, but wrapping a block element in an inline element is bad form. Make sure you change your anchor link to block level if you do this. The other option is a javascript onClick event.

NOTE:
I'm sure this has been thought of and used by people before, so "old" and "new" are kind of subjective here.

View Demo

Thanks to Volkan Volkan Görgülü for the idea!

Comments

  1. I would think the old way and new ways would be switched around. The “new” way is how people did it before we all learned fancy ways to make images appear using CSS to overrides.

    Neither way is bad really, it’s truly a matter of personal preference. I do agree the second way is better from a usability standpoint but – say you want to change your logo image and you have several hundred pages? Instead of just editing the CSS file to change the image, you have to go through every page and change it (unless of course you are using some sort of include- but still).

    Plus, with the CSS way you can also just change a class on one page to substitute the image for a new one for a special event page, or a holiday page, etc.

    It’s a catch-22 basically because either way at some point with either css, images or both turned of one way will be better. I think the developer of the site will just need to really evaluate when building it what are the chances that someone browsing my site will turn off the CSS, or have images turned off. Or both.

  2. Perhaps this is a mouthful of a question, and it’s probably been answered elsewhere, but I’m interested in what you have to say about it –

    Why would anyone in their right mind purposely browse without images or CSS? I fully understand the benefits of image replacement when it comes to SEO and in many cases screen readers, but as far as general browsing, I see no benefit to removing CSS or images, and as such, I’ve never had the incentive to fully degrade-proof my own sites.

  3. A good page for alternative methods here.

  4. Another thing to consider is a technique I use for making printer-friendly stylesheets. The is actually the black/white logo image that will print friendly. It is set to display:none and is replaced by the color image in the screen CSS.

    So, in this case, I have to use the “old” method still. Which, if I make the images right, will be ok because with CSS turned off the print image will show and at least the logo will be somewhat legible, depending on how much thought I put into making each version.

  5. Permalink to comment#

    To my understanding, doing the “new” way defeats the whole purpose of the H1 tag – essentially a search engine will see it empty, not as a H1 – alt text.

    This is why I’ve started relying on the site stats to determine the “best” way to replace text (if needed) – mostly relying on javascript to do the replacements to prevent any conflicts with search engines – maximizing SEO and meaning that people with JS turned off get a less “cool” experience, but are served the same content.

  6. The above second line is supposed to read “The image tag is actually the black/white logo image that will print friendly.”

  7. BAX – Not everyone is concerned with SEO, though. Good content is the best SEO. Design should be secondary.

    That said, I understand what you mean. For those that ARE concerned with it, it might not be the best technique. But i believe search engines are smart enough to recognize the alt text of an image as the H1 text.

  8. Permalink to comment#

    This second technique is also beneficial for creating pages that print nicely as well- one can hide the image for web display, and use the h1 w/background image. Since backgrounds are usually not printed by default, you can unhide the image in the print.css, and voila! lovely printed logo image…

    Trav

  9. Why would anyone in their right mind purposely browse without images or CSS? … but as far as general browsing, I see no benefit to removing CSS or images, and as such, I’ve never had the incentive to fully degrade-proof my own sites.

    What about people browsing on smart phones? I use a Trio and I browse using the fast loading (or whatever it is they call it) which is basically no images and little or no styles. Just remember not everyone that’s on the internet is using a computer. And not everyone that is browsing on their phone is using an iPhone. ;-)

  10. I guess pingbacks don’t work here, but I respectfully disagree about wasting an H1 tag to wrap a logo.

  11. I basically agree.
    for things like a logo this strategy definitely suites the outcome. logos shouldnt change too often.
    if you have custom headers for each page then i see point in doing it through css.

    basically when you’re coding css, imo, you should just be mindful about what youre doing. if the image is part of the site content. then let it be that. if its part of the design do it in css. the logo might very well be part of your content. in fact in most cases it just might be or should be.

    i personally am not to concerned with somebody turning off the css. anybody imo that does that knows the effect they will receive and is doing so for a specific reason. they most likely expect to see most all images disappear.

  12. Permalink to comment#

    @Brad: I wish that was the case with the people I work with! No “shortcuts” like these are allowed, and the last SEO experts I discussed with said that google would essentially see a blank h1 tag – someone, please prove me wrong.

  13. @Lindsey: I think if this was in use on hundreds of pages on any site, it would certainly be “included”, making it a one-time-change either way.

    @Brent: I think you are right there are probably very few people sitting at computers browsing sites with CSS turned off, and if they were, they know full-well what they are doing and the consequences. I think this is more important for browsing on other devices. Mobiles devices often remove styling from pages in order to display them more quickly. This technique would be great for that situation, since your site’s branding could stay intact by displaying the logo still.

    @David: That is a nice roundup, thanks for the link. I notice non of them really solve the css on/images off scenario either. Elusive…. Javascript could probably do it, but the chances of that being turned off is even higher than CSS or images.

    @Brad: I really like that idea! Swapping the logo out to a B&W high contrast image is a great idea for getting better printed results.

    @BAX: I understand the potential SEO concerns. I have never claimed to be a SEO expert, but I can’t imagine that using this technique would be all that detrimental to your optimization efforts. Like Brad mentioned, not everyone cares about SEO and the best SEO is good content anyway.

    @Anthony: Pingbacks are working… just look above the comments in the “Discussion Elsewhere” section. I also respectfully disagree that this technique “wastes” a header tag. What if the element you are using this on is quite literally the header of a section? I think that makes perfect semantic sense using a header tag around the image.

    Regarding SEO: I would also really like to know if the ALT text is “good enough” for SEO. If I had anything do with it, it would be.

  14. James Miller
    Permalink to comment#

    I think this is kind of missing the point of image replacement, though. I mean, it’s perfectly valid to just use the logo as an image. Search engines will read the alt text, which will also be delivered to users who are not displaying images for one reason or another.

    The real boon of image replacement is to enable better typography for things like headers. You have to balance that, however, with maintenance. If you use images for headers, redesigning is no longer simply changing some CSS. You now have to recreate all your header images, or go back to plain (albeit styled) text. That’s why something like sIFR is a good compromise.

    Of course, if your site is small, replacing all your image headers may be no big deal. As with most things related to web design, it’s really a balancing act, and determining where you can give, so that you can take (hopefully more than you gave).

  15. Beau
    Permalink to comment#

    Interesting article! I never thought about what would happen if people had CSS turned off and most of my images were used in CSS. I like to keep most of them there unless it’s something like a logo, then I normally hardcode it into the HTML. I’m guessing if CSS and images are turned off, the alt-text is h1-sized since it’s in the h1 tag? I’ll need to try that…but I’m guessing it does, otherwise you wouldn’t need to wrap it in that h1!

    Regarding the SEO stuff, I’ve heard that alt-text is more useful for screen readers, but using the title attribute for all your img tags would add to SEO. Now, I’m not sure how true that is, as I’m no SEO guru, but I’m guessing it wouldn’t hurt to stick it in there. If you use both, I believe the title attribute overrides the alt when you do a mouseover, so it’s likely search engines would also pay more attention to those types of things.

  16. Great technique! I used so many times another technique that was something like

    title

    but I never liked it completely, to much complicate and not so “clean”
    this way you talk about is so simple and semantic, honestly I think for those who have disabled use of image it’s just such a small percentage and they are already used to use the web with so many limitations

  17. Zhuoshi
    Permalink to comment#

    I’m not too familiar with the images off thing, but if you use an image AND use CSS to set the background, wouldn’t they be able to see it even if they have CSS on but images off?

  18. @Zhuoshi: Yes, that would work for the CSS-on Images-off scenario, but then with the CSS-off, Images-on scenario you get BOTH the text and the image, which I think would be weird in most circumstances.

    That is very interesting though. I could see this working in the case of a logo with a design and typography that are separate. The CSS background image could be both the design and the typography and the markup could be and image of just the design and web text. Turning off CSS would leave the design and web text, and then turning images off would just leave the web text.

  19. Hey Guys.

    I’ve been looking around for a while now for a few answers on these issues, very glad to say i’ve found a few here. Some very interesting articles.

    Regards

  20. Anders
    Permalink to comment#

    You can place the bg image on top of the text by inserting an empty span tag first thing inside the h1. That way you can avoid the images off problem.

    css would then be something like this:
    h1 {position:relative}
    h1 span {position:absolute; top:0; left:0; width:100%; height:whatever height the bg image needs; background-image:url(/img/bg.gif) no-repeat;}

    not sure if i got the css 100% right from memory, but something along this line would do the trick. You would have to keep in mind though that using a transparent bg image would let the text shine through the image.

  21. Edwin
    Permalink to comment#

    Great technique, but my main question about this subject is: what does Google think about it when you make text invisible for users and replace it by images?

  22. The “technique” is something that was used before CSS was developed. It’s just straight HTML code. However, it could make it harder to swap images to something else because you have to either replace the image all together (rename old image change new image to same the images first name) or change the code to point to the new name image.

    The way I would do this is to have a seperate CSS for print. But, those who don’t have CSS enabled choose not to have it enabled and therefore they obviously don’t want images or styling. So I don’t see this as an issue, at all.

  23. Permalink to comment#

    I’m still leaning towards “JS enabled” for any/all image replacement – specifically for SEO concerns (and I know, SEO is still kind of a ‘black art’), as most people I work with are concerned (or should be, based on their business).

    I’d love to design/develop for all circumstances, but I’m really seeing the whole “design for all occasions” to almost be going a step too far – i.e. css on/images off.

    Really, I think I break it down as:
    *screen reader (no js, no css, alt tags for image, semantic markup)
    *CSS/images (no js, we add styling)
    *plus js (we get some cool experiences)
    *RIA (js, css, flash – the “full” experience)

    No duplicate/hidden content.

  24. Ozona
    Permalink to comment#

    I guess some people disagree http://murisfurder.com/?p=51

  25. Volkan Görgülü
    Permalink to comment#

    Before talking with Chris, actually I was thinking about informing other users with the possible uses of h1 tag as the main header of a page.

    Actually I agree with those who say the logo is a part of the content. So the logo should be coded with using the img tag.

    And if I need to change the logo I can just overwrite the older logo file.

  26. Permalink to comment#

    Thank you for this article.

    If somebody read all comments you can see two ways to solve this problem. Lindsey (first comment) said, the problem is to avoid waste time with hundrets of pages by change the logo. I think, here doesn’t help this methode (new way). In this situation i prefer the old way.

    If the webside small, i prefer the new way, because how often will change a company logo?

    Ralph

  27. Rob
    Permalink to comment#

    Screen readers and mobile devices may have problems with CSS and images, too. There is also a minority that browses with text-only browsers.

  28. Permalink to comment#

    say you want to change your logo image and you have several hundred pages? Instead of just editing the CSS file to change the image, you have to go through every page and change it

    Why not just replace the logo with the new one using the same name?
    Surely there’s no need for the old logo anymore.

  29. Permalink to comment#

    Jumping in kind of late here, but I found the article in a year-end recap from CSS-Globe…

    @Brent (why people would browse without CSS and/or images):

    Like some people said, phone browsers are a problem. There are other reasons, though. I’ve recently started re-purposing some old computers for use in my classroom.

    They are pretty old, and one of the best solutions I’ve found to get them up and running efficiently is Damn Small Linux with Dillo as a web browser. Dillo doesn’t support CSS (or at least it doesn’t support much), so in this case the students would be browsing with CSS off whether they like it or not.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".