Ecommerce Blog - The #1 Source for Ecommerce News, Tips and Trends!

Get ecommerce updates, news, and insider tips from the experts at PrestaShop!

Ecommerce Blog - The #1 Source for Ecommerce News, Tips and Trends!
 

< Back to the Blog home

CSS Sprites – Why They Work and How to Use them

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.

CSS Sprites

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.

  1. Thanks for this article. Sprites have a double effect.
    - First as you said, they “retain” customers because the website is faster. So you improove conversions.
    - Then, the may also increase trafic, because a good speed is a quality signal for search engines. So, when you are faster than your competitors you may rank higher in search engine page results… of course, it is not the only factor that Google (and others) will take in consideration, but it is one of them.

  2. CSS spriting is realy easy with Compass

  3. really sprites increase the look of the web site and they were are light wieght so there is effects on your web page performance.

  4. Author: eikc

    Date: March 20, 2013 at 10:28 am

    In denmark i run a small webshop that sells boxershorts with a partner of mine. We just launched our 1.5 upgraded design and webshop. We use the twitter bootstrap framework to build the whole design!

    With the bootstrap framework we have removed alot of the images we used for buttons and use CSS to style the buttons instead and CSS sprite with icons give some graphical life to the buttons.

    it has speeded up our webshop a lot going this way, even tho HTML5 and CSS3 is pretty new and not completly supported but still AWESOME!

    Have a lovely day! :-)

    • Author: benjamin utterback

      Date: May 22, 2013 at 6:26 pm

      Hi Eik, thanks for the feedback. It’s true, CSS Sprites definitely speed up your website because it makes the website less server intensive with fewer HTTP requests. Keep us posted about the developments of your shop. Good luck and Happy Selling!

  5. Author: Frederick

    Date: April 17, 2013 at 9:01 pm

    Great article, another good one right here:

    CSS Sprite Example

  6. Another benefit is that usually you just have one Fireworks or Photoshop file to edit, rather than many small files, which can be really slow to maintain.

    • Author: benjamin utterback

      Date: May 21, 2013 at 6:40 pm

      Hi JR, good point, this is true. CSS Sprites make it easier on you, your customers and your server.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>