Using CSS sprites on your website

Added Saturday, March 13th, 2010 at 12:14 am by

I mentioned CSS sprites, as a way to cut down the load time, of your website in my speed up your wordpress blog post. I would like to elaborate a little on that and share more reasons to use css sprites.

What is CSS sprites?

CSS sprites is a way to combine all your decorative graphics elements in to one file and positioning them using css. It’s a technique that has been used by game designers for a long long time. The main goal is to save load size for your user, to get your site to load faster. Here are two links on how to do it. CSS Tricks: CSS sprites and A List Apart: CSS Sprites Now let’s talk a little about when to use it and when not to.

Advantages of using sprites:

Cuts down on http requests
This is what I talked about in my speed post. By combining your graphics into one file you are cutting down the amount of HTTP requests and that can actually make the load size smaller because there are less wasted kbs going back and forth between the server and the user.

It’s all in one file
Imagine now that you have a big e-commerce site, and you want to change all your buttons you use on your site. Now you might be looking at 25 buttons each of which you have to open up in Photoshop and change the font size just slightly and save them all again. That’s a big, and might I add BORING, job. Wouldn’t it be great if you could change that in just one file? That could dramatically speed up the process.

No bad loading hover effects
Have you ever seen a hover effect where the background blinks on the first hover? Sure you have. That’s because you are downloading the image as you hover over it. CSS sprites will help you with that, because the image is already loaded.

Disadvantage to CSS Sprites:

It’s all in one file
No it not a writing mistake, this can actually also be a disadvantage. If you only want to change one element of your site, you’ll have to change it in your big sprite psd, which could easily be 200+ layers on a big site. That’s not the easiest psd file to navigate. So keep it organized.

Which format should you choose?
Combining multiple graphics into one file will make you think twice about what format you use for it. Gif will be too retrictive in most cases as you can only have 256 colors in it, so you can go with .png or .jpg and you might run into problems with transparency on IE6 browsers (Yes that is still being even though I slap everyone I see using it) with .png and .jpg doesn’t give you the option at all.

You can’t do repeating backgrounds in both x and y
It’s just not possible to have both horizontal and vertical repeating backgrounds¬† in the same sprite.

When not to use CSS sprites

CSS sprites should only be used on files that are being used again and again. You shouldn’t¬† go and try to make your gallery into a sprite. That’s not a good use for it. That will increase your load time as your images will be large.

So this was a small introduction as to what CSS sprites really is. What do you think of CSS sprites? Be sure to share in the comments.