How to combine images using CSS sprites?
Similar to JavaScript and CSS, downloading multiple images incurs additional round trips. A site that contains many images can combine them into fewer output files to reduce latency.
The benefit of using CSS sprites
Imagine you have five images being used by your main webpage design and the browser has to download them individually. If they were combined into just one image, you could reduce the page speed dramatically. This reduces the round trips required to display your page, making your site faster. Instead of downloading five images, your webpage would now only have to download one. This is the beauty of CSS sprites. One resource, but several uses.
When you used many tiny images in your website like Background images, corner images, icons, menu items, etc. Each and every image must be downloaded, which means the web browser has to ask the server for it, the server has to send it, and then the browser has to display it. If this were only happening with one or two images, it would be fine, but as more and more images are being loaded, the worse it is for your page speed.
The solution for this scenario is called image sprites, which combine several small images into one image so that the web page can display significantly faster.
How to combine images using CSS sprites?
There are two main steps to take when creating CSS sprites. First you must make the image and second you must position the image.
For example, let’s say we have two images we want to display on a webpage for style purposes and wish to combine them into one. We must know the size of the images in order to create the sprite. We will use an example where both images are the same size (100 pixels by 100 pixels).
To combine these images we would create an image that was 100 pixels(width) by 200 pixels(height). We must call this image something, let’s call it “sprite_images.jpg”. The combined image has a width of 100 pixels and a height of 200 pixels. As such we could say that the first image resides in the top 100 pixels of the new image, and than the second image resides in the bottom 100 pixels of the new image.
We can use this knowledge to position our images correctly on our page. We will display the top half of the image when we want to display first image and the bottom half of the image when we want the to display second image.
Positioning the images on the page
For this example will we use the images as background images in div tags. This means that we will create empty div tags in our HTML to display images. For the first image we are creating a div tag with class name First class as shown below:
Now, we have to create CSS for displaying our first image in this div. Here is the code:
height:100px;
background:url(images/sprite_images.jpg) 0 0px;
}
The above CSS code is saying the width and height of the first image (100px by 100px) it is also calling the image “sprite_images.jpg” which is our combined image. Finally it is saying the “0 0px” part, which is how the sprite works. By telling the image to start at “0 0px” it is saying that the image should be displayed from 0 pixels X and 0 pixels Y. It is really saying start the image at the top and start the image at the left.
Since we defined the width and height of the image in the CSS, the image will only display 100 pixels down the image and will stop, thereby not displaying the second image at all.
Similarly, we are creating a div tag with class name Secondclass for displaying second image as shown below:
and CSS for this image should be like this:
height:100px;
background:url(images/sprite_images.jpg) 0 -100px;
}
In the above CSS code, the height and width properties are same as in the CSS of the first image, only the background property is changed as it is saying the “0 -100px” part, which is how the sprite works. By telling the image to start at “0 -100px” it is saying that the image should be displayed from 0 pixels X and -100 pixels Y. With this positioning, only the second image will display as the value of -100 pixels will leave the first image.
[…] 7.Combine images using CSS sprites:Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page. For more about combining images using CSS sprites go to our post : Combining images using CSS sprites […]