Performance
Talking about benefits, it reduces number of https requests to the server. If you have designed the images individually (one image, one file), the browser has to send multiple requests to extract the images one-by-one from the server and display it. Therefore, the first benefit (or advantage) that comes to our mind is performance.
Compiling these individual images into one single file will allow the browser to make a single request. Usually, a single file is much lighter (in size) than multiple files, and will reduce page load time.
However, be advised, a single file does not mean lightweight. A sprite may have many small images squeezed together to form a single unit and might even look large. On the other hand, imagine how many requests the browser has to send to the server to fetch all the small images.
Reduced number of https requests will reduce valuable bandwidth usage, thereby putting a huge smile on your user’s face, especially if they are using 2G or 3G connections with a limited package.
Using CSS with Image Sprite
Web developers need to write extra codes to pick up and display a particular image from a collection of images. It becomes a little more difficult, when you have to find the exact coordinates (x, y) of an image.
Speaking of image coordinates, web developers have found this post and its code useful for locating the x and y coordinates of an image. The script is written in jQuery and uses the .offset() method, that returns the coordinates on mouse events.
After we get the precise coordinates, we can use CSS to set the background image using the x and y values. Using CSS background property we can easily adjust the image over a range of elements, such <li>, a <div> or a <nav> element.
This is a consolation for developers, as it reduces extensive use of client scripts, such as jQuery or JavaScript, to set the images on the mentioned elements.
Here's an example!
The image above has six different icons (colored, black and white) bundled together (vertically) in a single file. Let us assume, we have navigators (menus) on our web page and each navigator will display different icons for specific task. Therefore, we need to pick up an icon from the image (as background) and place it accordingly.
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Sprites</title>
<style type="text/css">
#topmenu {width:auto;font:15px Verdana;}
#topmenu ul
{
margin: 0;padding:0;
}
#topmenu li
{
display:inline-block;
width:55px;
padding:5px 20px;
border:solid 1px #CCC;
}
#topmenu #n1
{
background:no-repeat url('../../css-tutorials/sprite-image.png') 70px 3px;
}
#topmenu #n2
{
background:no-repeat url('../../css-tutorials/sprite-image.png') 69px -32px;
}
#topmenu #n3
{
background:no-repeat url('../../css-tutorials/sprite-image.png') 69px -66px;
}
</style>
</head>
<body>
<p>Show menus with different images extracted from an Image Sprite!</p>
<div id="topmenu">
<ul>
<li id="n1">Nav 1</li>
<li id="n2">Nav 2</li>
<li id="n3">Nav 3</li>
</ul>
</div>
</body>
</html>Output
Each navigator or menu has a unique id and accordingly the icons are set using x and y coordinates. We have defined the coordinates (in pixel px) immediately after the image.
If you are web developer but not a designer, then you have to plan the navigator elements and accordingly ask your designer to design the sprite judiciously. Look at the image carefully and you will notice that the distance between each image is proportionate to the height of each navigator (menu - <li>) on our page.
Dynamic CSS Image Sprite
Using CSS, we can display the images dynamically. When a user rolls the mouse over a navigator, it should change the existing image with another (the black and white images). There is no need to write a script for this purpose, but a simple CSS trick will to it.
Add the below three line inside the Style section of your HTML page.
#topmenu #n1:hover {background-position:70px -97px;}
#topmenu #n2:hover {background-position:69px -132px;}
#topmenu #n3:hover {background-position:69px -166px;}In the beginning of our design, we have set the first navigator’s coordinates as 70px and 3px, which displayed the first colored icon. When the mouse hovers over the navigator, we will change the background position with “70px and -97px”, the location of the similar image with black and white color. Follow similar positioning methods for other two navigators.
CSS image sprites are very useful and widely used to improve performance of web pages. However, do not overuse it by filling too many images in one file. From a maintenance point of view, it may end up giving headaches to web developers if the size of images or icons is frequently changed. The developer will then have to change the coordinates and other CSS parameters of the element such as width, height, padding etc.
CSS Sprites are usually large images with a good collection of small images or icons. Never add big images to the list.