Please Support - Ride for the child

Sprites

May 1, 2013

This week I have been working with CSS sprites and I must admit I don’t posses much knowledge on the best practices or even how they should be used.

For those of you who don’t know what I’m talking about – a sprite is basically multiple graphics compiled into one image. So a common use is where a button has an “on” and “off” effect. Both these effects can be within in the same image (sprite) and the background position can change on hover. Sprites can contain multiple images, so you could include buttons, graphics and just about anything you want, just simply move the background position to show each one.

Every time anything (including images) is loaded in the browser it triggers a HTTP request to collect it. The more requests a web page makes the slower it will be. Because these requests need to be kept to a minimum it makes sense to load one large sprite sheet full of images as opposed to loading multiple individual files.

I have found some very useful tools which assist with spriting (A term I made up):-

  • Sprite cow is awesome. You basically upload an image and select it in the browser and it tells you the exact size and location of the image on the sprite sheet.
  • Sprite Pad, this is cool. You drop the images into the site and then download the sprite image and also a CSS document with all the CSS on it.

There are probably a load of other tools which I don’t know about. Another thing that was mentioned to me was Compass which has some nice sprite features built in. I need to give that a try.

The bigger picture

I have a tendency to look at the bigger picture with things these days and this subject was no different. How big can you go? How many sprite sheets should you have? What do you put on each? How are they organised?

On smaller websites it doesn’t really matter. You can just add all the images to one sprite and code it up. But what about larger sites with lots of images. Well firstly I think the sprite sheets need to be organised properly, so buttons, icons, round corners could be one. Images and photos another, banners another. It obviously depends on your project but if something needs to be modified or located it’s essential you know where to find it.

The biggest question is how big should you go. A reliable source at work advised me that some mobile devices won’t load sprites bigger than a certain size. Not only this but remember the browser has to download the whole spite before it displays any of them. This is something that needs to be taken into consideration. Especially bearing in mind the new “retina ready” (2x) images.

Although it was hard to find some bulletproof information I did find out the following:-

  • The limit on the older iTouches, Original iPhone and iPhone3G is a max image size of 1024×1024
  • Later iPhone 3GS, iPhone 4, third-generation iPod touch, and the iPad support a max image size of 2048×2048
  • iPad2/3 and iPhone 4s supports 4096×4096 as far as I know.

You can read the full specs for apple products here. I’m not going to bother looking for android spec as they will no doubt be similar. I’m not too fussed about the early phone models these days. I won’t cater for them unless I need to at work. But I won’t be going over that 2048px X 2048px figure for all future sprite projects. Nice fact to know.

How you make them

How would you make the sprites? Would you do them right from the start or drop them all into one document after you have finished coding and use one of the tools I mentioned? You could do either, and I suppose it’s a matter of preference.

I personally would make the sprites as I code up a new design and insert the background-positions as I go along. I would have the PNG sprite file open from my img folder and keep re-saving it and adding the CSS.

Drawbacks

Are there any disadvantages to using sprites?

The biggest pain is updating the graphics. Imagine a small arrow icon on a sprite sheet. You have to locate it first and then cut it out, swap it for the new image and reposition the image with the CSS. You need to make sure you don’t cut any of the other sprites out, I have messed up a few times cutting shadows or transparent layers which are difficult to see on a PNG file. I would highly recommended always saving your sprite file as a PSD with all the layers (native files). It’s much easier to manage and swap images.

Conclusion

For the majority of sites with a small amount of traffic it probably doesn’t matter. Or at least you think it doesn’t matter.

I think it’s important to do things correctly regardless of whether they matter or not. Take my sites for example. I’m getting around a 1000 hits a day now on my four websites and because they were badly coded in the first place the loading was slow, and I’m wasting unnecessary data and peoples time (something I’m working on fixing).

So yeah speed and performance of websites is a big thing these days, reduce your HTTP requests where possible and supply the correct size images, you will be a better web dev for doing it!