Want to Write for Us?Read This | LoginBecome a Member

The Easiest (and Fastest) Way to Create CSS Sprites

spritepad css png tool

Not familiar with CSS sprites?

You can learn more, here, but in a nutshell, you save bandwidth and increase your page load speed. Plus, once you get used to working with them, it keeps everything compact and organized.

Usually, you build your CSS sprites in your favorite graphic app, drop in some CSS magic and you’re up and rolling.

Now there’s an easier and quicker way to do it!

You’ll be whipping-out CSS sprites in a matter of seconds!

SpritePad

spritepad css png tool

SpritePad is free and easy to use.

Simply drag and drop your image files on to the graph.

In a blink of an eye, you’ve got your CSS spit-out on the right and your images in the box.

spritepad css png tool

Re-adjust the graph box (this will make your output file PNG file smaller), and click download!

spritepad css png tool

You’ll have two files:

  1. Your PNG graphic file.
  2. Your sprites CSS file.

Apply as you like!

Pretty awesome, isn’t?

Bookmarked? YES!

Here’s the link.

4 Responses to “The Easiest (and Fastest) Way to Create CSS Sprites”

  1. May 30, 2012 at #

    Increase your page load time or page load speed?

    • May 31, 2012 at #

      LOL! Wow. That’s funny. Fixed. (Thank you.)

  2. May 30, 2012 at #

    This is pretty awesome!

Leave a Reply

Gravatar Image