CSS Sprites with SpritePad – the easy way

Since Google announced that page speed is a factor that will influence your website ranking, here at Blueprint we tried to pay more attention to websites optimization. Even though optimization should be done anyway sometimes somebody have to push you harder. Now, we always keep an eye how the website is performing and adjust it if something doesn’t go well. This is the only way to keep the website on top.

There are multiple ways to improve the websites optimization: Optimizing images and external files, optimizing css files, increase the speed of your server, is your website dynamic or static and the list can continue. If you don’t optimize your website, your doing yourself a disservice.

Another way to optimize images is to create CSS Sprites. CSS Sprites are a good way to reduce the HTTP requests by images. Instead of requesting 10,20 or even more images for a website you can make one request with a sprite image. Creating sprites images can be a big headache if you have multiple images in different sizes and thats where my favorite tool comes in SpritePad.

SpritePad is a very simple tool to use. It is a drag and drop process. All you have to do is follow the small tutorial from the beginning and you are ready to start creating CSS sprites. SpritePad is a great tool for every web developer to optimize their site images.