Creating CSS Sprites with SpritePad

One of the most important steps to creating a great website is making sure that it’s optimized. And a great way to do just that is to gather all of your images together into one CSS sprite. That way, only one HTTP request is needed to fetch all of your images which in turn will speed up your site. Read about more tips on site optimization in my article Optimization Tips to Speed Up Your Site.
Creating a CSS sprite can sometimes be a bit of a headache. You have to align each image into the sprite and then write a lot of CSS in order to make sure each image displays properly. Thankfully, there are some tools out there that make things easier and my favorite is We Are Kiss’s SpritePad.

SpritePad is super simple to use. Just drag your images into the grid and it will create a PNG file for you to download along with the appropriate CSS for each image. Just follow the Guided Tour to see how quickly you can make your CSS sprite. It’s a great tool to help any web developer optimize their site.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie