When it comes to streamlining the loading time of a web page, one major speed boost can be had by minimizing server requests, which are performed every time an individual file is pulled from the server and sent to the user’s browser.
These files include the HTML page itself, along with any external scripts, style sheets and images — all of which can be optimized for faster delivery. In the case of small icons or other tiny images, the most common optimization method is to combine them all into a single larger file — known as a “sprite” — which uses simple CSS commands to display only the required portion of the sprite image as needed.
Simply drag and drop the selected images onto the online grid interface and SpritePad immediately creates a single PNG file while displaying the required CSS code in a sidebar.
For example, to call a 16x16px icon with the class “add,” that is located at the start of the sprite (zero pixels in and down from the top left sprite image corner), the following snippet would be used:
.add{ background-position: 0 0; width: 16px; height: 16px; }
It is an easy way to leverage a lot of power, but it can be tedious and time consuming to set up a sprite. Fortunately many free online tools exist to ease the process.
One such solution is SpritePad (spritepad.wearekiss.com), a product of Kiss, which is an independent German company, composed of experienced media and web specialists.
SpritePad makes generating CSS sprites easy and quick. Simply drag and drop the selected images onto the online grid interface and SpritePad immediately creates a single PNG file while displaying the required CSS code in a sidebar, where it can be copied and pasted into your web page.
“No fiddling in Photoshop, no manual assignment of CSS styles, no longwinded setups, SpritePad makes creating spritemaps as easy as writing your next e-mail,” states a SpritePad spokesperson. “Our guided tour shows you everything you need to know in just three simple steps to smoothly start with SpritePad.”
Add images to the canvas and SpritePad will generate a CSS code snippet for them, continuously updating this code as you move the images around; clicking them to select, change options and be updated. Finalize your spritemap by fitting the document to your images with a click, and then download the sprite’s PNG and CSS code.
Signing up for a free account will allow you to load, open and save your spritemaps as editable versions in the cloud.
Although many users will find SpritePad’s standard features to be adequate for their needs, professional frontend developers that routinely create CSS spritemaps may wish to upgrade to the SpritePad Premium service — which is payable monthly, for six months, or annually, at a price of €4.99 , €29.90 and €49.90, respectively, via PayPal.
SpritePad’s premium features include an automatic layout alignment tool, along with infinite cloud support and team collaboration functions.
“All your images get aligned automatically, saving as much space as possible, [it is] simply magic,” the spokesperson stated, adding that users can store as many CSS sprites as they want, as open, editable versions in the cloud — and can then share the spritemaps with other team members by simply connecting the account to as many people as needed.
If you’re tired of building and coding CSS sprites by hand, then SpritePad is for you.