I am currently looking into adapting an existing website to use a CSS sprite map, as advised by Google Developers. It’s my first time doing this and I just need to know a couple of things.
Should the map include all the images that appear or just those which run throughout the site? i.e.navigation.
Should I use mulitple sprite maps? i.e. one for navigation and one for banners which appear on the front page.
What is the best format to use for the sprite map? Gif, Jpeg or Png?
What is the recommended file size limit for a sprite map?
I have several images which have transparent backgrounds. Should I make these into a separate sprite map?
It depends on how many images you have and how organised you want to be. If the images are current throughout the site then keep them in one sprite but if they are unique to only a few sections then it would be worth creating another sprite.
I usually create a few sprites just so that its easier to organise and keep track of.
Should I use mulitple sprite maps? i.e. one for navigation and one for banners which appear on the front page.
Sprites are generally best for small images where you may have hundreds of them and save on the http requests and to preload them. Larger images are not so much of a problem and I tend not to use sprites if the image size is say more than 10k. The current sprite I am working on contains 150 images so far and weighs in at 40k. It’s also a png so that the images can be used on different backgrounds.
What is the best format to use for the sprite map? Gif, Jpeg or Png?
It depends on the image and the task in hand. If you need transparent sections or an image to be place d on different backgrounds then it has to be a transparent gif or transparent png. Pngs are usually bigger in file size but not always so always check first and optimise.
What is the recommended file size limit for a sprite map?
I wouldn’t go much bigger than 40k and if you are working on a large site you would not want to put every single image into the sprite and make the user wait forever for the first page to load. You only get one chance to make a first impression so there is a trade off between usability and practicality.
I have several images which have transparent backgrounds. Should I make these into a separate sprite map?
Yes you could do that if your other images are optimised gifs/jpgs of smaller file size.
In the end it boils down to choice and ease of use. It’s usually better to group things in different sprites as that makes changing and updating easier. Remember though that it’s not easy to use repeating graphics in sprites and that when you apply the sprite image you will need to apply it to an element of the correct size rather than as a background to the parent - otherwise all the other sprites will show.