In the before times, it was socially acceptable to use an image as a link. It was simple enough: stick an image tag inside of an anchor tag. Now that might be fine for people with a head full of eyeballs but bots and people using text-only browsers suffer.
By using a sprite, I’m making 1 http request instead of 9. Here’s what my sprite looks like:
So instead of the old-fashioned method:
I use this for the link:
and I use this to style it:
#homelink span {
background:transparent url(images/rob-sprite.png) no-repeat 0 0;
display:block;
height:220px;
overflow:hidden;
text-indent:-5000px;
width:453px;
}
CSS-Tricks puts it best:
Back in the day, everybody and their brothers were “slicing” images to make pages load faster. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once.
