Is this an abuse of CSS sprites?

[simbo]

Howdy,

Long time reader, first time poster.

I'd was thinking about how I could use CSS sprites as anchor buttons. My idea was as follows. I don't know if this technique has a name or has been discussed before. Apologies in advance to the original author!

Ok, the problem to solve is to use a set of images that look and act like a button to the user which is a link to another page.

The CSS sprites technique looks like a good candidate solution and has the benefit of buttons that are responsive for the different rollover states as all the image states are loaded with the page in one go.

As you can't use a CSS sprite as the source for an <img> I thought to use a 1 pixel transparent gif as the image source and then use a CSS class to set the background image for the button.

On the positive side, using an <img> inside the anchor is a little more honest than just using an empty anchor tag as it's actually an image. It also allows for an 'alt' which is the text on the button sprite.

On the negative side, the source filename for the image doesn't reflect the content of the image (as per Google's recommendations [google.com ]). Also, I was intending to use the same transparent gif as the source for all the buttons on the site which should improve the chances of browser caching and thereby improving the user experience.

Would Google see this as an abuse and hand out a penalty?

I suspect that Google would not look fondly on this technique

Should CSS sprites not be used for anchors?

What do you think?


HTML fragment:

<a href="/register" title="Register as a new user">
 <img class="myRegisterButton" src="thesmallestgifintheworld.gif" alt="Register now">
</a>

CSS fragment:

img.myRegisterButton {
 width:100px;
 height:40px;
 background-image: url('sprites.png');
 background-attachment: norepeat;
 background-position: 0px 0px; 
 margin: 0 auto;
 padding: 0;
}

img.myRegisterButton:hover {
 background-position: -100px 0px; 
}

img.myRegisterButton:active {
 background-position: -200px 0px; 
}

Cheers,
Simon.

[tedster]

Welcome to active mode, Simon.

The Google page you linked to is specifically about how to get images to be ranked. However, you don't care about ranking for these small utility images, so I wouldn't worry about it.

Google uses CSS sprites very extensively on their pages, even for linked images (see http://www.google.com/images/srpr/nav_logo27.png [google.com]) It's a legitimate approach to speeding up a page.

[TheMadScientist]

Something else to think about doing:
(Or more of an addition for 'clarification' and 'transparency' --- No Pun Intended)

### - ### Your CSS Here ### - ###

.ImageSwap {
display:none;
}

<a href="/register" title="Register as a new user">
<span class="ImageSwap">Register Now</span>
<img class="myRegisterButton" src="thesmallestgifintheworld.gif" alt="Register now">
</a>

[londrum]

i would just do it like this

<a href="/register">Register now</a>

like tedster says, you dont want to rank the CSS sprite. and you don't need the alt text, because you can just use the link text instead.

to give the link the right height and width all you need to do is put

a:link { display:block; width:100px; height:40px; }

in the CSS.

if you're trying to speed the page up then that's the way to go. putting in an extra <img> gif that is completely redundant is just another thing to download.

[TheMadScientist]

@londrum simbo's not wanting to show the text in text, but rather show the image in the background... Putting the text in the <a> visibly defeats the purpose of the idea.

I've actually done very similar to what he's thinking about without any issues. Also, the 1x1 clear gif won't slow downloading in any significant way. It's one 'extra' request, but using the css sprite eliminates quite a few so IMO it's a good trade.

[SuzyUK]

not an abuse, it is recognised technique (image replacement) - though you're maybe over thinking it?

I think @londrum is correct, but just missed out a way of hiding the text from view.. ;) - I agree the use of an extra img here is redundant, why put the text as alt text when you can have it proper text for non-CSS/text browsers?

here's londrum's example expanded..

<a href="/register"><span>Register now</span></a>

a { display:block; width:100px; height:40px; background: 
url(sprite.gif) no-repeat ? ?;} 
a:hover {background-position: ? ?;}
a span {position: absolute; left:-9999px;}

Yes you could use

display: none;

on the <span> to hide the text, but that apparently is not read by Assistive Technologies as widely as the other methods though that may not be an issue, also I'm not sure which of these, if any, Google "ignores" either.

