: Are CSS sprites bad for SEO? 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'

@Hamm4606531

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.

Vote Up Vote Down

@Hamaas447

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.

Vote Up Vote Down

@LarsenBagley505

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.

Vote Up Vote Down

@Cody1181609

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.

Vote Up Vote Down