CSS Image Replacement, what’s up Matt?

by Joost de Valk on 25 June, 2009 at 22:41 52 comments

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:)

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... Because, well, the Google result pages look like this:

Google or "Google"

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.

PDF

Tags: CSS, Site Speed
Category: SEO
You can skip to the end and leave a response.

Liked this post?

Share it!

Never miss a post!

Subscribe to the newsletter now:

Or grab the RSS feed!

52 Responses to “CSS Image Replacement, what’s up Matt?”

by Rosenstand on 25 June, 2009 at 23:59

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!

by John Faulds on 26 June, 2009 at 01:33

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.

by Joost de Valk on 26 June, 2009 at 05:32

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...

by John Faulds on 26 June, 2009 at 07:41

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

by CJ on 26 June, 2009 at 01:43

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

by Chris Wallace on 26 June, 2009 at 02:39

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.

by Colin McDermott on 10 July, 2009 at 12:18

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.

by Eric Katz on 26 June, 2009 at 02:52

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

by Hirvesh on 26 June, 2009 at 05:26

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

by Trigg Williams on 26 June, 2009 at 05:49

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?

by Tim on 26 June, 2009 at 07:24

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!

by Eduard Blacquière on 26 June, 2009 at 08:45

Amen! Great post, Joost, spot on!

by Ronnie on 26 June, 2009 at 09:59

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

by Thijs Kuipers on 26 June, 2009 at 10:29

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

by Joost de Valk on 26 June, 2009 at 10:37

Thanks Thijs, updated the article :)

by Brent on 26 June, 2009 at 13:16

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

by Joost de Valk on 26 June, 2009 at 13:17

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

by Trigg Williams on 26 June, 2009 at 16:40

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.

by Luci on 26 June, 2009 at 16:48

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

by Dustin on 26 June, 2009 at 17:09

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!

by Richard Hearne on 26 June, 2009 at 17:09

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.

by Kevin Eklund on 26 June, 2009 at 18:19

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?

by mark on 28 June, 2009 at 13:26

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?

Pingback: Geografische locatie hosting heel belangrijk voor goede rankings

by Matt Inertia on 29 June, 2009 at 11:07

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.

by Jacob Stoops on 29 June, 2009 at 14:51

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.

Pingback: WordPress.Com Text Widget « NetWorks! Boise

by Dawn Wentzell on 29 June, 2009 at 18:07

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.

by Antonio on 29 June, 2009 at 22:48

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...

by Alfred Armstrong on 30 June, 2009 at 13:33

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.

by Bill for Kruse Internet Services on 30 June, 2009 at 14:15

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 :-)

by Joost de Valk on 30 June, 2009 at 19:48

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...

by Patrick Daly on 30 June, 2009 at 14:51

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

by Synchronium on 1 July, 2009 at 11:20

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

by Chris Lorenz on 30 June, 2009 at 18:27

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.

by Santi on 30 June, 2009 at 19:55

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 :)

by David Alexander on 1 July, 2009 at 08:01

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 :)

by murray on 6 July, 2009 at 00:16

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

Pingback: Google, te rog, nu ne lua CSSul!

by Jacob Rask on 8 July, 2009 at 10:34

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.

by Bill Sebald on 8 July, 2009 at 17:53

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).

by Marcus Hochstadt on 12 July, 2009 at 16:15

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

by Jeroen van Eck on 16 July, 2009 at 13:54

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?

by Aaron Bradley on 16 July, 2009 at 14:15

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.