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 Sprite Generator interface

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:

  1. Select the directory which contains all the images you want to put in the sprite: Choosing the folder which contains the source images 
  2. Pick a location and a name for the generated sprite image: Selecting file name for the output sprite image
  3. Pick a location and a name for the generated CSS file: Selecting file name for the CSS file which contains information about sprites
  4. Hit the big blue button to generate the sprite: Generating the sprite 

As soon as the sprite is generated you will be prompted:

Notification about the application being done with converting the sprite

Imtech SpriteGenerator tiles the images horizontally preserving the transparency settings (if applicable):

Sample sprite for this blog

Using the generated CSS you can easily display the images:

Sample of using the sprite in HTML 

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)

Technorati Tags: CSS, Webdesign, Performance

Others found also helpful: