What are the benefits of using CSS sprites ?
Last Updated :
22 Mar, 2022
In this article, we will know about the benefits of CSS Sprites, along with understanding their implementation through the examples.
The CSS Sprites are a collection or set of image files combined into a single file that an HTML document can access. These images are then called into use within the HTML code to be shown on the website. A web page working with many images can take a huge amount of time to load and generate multiple server requests. The primary benefit of utilizing image sprite is to reduce the number of HTTP requests that make the website’s heap time quicker. The images additionally load quicker making switching easy from one image then onto the next.
Example of CSS Sprites helps in Web Development:
Usually while designing web pages, the images are utilized as individual documents. Thus, when a client opens a webpage, the program needs to make an HTTP request for every one of these documents, download them independently and display them. This prompts higher page load times as a specific web page can have countless more modest pictures like buttons, symbols, logos. CSS Image sprites help web developers to join and mix these frequently used small images into one big image. The browser then has to work with only one file which is then displayed to required sections.
Working with CSS Sprites: With individual images, the developer can simply use HTML <img> tag and style it in CSS as required. But while working with CSS Sprites, a developer has to do 2 specific things:
- Creation of Sprite Sheet: For using CSS sprites, we have to first create the sprite sheet by merging all the desired elements like buttons, images, icons, etc. in a grid-like pattern. This can be done using any image editing software like Photoshop or Gimp. There are also many other online tools available that help to make a sprite sheet.
- Accessing a particular element from the grid using the background-position property: We have to use CSS attributes to access different parts of the sheet:
- width: Width of the sprite image.
- height: Height of the sprite image.
- background: Creates a reference to the sprite sheet.
- Background-position: Offset values (in pixels) for required parts.
Please refer to the CSS Image Sprites article for further detailed descriptions.
Here, we will understand the usage of CSS Sprites through the examples. There are several areas where the CSS Sprite is beneficial to use, some of them are discussed below:
Obtaining the image from the Sprite sheet:
Approach: We have created a sprite sheet with the dimensions of 200px*100px. When we share sprite sheets, we share all images under one. So for reobtaining our images back, we set our sprite sheet as the background and with known background-position which are known while creating the sprite sheet. Hence, in this way, we can obtain the desired images back from spite sheets. Consider a group of images that are going requested by the user.
Note: For obtaining an image from the grid, just set the size of the image in width and height, change the background-position to the desirous position. For instance, for obtaining first image, change the background-position to -10px,-10px.
Example 1: This example describes obtaining the image from the Sprite sheet.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Sprite</title>
<style>
.sprite.gfg {
background: url(
no-repeat;
width: 100px;
height: 100px;
display: inline-block;
background-position: -110px -10px;
}
</style>
</head>
<body>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Image Sprite</h3>
</div>
<div class="sprite gfg"></div>
</body>
</html>
|
Output:
Creating the Navigation List:
Approach: Here, we are creating the navigation list from the sprite sheet. Following the same concept, as we have applied above, we will be obtaining the images and later display them as a navigation list. We can add desired links to the navigation list items, later inside the body tag.
Example 2: This example describes the creation of the Navigation List.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
width: 90px;
display: block;
}
#gfg1 {
left: 0px;
height: 90px;
background: url(
-10px -10px;
}
#gfg2 {
left: 90px;
height: 90px;
background: url(
-110px -10px;
}
#gfg3 {
left: 90px;
height: 90px;
background: url(
-10px -110px;
}
</style>
</head>
<body>
<h2 style="color:green">GFG NAVIGATION LIST</h2>
<ul id="navlist">
<li id="gfg1"></li>
<li id="gfg2"></li>
<li id="gfg3"></li>
</ul>
</body>
</html>
|
Output:
Mouse Hover Effect:
Approach: We can create a mouse hovering effect using CSS Image Sprite. For this, we will be using the hover tag available with the item which we want to hover. We will first set the default views for each image setting up the background positioning. Then, later, we will create the secondary view which hover will display by changing the positioning.
Example 3: This example describes the Mouse Hover Effect.
HTML
<!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: 90px;
display: block;
}
#gfg1 {
left: 0px;
width: 90px;
background: url(
0 0;
}
#gfg2 {
left: 90px;
width: 90px;
background: url(
-110px 0;
}
#gfg3 {
left: 180px;
width: 90px;
background: url(
0px -110px;
}
#gfg1 a:hover {
background: url(
0 -10px;
}
#gfg2 a:hover {
background: url(
-110px -20px;
}
#gfg3 a:hover {
background: url(
0px -114px;
}
</style>
</head>
<body>
<h2 style="color:green">GFG MOUSE HOVERING</h2>
<ul id="navlist">
<li id="gfg1">
<a href="#"></a>
</li>
<li id="gfg2">
<a href="#"></a>
</li>
<li id="gfg3">
<a href="#"></a>
</li>
</ul>
</body>
</html>
|
Output:
Benefits of CSS Sprites
- Reduces the number of HTTP requests: The main reason to use CSS sprites is to cut back on HTTP requests, by bundling out the images into one file the number of HTTP requests gets reduced without affecting the actual amount of data transmitted.
- Reduces overall image size: As every kb matters, combining all of your reusable assets into one file will be smaller than if you sliced them individually.
- Independent of JavaScript: Hence less code to maintain, easier cross-browser testing, can be coded inline via style attributes, and no DOM hacking.
- Reduces loading Time: web page with many images can take a long time to load and generates multiple server requests which can be avoided using Sprites.
- Flexibility: It is flexible over the website’s layout and design.
Demerits of CSS Sprite:
- Higher development time: For slicing, combining, and programming background positions in the CSS.
- More maintenance time: Whenever any modification is needed, the full sprite has been re-generated carefully
- Less SEO friendly: Images sometimes are better be placed in the HTML than being in the background. HTML images can contain their Titles and Alternative texts which are more beneficial to SEO, while CSS backgrounds cannot do it effectively.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...