Using CSS Sprites is a way to combine multiple images into a single image file for use on your website in order to help performance.
Given that you will create a great image, the sprite may seem a little wrong, but sprites should help clarify things. The term “sprites” comes from a technique in computer graphics, often used for video games. The computer can bring graphics to memory, then only display parts of the image at a given time.
A Sprite is basically a combined graphic. CSS Sprites help you get the image once and move it around and display parts of it. This greatly reduces the overhead of obtaining more images. Therefore, a sprite is a collection of images gathered in a single image. A web page with multiple images can take longer to load and generate more server requests. Using sprites of images will help you reduce the number of requests to the server and will save bandwidth.
So, instead of using 3 individual pictures, we will use a single image instead. With CSS, we can display only the part of the image that we want to use or display. Below are three sprites images created using the CSS Sprites Generator. During this article, we will use the first one of them (sprites.gif), which has 132x43px dimensions:
In the lines below we will provide a simple example in which we will use our CSS image sprites.gif:
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 43px;
height: 43px;
background: url(sprites.gif) 0 0 no-repeat;
}
#next {
width: 43px;
height: 43px;
background: url(sprites.gif) -89px 0 no-repeat;
}
#back {
width: 43px;
height: 43px;
background: url(sprites.gif) -43px 0 no-repeat;
}
</style>
</head>
<body>
<img id="home" src="trans.gif" width="1" height="1"><br><br>
<img id="next" src="trans.gif" width="1" height="1"><br><br>
<img id="back" src="trans.gif" width="1" height="1">
</body>
</html>
The displayed image will be the background image that we specify in CSS width: 43px, respectively 43px height – defines the portion of the image we want to use; background: url (sprites.gif) 0 0 no-repeat; – defines the background image and its position (left 0px, top 0px) with the property no-repeat. The img attribute defines a small transparent gif, because the src property cannot by left empty. The image is shown above, next to the code.
Next, we will use the sprite image (“sprites.gif”) to create a navigation list. In the example below we will use an HTML list because it can be a link and accept a background image.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 43px;
display: block;
}
#home {
left: 0px;
width: 43px;
background: url('sprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('sprites.gif') -46px 0;
}
#next {
left: 129px;
width: 43px;
background: url('sprites.gif') -89px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="https://informaticaccmb.wordpress.com/"></a></li>
<li id="prev"><a href="https://informaticaccmb.wordpress.com/about/"></a></li>
<li id="next"><a href="https://informaticaccmb.wordpress.com/contact/"></a></li>
</ul>
</body>
</html>
In the rows below, we would like to add a passing effect to our navigation list that was created above. We will use a hover effect on image sprites. To do that, we will also need a hover image sprite, in our case sprites_hover.gif, that has the exact dimensions as the initial image, sprites.gif. You can create whatever effect do you want on the hover image. Therefore, the image we will use contains three small navigation images and three small images to use for the effect we want to use, namely the loading effects. Given that it is a single image and not separate files, basically the upload speed of the image will not be delayed. We will add a few lines of code to add the hover effect:
#home a:hover {
background: url('sprites_hover.gif') 0 -43px;
}
The complete example is listed below:
<!DOCTYPE html>
<html>
<head>
<style>
/*position is set to relative to allow absolute positioning inside it*/
#navlist {
position: relative;
}
/*margin is set to 10px, list-style is removed, all list items are absolute positioned, the margin top is set to 20px */
#navlist li {
margin: 10px;
list-style: none;
position: absolute;
top: 20px;
padding-left: 2px;
}
/*the height of all the images are 43px*/
#navlist li, #navlist a {
height: 43px;
display: block;
}
/*Positioned all the way to the left, and the width of the image is 43px and the background image is sprites.gif and its position is left 0px, top 0px and no-repeat*/
#home {
left: 0px;
width: 43px;
background: url('sprites.gif') 0 0 no-repeat;
}
/*Positioned at 63px to the left, and the width of the image is 43px and the background image is sprites.gif and its position is at 44px right from the home image*/
#next {
left: 63px;
width: 43px;
background: url('sprites.gif') -44px 0 no-repeat;
}
/*Positioned at 129px to the left, and the width of the image is 43px and the background image is sprites.gif and its position is at 89pxright from the home image*/
#back {
left: 129px;
width: 43px;
background: url('sprites.gif') -89px 0 no-repeat;
}
/*Positioned at 0 , with the width of the image is 43px and the background image is sprites_hover.gif */
#home a:hover {
background: url('sprites_hover.gif') 0 -43px;
margin-left:1px;
}
/*Positioned at 44px right from the home hover image , with the width of the image is 43px and the background image is sprites_hover.gif */
#next a:hover {
background: url('sprites_hover.gif') -44px -43px;
margin-right:5px;
padding: 1px;
}
/*Positioned at 89px right from the home hover image , with the width of the image is 43px and the background image is sprites_hover.gif */
#back a:hover {
background: url('sprites_hover.gif') -89px -43px;
margin-right:5px;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="https://informaticaccmb.wordpress.com/"></a></li>
<li id="next"><a href="https://informaticaccmb.wordpress.com/about/"></a></li>
<li id="back"><a href="https://informaticaccmb.wordpress.com/contact/"></a></li>
</ul>
</body>
</html>
Conclusion
A web page with many images, especially small images (such as buttons, icons, etc.) may take longer to load. Using image sprites instead of separate images will significantly reduce the number of HTTP requests that you make from the browser to the server, which can be extremely effective in improving the loading time and the overall performance of your website.
