Saturday, May 29, 2010

Sprite Sheets Made Easy

Using a few well-placed images on a web page can do a lot for the user experience. During the development of a website, the amount of images being used can really add up, causing multiple server requests when a page is loaded. To combat this problem sprite-sheets can be used so that all of the images that are used in the website layout can be combined into one file which then only requires a single server request and can be cached in the browser.

CSS is used to position the sprite-sheet in such a way that the user sees only the desired sprite. Creating a sprite-sheet can be done manually but there are plenty of free online-tools available to use. Today while I came across one such site called; Css-sprit.es. Simply upload the images you need a sprite sheet of and click generate. This has been really helpful for me. I had a folder of various 32 x 32 px browser icons that have now been combined into a single image. Using this tool for combining related icons and other web page graphics I'll be able to reduce the number of requests being made to my server.

No comments: