Image Sprites
In the old days on a website if we want to use small icons then we used .png images. It creates a number of HTTP requests and made our website slow, But nowadays there is a solution to minimize HTTP requests by using the image sprites concept of CSS.
What is Image Sprite?
Image sprites are a collection of small images into one larger sheet. Image Sprites concept is that you should contain small images on one sheet by using photoshop, or there are many online websites where you can generate image sprites.
We use background-image property and background-position property for image sprites; using background-position we move our image x-axis or y-axis. We use the same image just changing the position of an image.
Advantages of Image Sprites
Let’s see the advantages of Image Sprites, which are following:
1. Reduce HTTP Requests
Image sprites help us to reduce HTTP requests; by reducing HTTP requests we make our website faster as compared to the old days when we use normal .png icons.
2. Make our Website Fast
When we use image sprites; means collection of the small image into one large image, it reduces the size of the image so it loads faster as compared to the load number of .png images one by one.
How to Use Image Sprites
First, you have to create a small image into one large sheet by using photoshop or by using an online tool like this:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.fb
{
width:260px;
height:180px;
background-image:url("images/social-icons.jpg");
float:left;
}
.tw
{
width:260px;
height:180px;
background-image:url("images/social-icons.jpg");
background-position:-260px 0;
float:left;
}
.insta
{
width:260px;
height:180px;
background-image:url("images/social-icons.jpg");
background-position:-485px 0;
float:left;
}
</style>
</head>
<body>
<div class="fb"></div>
<div class="tw"></div>
<div class="insta"></div>
</body>
</html>
In this example I have used a single image many times by just changing the background position of an image, I have changed the background-position of an image x-axis, you can change the y-axis as well.
Important:
- To create image sprites; image icons should have the same size.
- Icons should be on equal distance.
Categories: web designing css
.svg)