The problem with the way I've done it is that it can cause focus outline problems in certain instances -

visbility:hidden; 

on the span is another option.. ah choices..

Google uses the technique themselves on their logo, and by all accounts as long as the "hidden text" mirrors what the background image is conveying there is no abuse.

[TheMadScientist]

a span {position: absolute; left:-9999px;}

Personally I'd recommend against using the above, especially in light of the recent 'Heads Up' thread: [webmasterworld.com...]

IMO That's 'hiding text', and while it might pass a manual review, it's easy to detect with a bot and the 'visual rendering' I've read Google is using in some manner.

Personally, I'd much rather use display:none; with an alt on a graphic. The text is on the page and the class name shows exactly what I'm doing with it to a manual reviewer, mainly because although I'm not a 'hard-line-traditionalist' I think it's the correct way to do an image swap.

It's also easy to detect what I said to do as an image swap the way I showed above, even using automation.

But, of course each to their own applies...
Use any ideas presented at your own risk.

IMO sometimes people go so far to do things in a way to 'get past the search bots', out think themselves and end up doing more harm than good... We're talking about loading a 1 x 1 pixel gif sized up like it's a big deal of some kind... If a site is so slow that 1 x 1 clear gif is the make or break point that makes people not want to visit IMO there are way more issues than loading a clear gif. LOL! Seriously, think about it for a minute: if a 1 x 1 clear gif being loaded slows the site down enough to make people click back, how huge are the site's loading issues?

[simbo]

Thanks for the feedback.

@SuzyUK, I can't be positive, but I think I have been penalised in a previous life for using the absolute position image replacement technique. I would think it would be very easy for the 'bots to detect this. What has your experience been?

I was thinking, the optimal way to use the 1x1 GIF would be to use the same image for all the the sprite buttons across the site. That way there is (hopefully) only a one time penalty to download a 26 byte GIF into the browser cache which for my site would be trivial.

I'm speculating here, but I do wonder if the Google 'bot builds relationships between anchors and the image src. It would be trivial for the 'bot to do and I would think that the anchors would provide significant context for ranking of the page, and images.

I'm drawing a long bow, but if these relationships are captured then having a bunch of anchors such as 'Register user', 'Book now', 'Add to Cart', 'Checkout' all pointing to the same 1x1 GIF may look a little dodgey to Google.

Please tell me if I'm being paranoid!

[uggur]

Novadays i avoid hiding any text from google but, for example web2 css based designs using the site logo as a div class so some webmasters are giving h1 into div and they hide it. I think it may dodgy to google. Any experince for hiding text? Because as TheMadScientist said that it's easy to detect with a bot and it can pass with manuel review.

[SuzyUK]

Personally I'd recommend against using the above, especially in light of the recent 'Heads Up' thread: [webmasterworld.com...]

IMO "hiding" text via CSS, especially simple menu or logo text) is not akin to cloaking (that heads up thread), think they're talking about feeding a whole different page/meaning to gbot?.

ref: the CSS technique under discussion, sure it's open to abuse like any other technique, but in this case the display and visibility properties have been in use in CSS since CSS1 & for legitimate reasons, else why would they be there? It would take a brave SE IMHO to do a blanket ban based on the the words used, and against recommended and legitimately used practices.

