Generating CSS sprites using Imtech SpriteGenerator
Using CSS sprites is one of the known methods for improving performance of a website. By minimizing the number of requests the web pages load faster. Creating sprites manually is quite difficult: you not only have to put the sprite together but have to manually create the stylesheet to actually use the sprite as well. Imtech SpriteGenerator simplifies working with by generating a sprite out of a directory with images and creating a CSS for all the pieces as well.
Introducing Imtech SpriteGenerator
Imtech SpriteGenerator is a tool that me and my friend Wouter have recently put together. Generating a sprite using Imtech SpriteGenerator consists of four simple steps:
- Select the directory which contains all the images you want to put in the sprite:
- Pick a location and a name for the generated sprite image:
- Pick a location and a name for the generated CSS file:
- Hit the big blue button to generate the sprite:
As soon as the sprite is generated you will be prompted:
Imtech SpriteGenerator tiles the images horizontally preserving the transparency settings (if applicable):
Using the generated CSS you can easily display the images:
What Imtech SpriteGenerator can and can’t do…
Imtech SpriteGenerator is meant to simplify working with CSS sprites. Using a folder with images it generates a sprite image and the CSS file which help you refer to particular images.
This version of Imtech SpriteGenerator is really simple. It doesn’t provide any advanced options like choosing the way you want to tile the images, setting compression on the sprite image or building a sprite image using an existing CSS files. While it might contain such functions in the future it depends strongly on the feedback you provide on the tool.
Imtech SpriteGenerator is a Windows Presentation Foundation (WPF) and requires the .NET 3.5 Framework installed. While it shouldn’t be a problem on most computers nowadays, you might find it impossible to use it, if running on an older environment. I chose for WPF simply because I was curious about the way it works. The User Experience isn’t that cool, yet I really enjoyed trying out different stuff while working on the tool.
Give it a try
Imtech SpriteGenerator is a free tool and you can use it without any restrictions. You can download it from the TMT CodePlex site. Let me know should you have any suggestions.
Big thanks to Wouter for brainstorming on the idea and finding out an easy way to merge the images.
Download: Imtech SpriteGenerator (420KB)