sprite image design/strategy

Question

I made this question yesterday: background repeat tiled bgImage inside an sprite image?

So as long is not posible to repeat backgrounds wich are inside of a sprite image,

What is the best* strategy when creating the sprite?

i mean, choosing:

• should i try to put ALL the images in one sprite? (including big backgrounds that could be repeated)
• One sprite for icons. Backgrounds a part?
• other

*) when i say best i mean with the most accesible/usable/perfomance

Answer 1

In my opinion, sprite must be defined for your users first. If your users are seeing different pages for their authority, you must divide your sprites by authority. Second is the background and icon, button grouping. Every image file has a header in it. In header, they contain size, colormap and any other additional info. Headers are mostly increases the file 1KB - 3KB average. So we can think that less image, less data transfer. In summary, I suggest you to use one sprite.

Other think is the tools for this. You can use sprite sheet tools for generating your sprites and writing your CSS. These tools are generating minimum image size (using some algorithms to order sprites) and automatically generate CSS file depending on the sprite positions on the sprite sheet. If you are on mac, you can use Sprite Master for this.

Answer 2

i am always create three sprite sheets.

first; for those images which is not repeating at all like arrow, button etc.

second; for those images which repeating y-axis.

third; for those images which repeating x-axis.

or If there is no repeating images in the design then there is no need for other to sprite sheets

sprite for x-axis http://imageshack.us/photo/my-images/401/xaxissprites.png/

sprite for y-axis http://imageshack.us/photo/my-images/28/yaxissprites.jpg/

Answer 3

Sprites are old! There are newer techniques that you can use. But when you will used sprites. I would make one sprite for icons and one sprites for other images.

But you can also used data uri's / base64 encoding for images. This is the new technique for image. And the replacement of sprites. With sprites, you have http requests. With data uri's you have no http requests. It make you website faster! And the speed of the website is a more important thing.

Here you have a article about Click here And here you can create the data uri's. Here. But data uri's are not supported in ie7. For ie7 you can make a fallback to single images.

Used the data uri's and forget the sprites. Sprites is a technique in 2011. Data URIs is totally 2012! :-)