Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
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.
alt text is also used by screen readers. I think you might have a different opinion of alt text if you were blind.
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.
