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

I am thinking to switch to CSS Sprite for my images. The main problem is I need something compatible with alt attribute. (Seo-purpouse)

What Can I use? The first think I thought was to use a standard

<img src="1x1.gif" class="mysprite">

The problem is I can't use that because that would like suspicous by google because of this:

<img src="1x1.gif" class="mysprite" alt="my keyword1">

<img src="1x1.gif" class="mysprite" alt="my keyword2">

<img src="1x1.gif" class="mysprite" alt="my keyword3">

(the same image "1x1.gif" with different alt text)

How we can solve this?

share|improve this question
add comment

3 Answers 3

up vote 3 down vote accepted

If an alt attribute is appropriate, then the image is content.

If the image is content, then it is not a background image, should not be applied with CSS and cannot be sanely turned into a sprite.

share|improve this answer
    
But still didn't reply my question. Which HTML Tag to use for css sprite? (ie: which tag to use that supports background-position and it's display:block-inline like IMG and it's crossbrowser ) –  dynamic Feb 25 '11 at 13:23
add comment

CSS sprites are not used with IMG tags. They are used with CSS (as in CSS sprites). They are typically used with the background-image CSS property and :hover pseudo class. When an action occurs, usually mouseover event, the image in the background is changed by moving the background image around to the appropriate image. Showing different button states (normal, active, etc) are a common example of this. Here are some good examples of this.

FYI, the alt attribute has very little SEO value and you shouldn't be worrying about it too much especially in the case of background images. If anything it sounds like you are over optimizing.

share|improve this answer
    
CSS Sprite are used to lower the HTTP Requests in my case. –  dynamic Feb 25 '11 at 13:21
    
you say that the alt attribute has very little SEO value. Can I confirm that it's still important from an accessibility point of view (assuming the image is content)? Cheers. –  Andy Feb 26 '11 at 9:47
    
@Andy it is definitely still important from an accessibility point of view –  John Conde Feb 26 '11 at 15:10
add comment

I have been reading a lot of articles about CSS sprites and I find that the distinction between content and background images is far from being as clear-cut as most articles make it seem.

I have four icons on one page that are there to make four corresponding paragraphs "punchier" (http://www.systhermique.com). Is this content or background?

In my opinion, it's a little of both, but I fail to see the drawbacks of using a CSS sprite for those images, although I'm inclined to use the image container strategy described above in order to keep the 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.