What is a spritesheet?

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.

How can SpriteRight help?

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.

What else can SpriteRight do?

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?

Available on the Mac App Store

Some of my images are being packed inefficiently. Is there a way to tweak this behaviour?

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.

Can I stop my spritesheet canvas from changing dimensions while packing?

You can force a spritesheet to keep its dimensions while packing by unticking the size to fit option in the left-hand pane.

Can I change the way SpriteRight formats CSS code?

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.

Available on the Mac App Store

CSS Import

SpriteRight parses CSS files, letting you convert your existing website to use spritesheets in a matter of minutes.

Automatic Code Generation

SpriteRight automatically generates CSS code as you work, making updating your stylesheets simple.

Magic packing

Organise your spritesheets in the most optimal way possible using a variety of different sorting criteria.

Built-in compression

SpriteRight supports built-in lossless PNG compression, making sure your spritesheets are as small as possible.

Code formatting options

Everyone writes code differently. That's why SpriteRight comes with three unique ways of generating CSS code.

Support for CSS3

SpriteRight supports multi-layered background elements and has support for CSS3 properties like background-size.

Individual Image Properties

Set a margin between all of your images or give particular images additional space by editing their padding values.

Project based

Easily maintain and manage spritesheets across multiple sites by creating SpriteRight project files.

Visual editor

SpriteRights intuitive visual editor allows you to arrange your images in exactly the way you want.


Available on the Mac App Store