Optimize your Performances with CSS Sprites

Everybody wants to maximize their store’s loading speed. In this need for speed era, every second counts to retain customers from bouncing off your page to your competitor’s store. Images usually take the longest to load, but does everyone know about a little trick called CSS Sprites? It might just save that one second you and your potential customers are looking for!

What are CSS Sprites?

Good question, a sprite is actually one big image composed of multiple little images. These multiple images are combined into one. You can combine an unlimited number of images into one large image. This image will contain all of the smaller images that are necessary to load onto any given web page. (Unverified Record: the most times the word “image” has been used in 4 sentences)

The idea is the simple: Instead of loading multiple small images multiple times, group all the images into one single file and load the entire image once while only displaying parts of it. This saves valuable memory time off the server from constantly requesting to load images, thus making your website load faster, bingo.

How Does it Make Your Website Load Faster?

It is all about decreasing the number HTTP requests that are needed to load a page. Web browsers can only do a few HTTP requests in concession. Every time there is an HTTP request it needs to communicate to the server and back to the browser again (also called a round trip) this takes a long period of time. We all now have “fast” internet downloading speeds. The speed of our bandwidth is not the issue, it’s the time it takes to fulfill many HTTP requests for small images like icons, buttons etc…

By using CSS sprites, you will minimize the number of round trips to the server thus making your store load faster.

Here is an example of a CSS Sprite from Amazon in which they are loading multiple small icons.

How to Use CSS Sprites?

It’s really simple. Below is a code snippet that you can play with your own sprites:

Before :

HTML
<a href=”#” title=”sprite example” id=”sprite_link”><span>hello</span></a>


CSS
#sprite_link {
display:block;
width:80px;
height:40px;
background:url(sample-link.jpg) 0 0 no-repeat;
}
#sprite_link:hover,#sprite_link:active,#sprite_link:focus{
background:url(sample-link-hover.jpg) 0 0 no-repeat;
}
/* allows to hide the link’s text */
#sprite_link span{
text-indent: -5000px;
display:inline-block;
}

After :

HTML
<a href=”#” title=”sprite example” id=”sprite_link”><span>hello</span></a>

CSS
#sprite_link {
display:block;
width:80px;
height:40px;
background:url(global-sprite.jpg) 0 0 no-repeat;
}
/* moves the background image up 40px to display the hover stage */
#sprite_link:hover,#sprite_link:active,#sprite_link:focus{
background-position:0 -40px;
}
/* allows to hide the link’s text */
#sprite_link span{
display:inline-block;
text-indent: -5000px;
}

-Voila!

It’s In the Detail

When you make the CSS Sprite image, we need to make sure that we position the images perfectly aligned or they will not display correctly.  If the image does not fit you will have to re-export the whole entire image and change the alignments of all the images. It definitely takes careful and detailed work in order to get the desired results. Be careful not to overdo your CSS sprites, in general CSS Sprites are used for all icons, smaller images, and buttons of a large website.

Online Sprite Generators

There are many online CSS Sprite generators that you can use to easily add your images to. Here is a short list to check out.

-Sprite Me http://spriteme.org/

-CSS Sprite Generator (Project Fondue) http://spritegen.website-performance.org/

- CSS Sprites Generator http://csssprites.com/

-CSS Sprite Creator http://www.web2generators.com/graphism/css_sprite_creator

Now go on and make the fastest loading, least server intensive Ecommerce store by utilizing CSS Sprites.