Welcome to WebmasterWorld Guest from 54.161.116.225

Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

Google, Image replacement & CSS Sprites

     
9:48 am on May 26, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


There's been quite a few posts in the last few years about using CSS Image Replacement techniques, this has made some wary as they use words like display: none; visibility: hidden; etc. And the possibility has always been there for the technique to be abused. I know tedster has mentioned a few times that opinion on its usage even within Google has been split at times.

My opinion has always been that SE's could not simply penalise everyone using it at is a legitimate accessibility design technique, i.e. you can provide a text alternative for a graphic should users have CSS and/or Images turned off. If you can provide it for a user you can provide it for a bot.

Yahoo have been open about it and recommend using CSS Sprites as one way to speed up your pages, Google now seem to be doing the same.

I don't know if I missed this being reported here but Google are now using Image Replacement on their SERPs and it's a CSS Sprite [google.co.uk].

T.V Raman writes on the Google Blog: CSS sprites and navigation links [googlewebmastercentral.blogspot.com]

Having meaningful text to go with navigational links is equally important for Googlebot as well as users who cannot perceive the meaning of an image. While designing the look and feel of navigational links on your site, you may have chosen to go with images that function as links, e.g., by placing <img> tags within <a> elements. That design enables you to place the descriptive text as an alt attribute on the <img> tag.

But what if you've switched to using CSS sprites to optimize page loading? It's still possible to include that all-important descriptive text when applying CSS sprites; for a possible solution, see how the Google logo and the various nav-links at the bottom of the Google Results page are coded. In brief, we placed the descriptive text right under the CSS-sprited image

.
10:41 pm on May 26, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


What a great blog post - and there's even more in there: unobtrusive JavaScript, printer pages, XMLHttpRequests and so on. Nice to read an official Google word on these topics.

We've just begun to use CSS sprites with one client - and I never thought about this particular approach to introducing descriptive text.

Sprites are not very mainstream yet, but they certainly can help download speed by reducing the number of http connections. With Google putting more and more emphasis on the end user experience when they click on Google search results, all those factors that improve page speed seem to be potentially helpful in ranking.

7:01 pm on May 27, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


What a great blog post

Yes it was, and I saw the js stuff as well, but I've the Yahoo thread bookmarked for that one (they've got a better tut. It's more interesting that it seems to have slipped quietly out under the "accessibility" tag (on the G Blog) if this doesn't underline that accessibility and SEO friendly go hand-in-hand, I don't know what does

I know CSS sprites are the least worry and that they haven't been widely taken up yet, but that's partly due to FUD (IMHO) whereas for some the fact that using them cuts on http requests seems to bring a little more attention.

7:27 pm on May 27, 2008 (gmt 0)

Full Member

10+ Year Member

joined:June 24, 2002
posts:304
votes: 0


Very Cool. Excellent find Suzy!
Thanks tedster for pointing me to this thread. I'll give this technique a go on my next project! Something like this helps even more now that I'm working with properties that get huge amounts of traffic.

Edit- forgot to give Suzy kudos

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members