Home > Features > Sipping on a Sprite to Boost Site Performance • Bookmark   • Newsletters   • Register Search Options


Sipping on a Sprite to Boost Site Performance

Sipping on a Sprite to Boost Site Performance

August 27, 2011
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.

" The use of CSS sprites is nothing new and as such may represent a significant opportunity for those operators focusing on website optimization. "

Webmasters and designers seeking ways of speeding up the perceived load time of their websites have a powerful tool at their disposal: CSS sprites — a well-proven way to boost website performance.

While frequently overlooked, the use of CSS sprites is nothing new and as such may represent a significant opportunity for those operators focusing on website optimization.

Let us take a closer look:

For the uninitiated, a CSS sprite is nothing more than a master image composed of multiple images; with cascading style sheets used to determine the positioning of those component images. For example, a website that offers emoticons could use a different graphic for a smile and a separate image to frown — along with numerous other images that signify a range of user emotions. Combining these multiple images into a single CSS image sprite could give a tremendous boost to web pageloading performance.

The reason for this is that each image requires a separate call from the web page to the web server, with the round-trip processing delays often accounting for more than 80 percent of a page’s load time.

While this reasoning applies equally well to “photo” images as it does to page graphics, navigational images, emoticons, backgrounds and more, the file size of the sprite image also needs to be considered. For example, a dozen thumbnails from an image gallery are combinable into a sprite, but the full-size photos they link to should likely remain separate images, in order to avoid a multi-megabyte download.

To use sprites, you must first select the desired individual images and then combine them on to a base graphic — transparent PNG base images are typically used — that is large enough to accommodate the total pixel size of the individual images. For example, two 25x25-pixel images are combinable into a single 25x50-pixel sprite, a task readily performed in Adobe Photoshop, for instance.

For a hands-on example, try one of the many online sprite generators, such as www.csssprites.com.

As a test of this particular generator, three emoticons combined to generate a single sprite, with the resulting sprite PNG and enabling HTML code displayed, along with usage examples. The code is below:

.parent-element { background:url (result.png); }

To use image number one, add “background-position: 0px 0px;” for number two, the line changes to “background-position: 0px –28px;” and for number three, “background-position: 0px –53px;” — here, the horizontal width of all images remains the same, but the vertical positioning value changes to fully reveal the proper portion of the image. It is important to note that the parent element needs to be the same size as the displayed image. Enable linkable images by layering a transparent spacer PNG over the background, setting the spacer’s height and width in CSS.

An easy way to understand the process is to think of a CSS sprite as a book, with each image a page — if someone tells you to “turn to page 27,” you will see the content of page 27. Likewise, telling a web browser essentially to “turn the sprite to page 27,” will reveal the appropriate image. You did not load 27 images, just a single book, and then turned the page…

It sounds much harder to do than it really is and the benefits are quick and tangible. Try it yourself!


The Skinny on the New DMCA Requirement

The requirements under the Digital Millennium Copyright Act (DMCA) have changed, but the sky is not falling. We have, even as a law firm, been hit with an unbelievable amount of spam sent out by law firms... More »

2017 Outlook: Legal Matters Around the Corner

The adult entertainment business’ legal community recently weighed in the top issues that companies and the industry, as a whole, should be concerned about. XBIZ asked industry attorneys to discuss... More »

Fraudulent Brazilian Trademark Registrations Running Rampant

Although you might not think often about protecting your trademark rights in Brazil, you need to — even if you don’t yet have a single Brazilian customer. Scammers are constantly looking for... 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 World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.


The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona


Mar 31 - Apr 02
Denver, CO.
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!