CSS Sprites – What They Are?
You’ve probably heard of them, but do you really understand them? The name sprites might bring a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually in most cases is one big image. You probably have seen or used the CSS technique where hover state of a link is activated by providing of an additional image? Think of CSS Sprites as an extension of that technique.
This is an simple example of a button with hover state. We just used some image from google search and it fits perfectly:
And here is the code for it:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<style class="edit" type="text/css">
#button-example {
display: block;
width: 254px;
height: 81px;
background: url('https://markocodes.com/wp-content/uploads/2014/10/button1.jpg');
background-repeat: no-repeat;
background-size: 150px auto;
}
#button-example:hover {
background: url('https://markocodes.com/wp-content/uploads/2014/10/button1-hover.jpg');
background-repeat: no-repeat;
background-size: 150px auto;
}
#button-example span {
position: absolute;
left: 9999px;
}
</style>
</head>
<body>
<a id="button-example" href="#"><span>Link</span></a>
</body>
</html>
This works just fine. Why combine all those images?
Not so long time ago, everybody 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. Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is.
Go take a look this short article on highscalability blog: Strategy: Biggest Performance Impact Is To Reduce The Number Of HTTP Requests.
So how is this sprites thing done?
Using CSS Sprites, we can really lighten this example up. Instead of having ten or twenty separate images for the buttons (it will be double in numbers because of hover images), we can literally combine all of them into one big long image.
I won’t go into great detail about how this is done, but with SpriteMe everyone can create sprites so check it out! SpriteMe is a bookmarklet. So after you’ve put it up in your bookmarks bar, just go to any website and click it.
I will present you an real life example which I actually used on one of my templates, so here comes the image (sprites):
As you can see this is the sprite for social links. Beside that it is single image other difference is in CSS. Now you specify background image and for every link you specify the background-position. In image sprite you have to determine position for every icon you want to use. That is for most people the pain in the a..! But it is not so complex.
Method no. 1 – Do the math
First icon is in position X:0 and Y:0 where X and Y represent axes. So start from first icon and subtract for 48px in size (Y:-48px) to use lower icon and so on.
Method no. 2 – Use Photoshop
You can use Photoshop or similar software, load your sprite and determine position of every icon, but what about all those switching between windows and remembering positions and if values are X:259, Y:183, ouch???
Method no. 3 – Yeees, internet
I know by myself. If you don’t have it in your head, there’s certainly on google! Give it a search and you may end up with something like this GetSpriteXY.
Live frankenstein, LIVE!
And here it is, my live example of social icons using CSS sprites. You may noticed cool slide effect which is achieved with CSS transition. If you never heard of transitions, well it’s new CSS3 effect and I’ll write about it some other time, and if you don’t want to wait that time to come check this very simple guide on w3schools.
CSS Sprites – Conclusion
By using this image sprite (CSS Sprite) you only have ONE HTTP request, and that’s all about it.
Leave a Reply