Weekly Freebies: 12 Free CSS Sprite Generators

by on 6th January 2012 with 4 Comments

CSS image sprites allow you to dramatically reduce the number of HTTP requests on a site by combining many or all of the images on your site into a single file. This file can then be used in conjunction with CSS background positioning to implement individual images.

The downside of this technique is that it’s a painstaking, involved process that requires you to manually combine your images and fiddle with the CSS to get each image to display properly. Fortunately, there are a number of free online tools that completely automate this process. Today we have an awesome collection of twelve of these tools, each with its own unique take on the sprite generation process. Whether you’re looking to create a sprite from a folder of images or convert an existing site, we’ve got the tools to help you get the job done in seconds flat.

CSS Sprite Generator: Project Fondue

A good generator with plenty of options. You upload a .ZIP of all the images that you’d like turned into a sprite and it takes care of the rest. It spits out an image and all of the various “background-position” values that you need.

screenshot

CSS Sprites generator

Ugly and buggy, this sprite generator forces you to upload every image individually. Try it out to see what you think but honestly, there are better alternatives on this list.

screenshot

CSS Sprites – Online CSS Sprite Builder / Generator

This one is pretty nice. You can easily upload a bunch of images at once, choose your output filetype and even choose to get either Sass and CSS code as a result. There are also some neat options for automatically generating hover effects like desaturated and flipped. Overall quite impressive, be sure to check it out.

screenshot

Spritebox – Create CSS from Sprite Images

This one takes a different, slightly less automated route. Instead of creating a sprite image for you, it allows you to upload your already created sprite and define specific areas to generate the resulting CSS. A great tool if you prefer to build sprites in Photoshop and just want help with the code.

screenshot

Canvas: CSS Sprites Generator

If you’re uploading images for this one, you have to do it one at a time, which is a bit of a pain. If you have links though you can simply paste in a list with corresponding class names and you’re good to go. Options include padding and background colors. It worked well in my testing, definitely worth a look.

screenshot

Stitches – An HTML5 sprite sheet generator

This one allows you to drag in images, which is awesome after using all of the awkward unloaders that other developers have come up with. After that you can simply click on one button to get the image and another to grab the CSS. There are virtually no options and it only works in Chrome and Firefox, but it’s perfect if you just want a quick and simple solution.

screenshot

Spritemapper

This one is for super nerds only, it’s a downloadable sprite generator that you run from the command line. The implementation is really slick though, you simply point it at your existing CSS file and it does the rest of the work. This makes the problem of long-term sprite management a cinch as you can just hang on to your original css and image files and re-process them when there’s a change.

screenshot

SpriteMe

SpriteMe is an awesome tool that allows you to completely keep your typical development process in tact. Just build your page like you normally would using individual images. Then, once you’re finished, open the page in a browser and hit the SpriteMe bookmarklet. This grabs all the images on the page, creates a sprite and generates the CSS. This is especially useful if you’re converting an exiting site.

screenshot

Spritefy

Spritefy is another option that lets you simply drag a bunch of files into the browser to process them. As with Stitches, there really aren’t any options but it’s definitely a super fast way to get up and running with sprites (Chrome and Firefox only).

screenshot

CSS Sprite Generator

This one has a few unnecessary steps in the generation and setup process, so it takes a few seconds longer than most of the other alternatives, but it has a ton of code output including both CSS and HTML along with various snippets for adding each image to a div or span, inserting links, etc.

screenshot

SpriteMeister – Automatic CSS Sprite Generator

SpriteMeister is a lot like SpriteMe above, only less automated. Instead of using a bookmarklet, you manually upload each image and your current CSS file and then receive a download with updated code and a single image.

screenshot

Sprite Creator 2.0

This one works just like Spritebox above. You upload the sprite image that you created elsewhere and use a simple selection process to automatically generate the appropriate CSS for each image.

screenshot

Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

12 Free CSS Sprite Generators: http://goo.gl/NhLNR

Comments & Discussion

4 Comments

Comments & Discussion

4 Comments

  1. nomi says:

    You missed http://SpriteCow.com. It has this magnetic selection feature that works wonderfully for me.

  2. iamjpg says:

    http://www.spritecow.com/

    is also really nice, automated, no manual selection.

  3. I would say that starting with the smallest screen size and working your way out (mobile-first) using min-width instead of max-width in your queries will make loading your CSS a little more mobile friendly. This way you send a minimal amount of CSS to small devices and the full stack to widescreen mediums.

    Regardless of these differences in execution the result is great and has a wonderful flow to it.

  4. jonjbar says:

    I like the one from Web2Generators.com which can visually create a sprite list with complete style-sheet out of an image. Sprites can be named too to fine-tune the CSS and avoid further editing:

    http://www.web2generators.com/graphism/css_sprite_creator

    I miss an option to convert the ID based CSS selectors to class selectors but this can easily be corrected via a global search and replace.

Leave a Comment

Subscribe
Membership
About the Author