SpriteRight: Create CSS Image Sprites the Easy Way

If you’re a web developer, then you know that manually creating image sprites is a pain. Even worse is the process of trying to position those sprites just right within your CSS. It’s a necessary evil, but don’t you wish you could skip it?

Today we’re going to take a look at a Mac app called SpriteRight that promises to completely automates this process. Will it successfully turn sprite creation into an easy and even enjoyable task? Read on to find out.

What Are CSS Image Sprites?

The concept behind image sprites, and indeed this entire app, is a little on the techy side. Bottom line, if you never plan on being a developer or designer, this information is fairly useless. For those of you that don’t know what sprites are and are geeky enough to be interested, here’s a basic description.

The basic idea is that a given website can have a ton of different images, each of which represents an HTTP request that has to be made to the server. In general, more HTTP requests lead to longer page load times.

To account for this, many web designers will place all or many of their images onto a single document all lined up in a grid-like format and then reference parts of that image in their code to make the right pictures appear in the right places. The result is only a single HTTP request and a theoretically faster page.

You can find sprites in use in one form or another on just about every major site you can name that gets tons of traffic. They’re especially useful for small icons and hover states.

Meet SpriteRight

The following screenshot represents what you’ll see when you open up SpriteRight for the first time and create a new project. The interface is pretty standard and is comprised of a toolbar along the top, some options to tweak down the left side and another sidebar on the right that is empty for now but will eventually hold a file list.

Importing Images

The first thing that you want to do is click the “Import” button. At this point you should already have some images in mind that you’d like to turn into a sprite.

Next you’ll see a dialog where you can choose the images that you want. Hold down Shift or Command to select multiple images and hit the “OK” button to import them into your canvas. I’ll be importing some fun veggie icons from the Symbolicon Collection.

Once you’ve imported the images, you might not see a big change in the interface, but don’t worry, it’s working. The images come in stacked on top of each other at the top left corner of the canvas. Your file list should also update with the file names for the images you selected.

Positioning Images

Once your images are on the canvas, you can click and drag them to position them however you like. Keep in mind though that SpriteRight is a powerful tool so in most cases you won’t even need manual adjustments, you’ll see what I mean next.

Rather than moving the images around manually, it’s often best to let SpriteRight do its magic and position the images for you automatically. To do this, simply click on the “Pack” button in the top toolbar.

Once you do this, SpriteRight springs to life and in a mere instant all of your images are perfectly organized into a nice grid. I’m showing off the app with similarly sized icons but it also handles irregularly sized collections of items just fine.

Options

SpriteRight has two different sets of options on the left side. The first set (on the top) governs the document property. Here you can help make some of the decisions that are automated when you hit “Pack”.

For instance, by default, the app chooses the best canvas size it can come up with, but you can alter this and choose from a list of presets if you wish. There are also some options that let you tweak how the app displays the preview, these don’t affect the output. The most useful options here are the middle set, which governs image trimming, margin (the space between the images) and the sort algorithm (there are a couple to choose from, experiment to see which works best).

Once you’ve got your canvas options figured out, hit the “Pack” button again to make sure the settings take effect. Then hit the “Shrink” button (the ruler) to automatically trim off any empty space.

The other set of options governs individual images. To use these, click on an image in the canvas to select it. This area will then update with the position data for that image and allow you to set up your padding and repeat preference.

The values here help you position the element in CSS later, but once again, this is just extra help because the app will take care of that for you.

Checking Out the Code

Obviously, the end goal here is to place these images into a web page. With sprites, you perform this task using CSS. The tricky part about using sprites is figuring out the right code to scoot and crop the larger canvas so only the image you want is visible. The beauty of tools like SpriteRight is that this code is take care of automatically.

To see the CSS that you’ll need for any given image, click on it and then slide up the CSS drawer by hitting the leftmost button in the bottom right of the window (shown below).

As you can see, everything is tossed into a class named after the file (in this case “kale”). All you have to do is apply this class in your HTML (after exporting) and you’re good to go!

Exporting

When you’re all finished tweaking your settings and poking around the code, it’s time to export. In the “Settings” menu, you can choose a destination for your files and whether or not you want both the image and the CSS to be generated.

Once you’ve got everything in order, hit the “Export” button.

Now you should have a nice image sprite along with a CSS file with some code that you can copy and paste into your project for simple image placement.

Here’s the kicker: once you’re done you can save the project and come back later to make updates. Updating sprites can be a really time consuming task and being able to open up and tweak your old SpriteRight projects is a major convenience.

Worth A Download?

As a developer, there are a lot of things in CSS that I take pride in doing by hand. I’m not a fan of WYSIWYG apps and would much rather build sites with a good text-based IDE like Espresso. That being said, image sprites are not something that fit with this ideology.

Image sprites are super helpful, but I simply don’t like building them. It’s a tedious process that you should definitely seek to automate to save valuable time. For this reason, I absolutely love anything tool that can take this headache away from me.

If you use sprites regularly, then you probably know that there are quite a few free sprite generators online. However, I really like having this ability in an offline, native application where I can save my projects and return to them later. Plus, SpriteRight is far better than most or even all of the online generators that you’ll find.

My advice: If you’re a professional web developer, $4.99 is a bargain, go get this tool before the price goes up. That being said, there are some things that I’ve seen in online generators that I’d like to see here as well. The biggest thing that comes to mind is the ability to build your site like normal, then import the entire project folder at once and have the app automatically look at your images, combine those implemented with CSS into a single image file, and update your CSS to reflect the change.

SpriteRight is an awesome app in its current state, but this functionality would really help make it an unbeatable resource.

Conclusion

To sum up, SpriteRight sucks all of the lameness right out of the process of creating and coding image sprites. It automates the task while still giving you freedom to make important decisions. I highly recommend it to anyone looking for a better way to manage their sprites.

Now that you’ve read my take, what do you think? Do you use image sprites in your project? What tools, if any do you use to help get the job done? How does SpriteRight stack up to other solutions that you’ve tried?