Cut down page load speed by using CSS Sprites

css3-300x223One of the reasons why sometimes a webpage takes a lot of time to load all contents is because of the tremendous HTTP requests which most of the time happens if the webpage you are trying to view contains a big amount of images to display.

In order to lessen this problem, all you need to do is to use a CSS trick to cut back on HTTP requests to make the loading time faster. To help you visualize in a bigger picture, think of a series of images stacked together in one image and saved as a single file (such as the given example on the side) and then later applying these smaller images to containers or buttons in your html document.

This is what CSS Sprites are all about. It is a technique used to break down an image into smaller or multiple pieces through the use of CSS. The advantage of CSS Sprite is to lessen the HTTP requests by the browser when downloading images; because the lesser the requests the better and faster the page loads. Also, it saves you time by merging relative images into one larger image instead of breaking it into separate files and folders. It will also allow you to have a better control of the images using CSS rules.

css1

Let us make the above image (nav.jpg) as an example to come up with a simple Navigation bar shown below.

Note:  Each styled rectangles are “150px” wide and “50px” tall and are separated

css2 with a “10px” white space in all sides. For the sake of this discussion, each rectangle is label with numbers.

Let us first start with the HTML code:

<div>

            <ul id="navigation-list">

                        <li id="item1"><a href="?id=1">Item 1</a></li>

                        <li id="item2"><a href="?id=2">Item 2</a></li>

                        <li id="item3"><a href="?id=3">Item 3</a></li>

                        <li id="item4"><a href="?id=4">Item 4</a></li>

            </ul>

</div>

 

In this example, we are going to create four items list using unordered list and will assign it to an ID of “navigation-list”. Each item will be assigned to ID’s “item1”, “item2”, “item3”, “item4” respectively.

Then, the CSS:

  #navigation-list { list-style:none; margin:0; padding:0; }   #navigation-list li {   width:150px;   height:50px;   float:left;   background:url(img/nav.jpg) transparent -10px -10px no-repeat;   text-align:center;   line-height:3em; } #navigation-list li a {  color:#fff; text-decoration:none; text-transform:uppercase; font-weight:bold; }  #navigation-list #item1:hover { background-position:-10px -70px; } #navigation-list #item2:hover { background-position:-170px -130px; } #navigation-list #item3:hover { background-position:-330px -130px; #navigation-list #item4:hover { background-position:-490px -70px; }

 

Line 1 – will set the unordered list with an id of “navigation-list” with no bullet, margin and padding.

Line 3 and 4  – will set the dimension of each list items of the “navigation-list”.

Line 5 – will make the list items display next to each other and not as a list.

Line 6 – will set the background image for each list item, setting the offset to -10px for the horizontal position and -10px for the vertical position and the image will only be displayed as the background once (Rectangle 1).

Line 7 and Line 8 – will set the text alignment to center and the line spacing to 3em

Line 10 to 15- will set the appearance of the text of each list items

Line 16 – will set the position of the background of the first list item on hover setting the offset to -10px for the horizontal position and -70px for the vertical position (Rectangle 5).

Line 17- will set the position of the background of the second list item on hover setting the offset to -330px for the horizontal position and -130px for the vertical position (Rectangle 10).

Line 18 – will set the position of the background of the third list item on hover setting the offset to -170px for the horizontal position and -130px for the vertical position (Rectangle 11).

Line 19 – will set the position of the background of the fourth list item on hover setting the offset to -490px for the horizontal position and -70px for the vertical position (Rectangle 8).

 

To compute for the position:

* Refer to (nav.jpg)

Given:                                                 

Width: 150px                     Height: 50px                       Spaces: 10px

 

Therefore, position of:

Rectangle 1 is

horizontal: -10px; top: -10px;

Rectangle 5 is

horizontal: -10px; top:  (Height) + (Spaces) =  50px + 10px + 10px = -70px

Rectangle 10 is

horizontal: (Width) + (Spaces) =  150px + 10px + 10px = -170px; top: (Height) + (Spaces) = 50px + 50px + 10px + 10px + 10px = -130px

Rectangle 12 is

horizontal: (Width) + (Spaces) = 150px + 150px + 150px + 10px + 10px + 10px + 10px = -490px; Top: (Height) + (Spaces) = 50px + 10px + 10px = -70px

A negative value is given in order for us to position the image as a background correctly by using the negative value of the answer or by shifting the image to its correct position. But if you don’t like to do the math, you may visit Sprite Cow for a more precise and faster way of getting the positions. [ See http://spritecow.com/ ]

This CSS trick has been implemented for quite sometimes and has proven to reduce the HTTP Requests and make page loading faster. Ask, Facebook, YouTube, Google and Yahoo are some of the websites practicing this technique.

But just to remind you before using it, CSS Sprite is not applicable for repeating images. It is only applied to single-block element or to those which have defined dimension. So, at some point you will still have to do slicing.

 

Sources:

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them by Chris Coyier, CSS Tricks – http://css-tricks.com/css-sprites/
CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea, A List Apart – http://www.alistapart.com/articles/sprites/
 Mystery Of CSS Sprites: Techniques, Tools And Tutorials By Sven Lennartz, Smashing Magazine – http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
The Advantages of Using CSS Sprites Along With a Few Tips, Design Reviver – http://designreviver.com/articles/the-advantages-of-using-css-sprites-along-with-a-few-tips/

Leave a Reply

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

BACK TO TOP