Reduce Your Page Load Time With Dynamic Image Sprites

By Author: danielaiden
Total Articles: 19
Comment this article

Use Cascading Style Sheets (CSS) Sprites to reduce Page Load Time.

The term sprites comes from old school computer graphics and the video game industry. The sprites was a big combined graphic which actually is one big image.

Sprites have been used in computer game graphics for many years to make animations smooth, and reduce load times. All frames of an animation are included in a single image, called a sprite sheet, and only certain areas of the image are visible.

The same principle of sprites with CSS, allows you to load all your images/icons for a particular use in a single file. You can then use one of those images/icons, and set the style sheet to reveal only that portion of the image you want to.

CSS sprites allows you to greatly

* Increase your websites speed by using single image files with multiple graphics

CSS Sprites as an extension of CSS technique:

* With CSS Sprites you can combine an unlimited number of images into one instead of just two or three images into one
* With CSS Sprites you can actually combine ten separate images for the buttons into ...
... one big image, instead of having five default states and five rollover states. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place your images into this new image, left align and one on top of the other with one pixel of white space between
* Each image on a web page is a separate server request
* The performance of a page gets increased dramatically as the images get combined and their number of requests reduced

CSS Sprites are especially useful when implementing mouse over changes. For instance, let's say you are using a background tile on your navigation menu. When users place their mouse pointers over an item in the navigation menu, you switch to a different background tile to change the appearance of the navigation item. The CSS might initially look something like:

#navitem {
height: 50px;
width: auto;
background: url(bg1.jpg) repeat-x;
}
#navitem:hover {

background: url(bg2.jpg) repeat-x;
}

if we implement a CSS sprite for the background change, there is no waiting when you mouse over the item. It immediately displays the new background image. The image does not need to reload, it simply moves. To implement it, you would create a new image that combines the two previous images.

Our new CSS will look something like:

#navitem {
height: 50px;
width: auto;
background: url(bg-sprite.jpg) repeat-x 0 0;
}
#navitem2 {
background-position: 0 -120px;
}
Benefits of using the Sprites method:

1. cSprites now has a very fine SEO behavior. You can let it automatically generate ALT and TITLE tags based on its Post title, categories or image name
2. Reduce the overall size of the page reducing the number of bytes (and packets) needed to be transferred over the Internet
3. Limit the number of embedded objects on the page, such as images, each of which must be requested and transferred separately from server to browser
4. Reduce the number of HTTP requests and it is a page optimization technique
5. People can no longer copy/download your images directly. They have without first going into the find the CSS sprite-ed image file and crop the image they want with photoshop. You can still link the sprite-ed images to the originals, because cSprites doesn't delete your original images

Disadvantages of using cSprites method:

* Increased time Spent Slicing a Design
* Increased time Spent Coding and Maintaining
* Not Everything Should Be a Background just as the figure in content
* Improper Use of Sprites Affects Accessibility
* CSS sprites do not print properly in many browsers

Conclusion:

* Build master images that are smaller than the sum of their collective slices by combining images of similar colors
* Instead of using a different and distinct image for an element, reuse one that you already plan to use elsewhere
* CSS is put to use to separate and reorganize that image. The sprite itself is generally used to combine many small images into one large image. This is done not only to save precious loading time and bandwidth, but also to keep your site structure clean and manageable