Dev Depot: Spritepad, Speeds Website Delivery

Stephen Yagielowicz

Calling itself the easiest way to make CSS sprites, SpritePad could save web designers countless hours of tedious work.

Savvy web designers know that one of the easiest ways to speed up a website is by consolidating multiple graphics files into a single image; using CSS to specify the dimensions and X- and Y-axis of the selected portion of the final file (known as a “sprite”). The benefit of this approach is in reducing server calls, eliminating the back-and-forth negotiations between server and client (the web browser) usually involved with the request and delivery process.

Using SpritePad is as simple as dragging and dropping images onto the speed-optimized workspace.

While sprites make a definite impact on page load times, creating them is usually a time-consuming process, combining multiple smaller files into one Photoshop image file, for example; and then manually calculating the individual image’s dimensions and positioning and then applying that data to the CSS file.

There is a lot of room for errors and transcription problems, leading to unneeded frustration.

A product of German company KISS, SpritePad ( is a free online tool that automates and streamlines the creation of CSS sprites; producing high-clarity, bandwidth-optimized sprite images, along with their enabling valid CSS code, in a mere matter of moments.

According to its publisher, using SpritePad is as easy as writing e-mails — with a background grid, guides, rulers, magnetic alignment and smart document fitting, among other tools, which promote easy CSS coding and sprite generation.

Using SpritePad is as simple as dragging and dropping images onto the speed-optimized workspace, where they become immediately available as a single PNG sprite along with its accompanying CSS code — without the use of external tools such as Photoshop and without manual CSS style assignments.

The sprite and code snippet updates instantly, each time a new image is added, moved or changed, so there is no need to do the same work twice.

SpritePad is compatible with all modern web browsers. The service enables users to work wherever and whenever they want, by registering a free account to download, load, and save their CSS sprites as editable versions, stored online in the company’s cloud. Free accounts allow web designers to store and access up to two CSS sprites, while premium users have the ability to store and share additional sprites, and to make use of the SpritePad collaboration engine, which allows team members to share resources.