Spritely Images

It used to be the case that you would only sprite images as a last resort, it was a way for the big boys to reduce server load by minimising requests. Nowadays though everyone can and probably should benefit from sprite images.

Gone are the days when you had one image for each menu item, and then another for it’s rollover state. Everybody uses background-position to save that extra load and avoid the flickering. Using a sprite is an extension of that thinking – you’re positioning lots of images into one file so you reduce the number of HTTP requests. “But why?” I hear you ask!

Browsers spend a lot of time waiting for servers to respond. The browser requests the file and then waits for the server to return it. If you’ve got 20 images on your page, that’s 20 separate requests. All this waiting slows down your site, and now more than ever the speed of your site is important. It’s not just users that can be put off by a slow site, now search engines are using speed in site ranking. So you can use a sprite and cut down those 20 requests to just one!

You can’t use a sprite for every image, you can only do repeating backgrounds in one direction for example, and if you want to amend your sprite you may have to shift things around in future for everything to fit. Personally I think they’re worth it though as your site will be really zippy!

There are plenty of tutorials out there, Sprites For Beginners over at Noobcube is quite good. I’m not a fan of automatic sprite generators like SpriteMe or Spritebox, I’m a firm believer that you’ll get a better result if you arrange and optimize the sprite yourself.

Leave a Comment