Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Nowadays often what was accomplished with an <img> tag is now done with something like a <div> with a CSS background image set using a CSS 'sprite' and an offset.

I was wondering what kind of an effect his has on SEO, as effectively we lose the alt attribute (which is indexed by Google), and are stuck with the 'title' attribute (which as far as I understand is not indexed).

Is this a significant disadvantage?

share|improve this question
add comment

4 Answers

up vote 20 down vote accepted

CSS sprites should only be used for decorative elements for this reason - use <img> for elements which are specific to a page and use sprites for decorative elements which are not contextually relevant to the content presented.

If you need a button image for your navigation items it makes much more sense to add that image as a background on the navigation link rather than markup like this:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(i.e. wherever the image's content is redundant to text content on the page or the image's content could best be described as "decoration")

As an added bonus of separating site template elements as sprites, you'll later be able to change the site's "skin" by changing the stylesheet instead of overwriting the old design image files or rewriting all your HTML markup.

share|improve this answer
    
I agree with your points and would add that one of the main purposes/advantages of sprites is their faster load speeds for overall site performance. Faster page loads IS SUPPOSED to help with SEO rankings, so I think it's a matter of the right tool for the right job. –  digit1001 Dec 28 '10 at 15:59
    
@digit1001 - do bots like googlebot really load all of the resources associated with a page though? –  UpTheCreek May 5 '11 at 11:14
add comment

I tend to use sprites for decorative icons, they have nothing to do with the page as a whole so for SEO its fine in that case. Any set of images you have that are all the same dimensions that do not contribute to the meaning of the page are good candidates for CSS sprites.

share|improve this answer
add comment

The alt tag is overrated. I think too many people go out of their way to make sure they have alt tags on their pages. I don't believe it hurts you to not have one. It's just a matter of making sure if you have an img, you have an alt tag assigned to it.

I believe load time and site performance has a bigger impact on SEO overall than alt tags do and for every image request or HTTP request, the site is going to slow down. The purpose of a CSS sprite is to help minimize those requests and to speed up your page load time.

share|improve this answer
2  
The alt text is also used by screen readers. I think you might have a different opinion of alt text if you were blind. –  mikeTheLiar Apr 1 '13 at 16:05
add comment

You can use <img> tags with CSS sprites:

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png could be a 1x1 transparent pixel compressed to < 50 bytes.

Style:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

That way you get the performance optimization from sprites - and keep your alt tags.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.