August 18, 2009

CSS Sprite Generator: Create fast-loading web graphics


My good buddy Josh Cunningham from swears by this free tool. Honestly, its use is beyond my capabilities, but if Josh loves it, you may as well.

This is about the best free web development tool I’ve ever seen. Go to the CSS Sprite Generator, upload all the images referenced in your CSS file, pick a few options, and hit submit. The site will not only generate the sprite image but it gives you the new CSS values as well. Talk about a time saver!

CSS sprites help your page load much faster by only accessing a single image (like the Google one above) instead of many. This only works for non-repeating images called as a background in your CSS file. For more info, see this A List Apart article and this Smashing Magazine post.


You may also like

AI Headshots (Fake) that Look Real

AI Headshots (Fake) that Look Real

The Last Straw with LastPass

The Last Straw with LastPass
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}


The Little Book of Apps

If you’re looking for technology to make your life easier, start here! Subscribe to our NerdWords newsletter and get instant access to The Little Book of Apps today.

Like everyone else, we have to put the small print at the bottom! But in all seriousness, we respect your privacy and won't spam you. Pinky Promise.