CSS Image Replacement, what’s up Matt?

So I’m a big fan of CSS image replacement, for several reasons, most importantly because it allows for a semantically correct page while having some text replaced with images, but also because I love sprites and I love using them well.

I’ve also always been in favor of the use of CSS Image Replacement for headings, while not wanting to fake the search engines, I’ve kept a simple rule: if you OCR the page, it should be exactly the same as when you read the HTML.

I’ve said so on Dave’s blog back in January ’08, and then, Matt Cutts agreed with me. Well, Dave pinged me today, and blogged it too, because in a video today on Youtube, Matt said something else:

Now Matt, how would you go about doing something like my menu, here on Yoast.com, without doing CSS Image Replacement? You know that thing, Speed that your colleagues are going for? Well so am I. My navigation looks like this (when shrunk heavily:)

Navigation

And the HTML for it looks like this:

<ul id="nav">
  <li id="a1"><a href="http://yoast.com/wordpress/">WordPress</a></li>
  <li id="a2"><a href="http://yoast.com/articles/">Articles</a></li>
  <li id="a3"><a href="http://yoast.com/tools/">Tools</a></li>
  <li id="a4"><a href="http://yoast.com/hire-me/">Hire Me</a></li>
  <li id="u1"><a href="http://yoast.com/advertise-here/">Advertise</a></li>
  <li id="u2"><a href="http://yoast.com/sitemap/">Sitemap</a></li>
  <li id="u3"><a href="http://yoast.com/contact/">Contact</a></li>
  <li id="u4"><a href="http://yoast.com/speaking/">Speaking</a></li>
</ul>

I think that’s a pretty cool use of CSS, HTML and the possibilities it offers to mark up websites in clean, semantic code, with a great look, while going for speed. I mean, how would you do that with alt tags?

I hope you agree Matt, because otherwise you’re contradicting yourself… And that even violates my own guidelines… It says “Google” in the text (notice the quotes?) and Google on the image (notice the lack of quotes?).* And by the way, the Google Webmaster blog said something else as well.

Maybe you were trying to be friendly to people and not make it too hard on them, or you didn’t feel like telling the complete story because that confuses people. But please, please, please, be aware that there are some SEO’s out there who actually trust what you tell them, like I do, and who don’t like to be disappointed twice in a month.

You took away PageRank sculpting as a valid technique, which was a technique you said had its merits, although it was only used by a few, now you’re going to take away CSS image replacement? A technique used by just about ANY decent web designer out there? I think a bit of clarification is needed here.

Otherwise I just might have to go with what Mikkel said on this one as well… He said this, on a post of yours back in ’06 about using text:

Matt, you know I allways use tons of text. Real text. All over my cloaked pages – and it works really well, thanks

* Update: as noted by Thijs in the comments, the quotes are added by Safari’s web inspector, they’re not in the source.

Tags: ,


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

