Skip to content
Combine Images Using CSS Sprites
1. Quickread
Almost all of your visitors increasingly rely on mobile to access digital content and services. A consumer study shows that the stress response to delays in mobile speed is similar to that of solving mathematical equations and waiting in a checkout line at a retail store. The delays caused by mobile speed are frustrating, and also have a negative impact on your site.
So, to reduce the speed of your site CSS sprites technique is a way to reduce the number of HTTP requests made for image resources, by combining images in a single file. It allows a lot of images to be grouped on the same image file.
In this blog, you will learn what exactly are Sprite images, how it works, and step by step guide how to combine all images into CSS sprites.
2. Why does speed matter?
Almost all of your visitors increasingly rely on mobile to access digital content and services. Your customers are also more demanding for looking up the more combinations of products.
When it comes to their experience on your site, they are not only comparing you with other sites but also they are rating your website against the best in class services they use every day.
A consumer study shows that the stress response to delays in mobile speed is similar to that of solving mathematical equations and waiting in a checkout line at a retail store. So, delays caused by mobile speed are frustrating, and also have a negative impact on your site.
3. What is the Sprite Image?
Most webpages use several small images in their design such as background images, corner images, icons, menu items, etc. These tiny images really add up when you look at it from the standpoint of page speed.
The speed of your site becomes slow when more and more images are loaded. If you utilize the Sprite image the speed of your page gets faster.
Sprites are those images that are made up of combining small images into one larger image. To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image.
So, making use of Sprite image the loading time will get reduce for all images present on your site.
4. How do CSS Sprites work?
The CSS sprites combine all small images that work on the same principle as used in game development for spriting.
The additional HTTP requests are created for each image file when the web browser requests the server to load images. If images are combined with CSS spriting, all images are grouped in the same file.
As a result, only one HTTP request is sent to the webserver by the browser. Then according to the request, the server sent the sprite image that includes all images.
Hence, the speed of your site becomes faster as:-
- The only one HTTP request gets created for downloading all images.
- The sprite image is used, which loads quickly.
5. Advantages of Using CSS Image Sprite:-
- Fewer HTTP requests required for sending to the webserver. Reducing the number of HTTP requests has a major impact on reducing response time that makes the web page more responsive for your user.
- Improved page load times by quickly downloading many images at one time.
- Caching only a single file of sprite image instead of caching all image files.
6. How to combine images into CSS sprites
Let’s consider you have 5 images, so to load these all images one by one, it takes more time.
Using the CSS sprite technique you can reduce the number of HTTP requests by 10 and the total file size of the image by 35.4 KB as compared to the [EXAMPLE – A]. That’s a huge improvement for such a small example.
Making the Image Sprite
You can create a sprite image using any image editor tool by combining the small 10 images as shown in the image:-
Display an Icon from Image Sprite
You can display just the part of an image sprite by utilizing the CSS.
First of all, you have to create the class .sprite which load your sprite image. This is to avoid repetition because all items share the same background
.sprite {background: url("images/mySprite.png") no-repeat;}Now, define a class for each item you wish to display.
For example, to display the smiley icon, form the image sprite the CSS code would be.
.smiley {width: 50px; /* Icon width */height: 50px; /* Icon height */display: inline-block; /* Display icon as inline block */background-position: 0 -200px; /* Icon background position in sprite */}How did you get pixel values for the background-position?
The first value is for the horizontal position, and then another is for the vertical position of background. As the upper-left corner of smiley touches the left edge so its horizontal distance from the starting point.
It also called the top-left corner of the image sprite is 0, and since it is placed on the 5th position so its vertical distance from the starting point of image sprite is 4 X 50px = 200px because the height of each image is 50px.
It also called the top-left corner of the image sprite is 0, and since it is placed on the 5th position so its vertical distance from the starting point of image sprite is 4 X 50px = 200px because the height of each image is 50px.
You can display an individual icon from an image sprite by using this method. This is the simplest way to use a sprite image.
Creating a Navigation Menu Using CSS Image Sprite
You can set all the common CSS properties such as color, background-image, display, padding, etc.
menu{height: 50px;line-height: 50px;display: inline-block;padding-left: 60px; /* To sift text off the background-image */color: #3E789F;background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */}Now, you can also define a class for each menu item, because every item in the image sprite has different background-position.
For example, the smiley is placed at the starting point that means the top-left corner of the image sprite, so there is no need to shift the background-image. Hence the vertical and horizontal position of the background, in this case, would be 0.
Similarly,define background-position for other icons within the image sprite.
menu .smiley {background-position: 0 0;}menumenu .chocolate {background-position: 0 -100px;}menumenu .pen {background-position: 0 -200px;}menumenu .glass {background-position: 0 -300px;}menumenu .tree {background-position: 0 -400px;}Here, is your final HTML and CSS code after combining the whole process:
