Home > Features > Dev Depot: SpritePad, Sprinting Through Sprites • Bookmark   • Newsletters   • Register Search Options


Dev Depot: SpritePad, Sprinting Through Sprites

Dev Depot: SpritePad, Sprinting Through Sprites

May 22, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 140 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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.

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.


WIA Profile: Kristi Greer

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »

Q&A: Dorr’s Ivan Ho Discusses Launch of Luxury Toy Line

Dorr made its debut with a sophisticated selection of vibrators and an “advanced intimate toy care system” with a UV light for disinfection. Dorr is a manufacturer, design house, engineering... More »

Quantox: IT Company Has Familiar Faces

As the adult entertainment business continues to become increasingly specialized and companies focus more intensely on what they do best, a number of highly qualified consulting firms are supplying services... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Access the latest issues of the industry's leading trade publications in digital form. View online or download for offline viewing.



Oct 05 - Oct 07
Hannover, Germany


Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!