52 Responses

  1. RosenstandBy Rosenstand on 25 June, 2009

    Hi Joost!

    Well put – and thank you for bringing it up. I can second your statement: “But please, please, please, be aware that there are some SEO’s out there who actually trust what you tell them, like I do, and who don’t like to be disappointed twice in a month.”.

    I look forward to see Matts take on this!

  2. John FauldsBy John Faulds on 26 June, 2009

    I mean, how would you do that with alt tags?

    You’d make the alt attribute exactly the same as the text from your example.

    You could even use images in the HTML in your example and still use the same single image by positioning the larger combined image in relation to the anchor enclosing it. I’ve had to do that recently because I’ve found that Opera has been messing up with the image replacement technique I usually use and I don’t like using the off-screen methods because people with images off see nothing.

    I’m not sure why Matt is saying that CSS methods are that much worse than using an image; possibly because he thinks he’s talking to non-technical webmasters for whom CSS IR techniques would be more complicated (which they are), or possibly because in the case of a company logo, you should actually use an image because a logo is more than just a representation of text, it’s actual graphic content.

    • Joost de ValkBy Joost de Valk on 26 June, 2009

      That would require a lot of inline styling or weird play with CSS though… My issue is that this has been a standard web technique for years now, and now Google comes and says you can’t do it…

      • John FauldsBy John Faulds on 26 June, 2009

        No, no inline styling and the CSS is no more weird than for any other image replacement technique.

  3. CJBy CJ on 26 June, 2009

    We need a directory of DOs and DON’Ts so we can keep track. Plus timelines of who said Do or Don’t.

  4. Chris WallaceBy Chris Wallace on 26 June, 2009

    While I employ this technique very heavily in my own work, I am sure Google frowns upon it because, well, that’s how it’s always been. Whether it is meant for harm or simply for semantic HTML, my understanding has ALWAYS been that hiding real text in ANY way is punishable in the search engines. Now, of course, you’re not going to get banned from Google for using CSS Image Replacement, but it’s not going to IMPROVE your SEO rankings. Just my two cents.

    • Colin McDermottBy Colin McDermott on 10 July, 2009

      Agreed.

      If the text isn’t visible on the page – you are running a risk.

      You can say to yourself: I am doing it for this reason, or that reason, but at the end of the day a bot will come along – see it as hidden text, and that bot/algo is the judge, jury and executioner.

  5. Eric KatzBy Eric Katz on 26 June, 2009

    Yeah I noticed the contradiction as well, almost every google site youtube included uses css for their logos.

  6. HirveshBy Hirvesh on 26 June, 2009

    Nice write up Joost! Google always nearly contradict themselves.

    btw, the reason I got interested in this article is that I myself wrote a roundup of the best image replacement scripts here:

    http://codefusionlab.blogspot.com/2009/06/5-image-replacement-techniques-for.html

  7. Trigg WilliamsBy Trigg Williams on 26 June, 2009

    You are correct, but if you go to http://www.google.com they seem to only use the alt tag as Matt recommended. If you listen to what he said in his video, it sounds as if you he is saying if you have an alt tag then use it since that what it is there for, but if you don’t have one then it is OK to do the CSS replacement technique as in your example?

  8. TimBy Tim on 26 June, 2009

    Now that is interesting.
    Thanks for pointing out the discrepancy and highlighting the legitimate use of text and imagery and css for SEO and semantic html purposes. I am still curious why the quotes are used on the hidden “google” text. That is too funny ;-)

    The general rule of OCR and HTML is quite conclusive in my mind. What would you say that Matt is trying to get at with this video? It does seem apparently limiting and aimed at the inexperienced designer while leaving others such as yourself in a lurch at how such a broad stroke undermines the efforts of those trying to serve up well written and designed web pages.
    Arghh!

  9. Eduard BlacquièreBy Eduard Blacquière on 26 June, 2009

    Amen! Great post, Joost, spot on!

  10. RonnieBy Ronnie on 26 June, 2009

    Great post indeed, and now it’s up to Matt!

  11. Thijs KuipersBy Thijs Kuipers on 26 June, 2009

    As a sidenote: the quotes (“google”) are inserted by Safari’s Web Inspector and have nothing to do with the actual page’s source.

    • Joost de ValkBy Joost de Valk on 26 June, 2009

      Thanks Thijs, updated the article :)

  12. BrentBy Brent on 26 June, 2009

    It seems to me that Matt was referencing the use of CSS to place “off page” text and not necessarily CSS image replacement.

    • Joost de ValkBy Joost de Valk on 26 June, 2009

      That’s one of the most common ways of doing CSS image replacement, using text-indent: -10000px;.

  13. Trigg WilliamsBy Trigg Williams on 26 June, 2009

    For ease of maintenance one should put the logo image as a background-image in css. In doing so there is no alt=””. So one would have to use a image replacement technique – I use the span technique.

  14. LuciBy Luci on 26 June, 2009

    Thanks for the interesting post! Funny about Google, lol!

  15. DustinBy Dustin on 26 June, 2009

    Hey Joost,

    Great post and one that I will retweet. I have used both methods (CSS Image Replacement and HTML Alt Attribute) and I cannot understand why Google is frowning on semantic coding. The CSS method seems neat/clean and accomplishes pretty much the same effect as Alt tags.

    We all know there is far greater flexibility in terms of design layout with CSS than there is using only HTML. Why not incorporate an additional method of delivering alt content? Duh!

  16. Richard HearneBy Richard Hearne on 26 June, 2009

    I said this over on DaveNs blog, but I really think this is more about the -9000px method. I’ve seen CSS replacement on too many enterprise-class sites for this to be an across-the-board change by Google. And being honest – if you’re still using the absolute positioning off the page technique you really need to scratch up on your CSS. Far more elegant methods now.

  17. Kevin EklundBy Kevin Eklund on 26 June, 2009

    Kudos to you for having the courage to confront Matt Cutts on this Joost.

    BTW, what software are you using to add the text and arrows to the image above?

  18. markBy mark on 28 June, 2009

    Excellent post. I asked a question on his blog post that contained this video and there was never a follow-up. I asked about legitimate “hidden text” – again, no response. Did you ever receive a response at all? What is the conclusion? Have you seen anyone get penalized by this?

    Getting real tired of this google back and forth. I took a long hard look at PR sculpting, listened to him initially, implemented within my blog and now Im hearing that it is no longer effective – becuase Google no longer agrees. WTF?

  19. Matt InertiaBy Matt Inertia on 29 June, 2009

    Our sites are featuring more and more image replacement as time goes on and its because the demand for high quality design that looks original.

  20. Jacob StoopsBy Jacob Stoops on 29 June, 2009

    Also, I like to use CSS-Image Replacement when I’m trying to use text that isn’t considered “web safe” in my design. I really don’t see how Google can knock people for this when there are so few web-safe fonts available to us as designers.

    Now if people are abusing it then I understand, but most designers just use it to get a little creative with the fonts.

  21. Dawn WentzellBy Dawn Wentzell on 29 June, 2009

    I’m having the same dilemma with using CSS sprite techniques and drop down menus (ie. Sons of Suckerfish) that position text off-screen. I’ve been looking for alternatives since Matt came out with this, and the only thing I keep finding is to use display:none instead. However, that negatively impacts accessibility, as screen readers will ignore anything set to display:none. The last thing I want to do is to choose between pleasing Google and making my sites accessible.

  22. AntonioBy Antonio on 29 June, 2009

    Hi all,

    I also use the indent technique but I think it would be much better if the alt of the logo counts as much as the text. It will ease thinks much more since there dozens of methods in internet for using imagesand it is quite difficult for a newbie to figure out how to do it…

    SEO experts can do many many things to still being placed in the first pages but thinks as using an image instead of text shouldnt be so bad for newbies…

  23. Alfred ArmstrongBy Alfred Armstrong on 30 June, 2009

    Google may say they frown on the technique but will their disapproval make any difference? Not unless they upgrade their bots to parse CSS, which seems unlikely.

    Of course in the event that someone reports your site and it is manually inspected they might choose to downgrade it for quality on this basis, but since there are so many sites using such techniques that also seems a bit of a stretch.

    Image replacement where the text on the image is identical to that replaced is surely unobjectionable. There are some accessibility concerns with some techniques and if Matt Cutts were to raise those I’d say “hear, hear”, but to drag SEO into the argument sounds like pointless FUD to me.

  24. Bill for Kruse Internet ServicesBy Bill for Kruse Internet Services on 30 June, 2009

    If I may, if you just routinely soak up what comes from Matt, uncritically, more fool you. I think Matt’s job has as much to do with misinformation as it does with information. You get the truth Google wants you to get, not the actual truth. I’ve written more at
    good search experience. My feeling is that what you think you get isn’t what you really get. You have to think how smart these guys are, sometimes there’s wheels within wheels :-)

    BB

    • Joost de ValkBy Joost de Valk on 30 June, 2009

      Hey Bill, don’t take me for a fool :) I always take everything ANY Google employee says with a grain of salt, but you have to keep in mind that this is what I get questions about from clients, and so do others…

  25. Patrick DalyBy Patrick Daly on 30 June, 2009

    Somebody better warn Apple or else I guess Google will penalize them, right?
    http://images.apple.com/global/nav/images/globalnavbg.png

    • SynchroniumBy Synchronium on 1 July, 2009

      Nice find! Somehow, I doubt there’ll be repercussions.

  26. Chris LorenzBy Chris Lorenz on 30 June, 2009

    Well I can understand what Matt is saying. For your company logo I don’t see any real advantage to using css image replacement. Alt will work fine if you are JUST placing your logo. That being said css image replacement is definitely a valid and semantic approach for many other obstacles to web design.

    I can’t think of a time when I am just placing a logo on a site that I have really had to worry about image replacement vs. an alt tag.

  27. SantiBy Santi on 30 June, 2009

    Matt Cutts tends to lie quite a bit lately. He not only says that negative indent is bad but also that they got pretty good at detecting it. Big lie! I can see loads of sites that use it extensively (and they are ranking for stuff like “[big city in the UK] estate agent”). Oh well… testing is the only true way to understand how Google works :)

  28. David AlexanderBy David Alexander on 1 July, 2009

    Hi Joost, thanks for bringing this to my attention. I am currently launching on thesis and was thinking how good it was to create a nicely designed dynamic menu, with alt etc, then i read this :o. CSS web design definitely benefits visually from image replacement / image maps. Oh well, will try and follow this closely. Really like the site design Joost. Will tweet this post :)

  29. murrayBy murray on 6 July, 2009

    Nice one catching the Google out. Ive allways used image replacement responsibly but im sure there are people out there abusing this -99999px

  30. Jacob RaskBy Jacob Rask on 8 July, 2009

    Technically though, a logo is an actual content image, a visual representation of a brand, and not a decoration (like a normal text / nav with a cooler font), and could very well be placed as an img tag instead of in the CSS.

  31. Bill SebaldBy Bill Sebald on 8 July, 2009

    For ethical SEO’s, who really want to “optimize” the relevancy of their site in a true, altruistic sense, it’s really getting frustrating when G speaks out of both sides of their mouth. I’m sure it’s not G’s big plan to do so, but It’s dizzying. They make it so hard to be an ally.

    I know it’s a tough position for Google to balance for the good guys and the bad guys, but there has to be a better way! It’s causing fires that only spit sparks and ash back at them (and their goals).

  32. Marcus HochstadtBy Marcus Hochstadt on 12 July, 2009

    As far as I understand this issue, it’s not about site-wide images (i.e., those you repeatedly use on each and every page) but about individual images used on one or two pages only.

    I know the word “logo” came out of Matt’s mouth, but it makes most sense to implement site-wide images using CSS while putting photos that are meant for one or two particular posts using the img tag including alt and title attributes.

    Make sense?

    —Marcus

  33. Jeroen van EckBy Jeroen van Eck on 16 July, 2009

    John Mu disagrees with Matt Cutts on this topic according to his contribution in the following thread: http://www.google.com/support/forum/p/Webmasters/thread?tid=7e81feadd88ba553&hl=en

    Did you ever get any official feedback from Google on this topic?

  34. Aaron BradleyBy Aaron Bradley on 16 July, 2009

    I’ve been following this debate closely since the original Dave Naylor post and exchange with Matt Cutts. It’s always seemed to me that if you replace image-rendered text with an exact machine readable equivalent then you’re not only doing nothing wrong, but you’re helping the search engines discover content relevant to user queries.

    The same goes for Flash textual replacement, and Google’s stand on this was the same mixture of humming and hawing, mixed messaging and equivocation until they “officially” gave the green light to sIFR.

    And now, more mixed messaging as SEO Rountable reports Google Gives Blessing To Image Replacement Techniques, citing Googler JohnMu. JohnMu’s advice is as clear as Cutt’s is equivocal.

    The two things that gall me about the Cutt’s video are: 1) his contention that img alt attributes are equivalent to text replacement (give me a freakin’ break) and; 2) that using something like a pixel offset is (quote) “hiding” the content. To this latter point it isn’t hiding the content, but exposing it, in the sense that its making it machine-accessible.

    Of course, at the core of all this is that Google – reasonably enough – doesn’t like spidering text that it can’t verify belongs there. In the case of CSS replacement, you’d have to be able to algorithmically compare accessible text with something like image content, and they’re clearly not there yet. But I think, and I believe Google thinks, that the value of spidering that text outweighs the spam exploits it opens up. Which is why they go through such contortions in their public messaging on this issue.

  35. Billige mobilerBy Billige mobiler on 6 August, 2009

    great post. i could really use this one.

  36. mobiltelefoner abonnementBy mobiltelefoner abonnement on 8 August, 2009

    Super nice post… really god points:)

  37. billig mobilBy billig mobil on 9 August, 2009

    I’m can’t agree with all of it, but for det most parts i think it’s a really god post..

  38. a-kasserBy a-kasser on 12 August, 2009

    Nice articel… please keep them comming.

  39. taletidskortBy taletidskort on 12 August, 2009

    A lot of good argument:) nice work..

  40. Billige mobiltelefonerBy Billige mobiltelefoner on 14 August, 2009

    very nice wordpress blog, i just love the design. some of the artikel i really outstanding..

Trackbacks