I personally use a variety of ways to do this but because I also like to follow accessibility practices (or the best ones we've got) I would [still] generally plump for the text-indent method as that is read by screen readers, - huge discussions go on in accessibility circles about this believe it or not - and as the SE emphasis appears to be an usability and user experience these days, I'm pretty sure they're aware of all the implications of why a site may be using one technique over another - also while screen readers ignore the

display: none;

method, IE6/7 also used to have some problems with it, so I think you'll find that is why that methiod is not recommended by some.. to me it's just habit to use the text-indent method and I researched recently if there was any reason to change my mind, there wasn't, so until such times as we are told that all AT's (Assistive Technolgies) have agreed on a definite best practice I can't see a SE having the power to diss any method over another *as long as you use it legitimately*

the "gif" trick would certainly work, but is "alt" text any better for your purposes than real text, or is a 'forcing'? - reminds me of gif spacer tricks in tables, that by the way ended up being abused for their 'alt' text .. maybe (definite maybe) under a manual test your proposed method might actually fail before any of the 'display' methods as that *could* almost seem like a way of keyword stuffing before actual text would be.. not saying that is your intention, but we all know the "alt" method was a favourite way to abuse hidden things in the past.

What I'm saying is that someone may well wonder why you did it this way as opposed an "official" way if you like.. no disrespect intended to your thinking, nor do I have proof of penalties, indeed I think if there were the W3C et al would be up in arms.. but I have to say I certainly looked twice when I saw how you were thinking of doing it, though it "passes in my eyes" ;)

I have always maintained that if in doubt you should turn off CSS (first thing I presume a manual checker would do) and see if the site is still "usable" the way it's intended, if it is you will have nothing to fear, even if a manual checker picks it up they could have been asked to check your site by a spiteful competitor, as long as you explain with researched reason why you did it like this then I'd say you're good to go.. no matter which way you do it

and again don't take this the wrong way, but people recommending against the use of an HTML or CSS property are under the SE's "disinformation" spell, there are many ways to hide things under layers of the cascade (C in CSS), via JS or multiple stylesheets, if one is so inclined, so I think a simple, transparent, well known technique is nothing whatsoever to be concerned about.. if it is I'll be shouting from the rooftops louder than anyone.. not because my site doesn't rank, or gets penalised - but because a piffy old SE decided to rewrite the CSS recs which I spent a lot of time getting to grips with ;)

think about it.. if you're coding honestly and not altering the message of the page i.e. you're giving the same text to the user as you are SE Bots then you're not cloaking and what have you to fear?

Too much information perhaps? sorry, it pressed a button and is just an opinion of a mere coder ;)

[SuzyUK]

@simbo.. sorry missed this

@SuzyUK, I can't be positive, but I think I have been penalised in a previous life for using the absolute position image replacement technique. I would think it would be very easy for the 'bots to detect this. What has your experience been?

I would be VERY surprised if that was the case, as in my last reply, it is currently the most trusted method for AT accessibility purposes, my experience.. I use it quite widely with no issues.. if they did ask I would tell them why ;)

[londrum]

just to add a little something to suzy's thing... you can hide the text without using an extra span by using text-indent instead of position:absolute

<a href="/register">Register now</a>

a { display:block; width:100px; height:40px; background:
url(sprite.gif) no-repeat ? ?; text-indent:-9999px; }

[SuzyUK]

oh and sorry about this.. but it might have a bearing, there is a new image replacement technique on our doorstep (IE8 is having problems, which is holding it back) but it an absolute positioning method using pseudo elements and currently I think that is the best solution all around as the image goes in a psuedo element (as in not really there it only exists ion the CSS where it should be) - yet the HTML stays vanilla plain.. i.e. <h1>Your Logo</h1> .. can't get clearer than that can you? so I wouldn't assume that SE's will see Absolute positioning as an evil

& thanks @londrum.. forgot about that bit, & that makes it even clearer

[simbo]

@SuzyUK

the "gif" trick would certainly work, but is "alt" text any better for your purposes than real text, or is a 'forcing'? - reminds me of gif spacer tricks in tables

My intention (possibly misguided) was to be as 'honest' as possible as CSS sprites only work as background images. My thoughts were that the GIF technique closely represents what I'd do if I wasn't using CSS sprites; that is to use a conventional <IMG> with an ALT.

maybe (definite maybe) under a manual test your proposed method might actually fail before any of the 'display' methods as that *could* almost seem like a way of keyword stuffing.....

That's something I hadn't really considered before; "the sins of the father" so to speak!

[Alex_TJ]

For years I've been using the old DW rollover script, and after reading this thread I'm considering changing to a transparent gif with css sprites.
Simbo raised a question easier in the thread about having one image with many different ALT texts that are linked.
Does anyone have any experience or feedback about that?