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?

4 Answers 4


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" /> 

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

  • 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, 2010 at 15:59
  • @digit1001 - do bots like googlebot really load all of the resources associated with a page though?
    – UpTheCreek
    May 5, 2011 at 11:14

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.


#someSprite {

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


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

  • I'm pretty sure if google can compose a search engine with complex processes to rank and index 30 trillion pages, it can detect 1x1 pixel alt assertions. Feb 2, 2016 at 12:53
  • 1
    @Ricky B It's not whether they'll detect it, but if they bizarrely penalise you for it, which would be odd as they'd be penalising you for reducing page load time and number of requests, which is something they tend to encourage :) Feb 2, 2016 at 17:31

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.

  • 6
    The alt text is also used by screen readers. I think you might have a different opinion of alt text if you were blind. Apr 1, 2013 at 16:05

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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