CSS sprite packer  

Step 1: Add images

Step 2: Pack options

CSS sprite packer  

What is this?

This tool allows you to compress and pack multiple images into one larger image atlas. See the "CSS Sprites: Image Slicing’s Kiss of Death" article on alistapart form more information.

How does it work?

Using the FileReader-API it is possible to read file content in the browser without sending anything to any server.
If you click on the "Add images" button, the application will render images onto a canvas, crop unused pixels (alpha = 0) and use the base64 content to display an HTMLImageElement. Once you click on the "Generate atlas" button, it will run an packing algorithm (based on operasoftware/TextureAtlas) to reposition all images on a new canvas.

How to use this tool:

  1. add images using the "Add images" button
  2. modify css classname and atlas image name if you want to
  3. click the "Generate atlas" button

Result preview: