Weekly Freebies: 12 Free CSS Sprite Generators
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.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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