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


Data Privacy Is Tightening Up in the E.U.

Have you begun preparing for GDPR? If you are like most, you haven’t even heard of GDPR, but also if you are like most, it is going to affect your business, starting May 25, 2018. The GDPR, or General... More »

Preventing Legal Problems Before They Start

Dentists typically recommend that a person’s teeth be cleaned every six months and that oral X-rays be taken at least once every year. Internists recommend that a person receive a physical examination... More »

Could Adult Content Be Banned?

Earlier this month, I met with the Free Speech Coalition’s board of directors for our annual review. Despite the headwinds our industry faces, politically and economically, we are, as an organization,... 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.
Subscribe to XBIZ Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.


Latin America Adult Business Expo

Jul 10 - Jul 12
Cartagena, Colombia

ANME Founders Show

Jul 16 - Jul 18
Los Angeles Marriott Burbank Airport


Aug 03 - Aug 06
Montreal, Quebec

XBIZ Berlin 2017

Sep 11 - Sep 14
Berlin, Germany
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!