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.

screenshot

SpriteRight

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.

screenshot

Click Import or drag in some images to start

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.

screenshot

After importing

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.

screenshot

Click and drag an image to move it to a specific point

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.

screenshot

Click the Pack button to see the magic

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.

screenshot

SpriteRight organizes the images automatically

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).

screenshot

Document Options

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.

screenshot

Image Options

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).

screenshot

Individual image CSS

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.

screenshot

Hit export to get the resulting image and code

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.

screenshot

Hit export to get the resulting image and code

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?


Summary

Hands down the best tool that I've used for creating CSS image sprites. SpriteRight is automates the boring stuff and still lets you make the decisions that you need to.

9
  • http://www.sthlmwebdesign.com Michael

    Great app, thanks for the heads up.

  • http://csupporthq.com Kasper Christensen

    This post came just at the right time, hopefully it will save me a couple of hours of work this week.

  • http://digitalformula.net Chris

    Useful tool but yeah, I’m struggling to see the point in a lot of these apps these days when equivalent (and often better) tools are available online. If you have no internet connection an app would be good but then … who would need a tool like this if they didn’t have an internet connection? *shrug*

    • http://digitalformula.net Chris

      Re last comment: check out http://css-sprit.es/

    • Ryan

      Personally I’d rather have a native app than use a web service.

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      The real usefulness of the native app comes into play when updating older projects. Free web apps don’t allow you to save out your creations and make edits later, SpriteRight does.

      Google some objections to using CSS sprites and you’ll find long-term upkeep at the top of the list. This app helps alleviate those issues.

  • Andrew D

    I checked this app out from a tip from the CSS-Tricks blog, and personally, I think its awful. Moving images from one side of the screen to the other. thats about it you can do. the css drawer you mentioned? wooooowww you can’t even type in your own code in there! Learn how to code and stick with cssedit or espresso. not worth the $5 if you ask me.

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      The code drawer is mainly for copying and pasting… the developers haven’t tried to make an IDE, and they shouldn’t. You put the code into your normal text editor like Espresso or Coda and edit it there.

      Be sure to read up on CSS Sprites. They’re quite useful and this app really does prove to be super useful when building them.

  • Dan

    Snow-Leo only! :-(

  • http://iaian7.com Iaian7

    I’d love to know how this compairs to some of the competition – Quick Sprites uses live file updating and can intelligently update existing CSS sheets (not just export a new one), while Sprite Master can export to a number of other formats, including specific game engines like Cocos2D.

    SpriteRight seems to be the cheapest right now (and much less ugly!), so I’m tempted to try it out, but hate to waste time and money if I’ll just have to move on to something a little more powerful later…

  • Pingback: CSS Sprites mit SpriteRight. | claudioschwarz.com

  • http://www.sebashton.com Seb

    This does seem like a great app, but why pay money ( ok it is only $5 ) for something that spritecow.com basically provides for free, and spritecow is a web app and is more importantly free!

  • http://www.lvaustraliaoutlet.com louis vuitton

    While i originally commented I clicked the -Notify me if new comments are added – checkbox and now when a comment is added I get four e-mails with the similar comment. Will there be any way you are able to clear away me from that system? Thanks!

  • http://rentalwarsaw Jessia Blenden

    This website is really a stroll-through for all the information you wished about this and didn’t know who to ask. Glimpse right here, and you’ll undoubtedly discover it.

  • http://www.akmaomar.com/ Akma Omar

    Wow…. very useful and complete tutorial.. i’m looking this for long time ago….

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow