Enough is enough, it’s time for something new.
Developers shouldn’t be forced to create their CSS sprites per hand in Photoshop. No developer should do this kind of assembly-line work, adding CSS snippets one after another to use sprites in their websites. There has to be a better way. Online. In the web. Accessible for everyone.
There are already a couple of apps creating CSS sprites. However, most of them need to be installed on your computer (most are mac apps only) and aren't really comfortable to work with. We have been carrying around with the idea of a web application to build CSS sprites for quite a while now and during the last Christmas holidays we decided to give it a try.
What exactly are CSS sprites once again?
As a professional web developer you’ll already have come across CSS sprites and are hopefully using them. For the rest of the world we have reduced all important and unimportand infos to this short list:
CSS sprites assemble a technique from the first days of computer games. These games combined many images into one big image to save data overhead, because memory was very limited.
Today, we don’t really have these memory problems anymore, but CSS sprites are still very effective in speeding up your website’s loading times because of another point: HTTP overhead.
So what does HTTP overhead mean?
Every piece of a website needs to be requested from the server and there is more than just content and documents. There is a relatively large chunk of so called HTTP protocol data telling the server what exactly is needed, who you are, which browser you’re using and many more.
On the other side, the server doesn’t only send the requested content, but also a lot of HTTP protocol information again, e.g. it’s server type, cookies, how long a file should be cached, when it has been changed the last time and so on.
The point is: It’s possible that when you request a tiny image from the server, the HTTP protocol data might be larger than the image itself!
That’s where CSS sprites come into the picture. CSS sprites combine all small images into one big image. This means that only one request will be sent to the server and all that HTTP protocol data will also be transferred once. Plus: The browser only needs to establish one server connection to get all the information.
There’s a new player in town: SpritePad
Easily drag and drop your images from your computer onto the SpritePad canvas. Move your images around, rearrange them and be sure SpritePad automatically creates the appropriate CSS structure for you. If you are happy with your spritemap, you can always download all necessary data including one PNG file and all CSS code with just one click.
If you decide to create yourself a free SpritePad account you’re able to save your CSS sprites in the cloud and keep them as editable sprites online. Access them from wherever and whenever you want.
There is even more behind the doors: SpritePad’s premium version allows you to save an unlimited amount of CSS sprites in the cloud and share them within your team. Collaboration made easy! Besides, premium also activates SpritePad’s auto-alignment feature, a one-click-to-satisfaction button for all your needs. Just drop all your images you need onto the canvas and hit the auto-alignment button. SpritePad automatically aligns all your images in the best possible way to save as much space as possible, creating the smallest CSS sprite possible.
Well, enough talk!
Go ahead, test SpritePad yourself and tell us what you think. We can’t wait to see how you’ll work with SpritePad and how it’s gonna change your development process.