SpriteRight is a CSS spritesheet generator for the Mac that lets you import your existing images or stylesheets. Make your sites load faster, cut bandwidth costs and save time. SpriteRight even generates CSS code on the fly.Available on the Mac App Store
A spritesheet is a collection of images put into a single image. Webpages with lots of images can take a long time to load causing multiple server requests. By using a spritesheet you can reduce the number of server requests a browser needs to make to load your webpage. This not only makes your website load faster but also saves you money on bandwidth costs. You can read more about spritesheets here.
SpriteRight is capable of taking your websites existing images and converting them into a spritesheet in seconds.
Whether you're importing individual images or existing
.CSS files, SpriteRight takes care of the hard work for you.
Even if you've had no previous experience with spritesheets, SpriteRight's example code generation tool will have you up and running in no time at all.
SpriteRight comes with an intuitive packing algorithm that's capable of arranging your images in the most optimal way possible. The less space a spritesheet takes up, the quicker your website will load and the less bandwidth it will require. SpriteRight also comes with the ability to trim images of unnecessary transparent areas, further reducing filesizes. For more information on exactly what SpriteRight is capable of, why not watch our introductory video?
SpriteRight comes with 4 different sorting options which can be adjusted to improve automated image packing. Try changing the sort value in the left-hand column. Depending on the sizes of the images you're trying to pack, different sorting criteria may prove to be more efficient than other options. If all else fails, you're more than welcome to manually position images within your spritesheet using the visual editor.
You can force a spritesheet to keep its dimensions while packing by unticking the size to fit option in the left-hand pane.
As of SpriteRight v1.1, you can select from three different CSS formatting options: individual, shared and grouped. Each option changes the way SpriteRight presents and generates code to match the three most popular ways of representing spritesheets in CSS code.
SpriteRight parses CSS files, letting you convert your existing website to use spritesheets in a matter of minutes.
SpriteRight automatically generates CSS code as you work, making updating your stylesheets simple.
Organise your spritesheets in the most optimal way possible using a variety of different sorting criteria.
SpriteRight supports built-in lossless PNG compression, making sure your spritesheets are as small as possible.
Everyone writes code differently. That's why SpriteRight comes with three unique ways of generating CSS code.
SpriteRight supports multi-layered background elements and has support for CSS3 properties like background-size.
Set a margin between all of your images or give particular images additional space by editing their padding values.
Easily maintain and manage spritesheets across multiple sites by creating SpriteRight project files.
SpriteRights intuitive visual editor allows you to arrange your images in exactly the way you want.