Speed of the websites is the pain point for almost everyone having online presence. There are several reasons for it but the one which we are going to discuss is related to images. This article will dive deeper about the following.
- About CSS Sprites
- Working of CSS Sprites
- Method to combine images using CSS Sprite
Lots of images on a webpage often reduce the page load time or speed of site. This is because whenever browser loads the images of the webpage it sends a request to the server and thus additional HTTP requests are created for each image file.
Now, what is the solution?
CSS Sprites is what comes for our rescue. It is a technique to combine multiple images in a single image. Therefore, it reduces the rendering time of a web page.
To illustrate, consider there are 6 images in your web page. This means six times HTTP requests will be sent to the server. Whereas if all the images are combined in a single image file, this means only one request is required to be sent to the browser. The necessary will be displayed by offsetting the image file. This eventually results in fast loading of the page.
How CSS Sprite works?
Several images are merged into a single sprite sheet and are placed in a grid like pattern. When a particular image is required:
- CSS references the sprite sheet
- Offset it by the index of the desired sprite
- Define the size of sprite in pixels
This technique is applied when a web page has multiple images of the same size such as (buttons, & logos).
How to combine images using CSS sprite?
You can use any image editing tool to create CSS sprite sheet.
- Create a grid of pixels
- It will allow you to position the image and reference the images
- Add the images
- Mostly the images are grouped according to the size in the sprite sheet. Sometimes small images fit into single cell whereas large images might take up multiple cells.
- Add the CSS
- There are three attributes which are required to consider when creating a sprite in CSS i.e. height, width and background. To define the size of the image, height and width is used and background is used to define the sprite sheet and location of the sheet.
- Add the element to the page
- An image tag with placeholder image is required to reference the CSS sprite by Id or class. The placeholder image is replaced by the sprite when the page loads.
Advantages of CSS Sprites
- Cashing a single file
- Improves the page load time
- Fewer HTTP requests to the web servers.
This is the key strategy to improve the responsiveness. Major service providers who handles millions of users like Amazon, Apple, Facebook and Google make extensive use of CSS sprites.