Performance vs. Semantics

So, I’ve been reading a lot on high-performance websites lately.

One question that has cropped up: Which would you choose for something like an image button:

  • Having a semantically correct anchor wrapping an image element, with a single image file as the source


  • Having a semantically incorrect empty anchor with an image background, drawn from a sprite sheet.

Consider the following scenario:
You have five image buttons on your website.

If you choose option one, you wind up with a minimum of 6 HTTP requests (1 HTML file + 5 images, assuming inline style). Everything is semantically correct (no empty elements).

If you choose option two, you wind up with a minimum of 2 HTTP requests (1 HTML file + 1 image, with the image likely to be <= the total size of the previous 5 images). You now have empty elements, but they are semantically correct. You have however saved 4 HTTP requests (which are the greatest bottleneck of a well-optimized site) as well as likely saved a few kilobytes of transfer.

You could offset the un-semantic-ness of option two slightly by having text which you hide with CSS (font-size: 0, text-indent: -50px, etc), but you run a potential risk of having something like Google get mad at you.

So, which would you choose?

Previously, I would have likely gone with option 1, but nowadays I think I like option 2 better. I still put in text and hide it with some technique, but it worries me that Google might think I’m trying to do something black hat.

What’s your opinion? Which do you use? Do you have a better option?


EDIT: To clarify, I’m talking about images that are well-suited to being part of a sprite sheet, not things like photos or other images that you’d likely make a JPG.

Google is a bit past looking at funny button styles as black hat, you’ve gotta have big linkfarm stuff going on to raise ire these days.

In any case, I would probably go with the sprite sheet, especially if I was already using one. You don’t even need text to keep it semantic – that is what title/alt attributes are for.

Either way I think you are splitting hairs unless you actually have enough traffic for this to materially effect something.

Well, it isn’t so much a problem now that I’ve rebuilt things and they’re more optimized, but in the past (when I first got there) it was a big deal… we could be brought down by half a dozen users. Because of this, I’m quite leery.

Also, the designs I’m given are quite image heavy, so while my example used 5, I’m really talking 20-30 (or more) in some cases. All those HTTP requests really add up.

I thought anchors required something, but apparently they can be empty:

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->


It’s a *, so zero or more. Learn something new every day. :wink:

If I were to just include it in the alt and/or title, would something like a screen reader correctly pick it up?

alt is only allowed on <img> tags so for an <a> tag you would have to use a title attribute (since <a> tags don’t have an image to require alternate text).

Also to consider is that the empty <a> tag is intended to be defined using a name attribute rather than an href as the destination for an in page link rather than the link itself (not that it necessarily means that you can’t use it the way you intend, just that’s why it was allowed to be empty in the first place).

=p Yeah, I know alt can only be used on images… that was the 2am talking. =p

Well, it validates, but it’s still not what they meant. I think I’ll probably continue using the positioned text which I push off with text-indent or something.