2

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?

Improve this question

3 Answers 3

Reset to default
5

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.

Improve this answer
3
  • CSS Sprite are used to lower the HTTP Requests in my case.
    – dynamic
    Feb 25, 2011 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, 2011 at 9:47
  • @Andy it is definitely still important from an accessibility point of view
    – John Conde ♦
    Feb 26, 2011 at 15:10
3

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.

Improve this answer
1
  • 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, 2011 at 13:23
0

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.

Improve this answer

Your Answer

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

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