I found a few handy resources for generating CSS sprites. Using sprites and sliding CSS “windows” it is possible to consolidate images into one single image, and then only display the portion of the main image that contains the image to display.
Why would you do all of this? HTTP Requests. Each time your browser has to make a request to the server for a resource, there are multiple steps occurring. Each of these requests is guaranteed to take a minimum about of time to happen plus the time it takes to transfer the actual data payload (in this case a image).
So in our example scenario, let’s say we have 35 images on our page and one CSS file linked in for styling the site. When a user visits the website, their browser makes one request for the actual web page, one request for the CSS file, and 35 separate requests for each image. So by creating a single CSS sprite out of the 35 images, we are effectively reducing the number of requests by 34. This will help page load time quite a bit. Also, similar techniques can be applied to other web resources like js files, and CSS files.
It’s not so much that these tools are required to do CSS sprites, but they do make creating them much easier.