Responsive image sprite
In 2006 Google found that by reducing the size of the page from 100KB to 80KB, their traffic shot up by 10% in the first week and then 25% in the following three weeks.
It’s clear that monitoring the performance of a website is a must and should not be ignored as being an integral part of our web design workflow.
GTmetrix, one of the best online tools, which gives us insight on how well our site loads and provides actionable recommendations on how to optimize it.
Today, we are going to talk about one of the recommendations given by GTmetrix.
Image Sprite:
Image sprites are a means of combining multiple images into a single image file.
A webpage with many images can take a long time to load and generates multiple server requests. Image sprites can reduce the number of server requests and save bandwidth. This method is easy when our website is not responsive. But using image sprite in a responsive website is difficult. Most of the people are recommending to use background-size and background-position in percentages (%). Which seems more difficult as you need to calculate actual percentages.
Let’s talk about some problems we face when we avoid using image sprite.
Suppose, we have some social icons and we are using single images for each. We need mouse over effects for them as well. If we have four social images then we need total eight images for both active and mouse over state. This is not difficult to integrate in HTML and CSS. But the problem is, this will increase server requests and take long time to load. Which is not good for our website performance.
Another biggest issue is, when we mouse over one of the icons, the image jumps to show the mouse over state. It happens when a user comes to a page for the first time. This jump is not a good user experience.
Preloading all the images can be a solution but it will not reduce the server request and load time.
Using image sprite can be the best solution. For responsive design we will do that in a different way.
For responsive image sprite, we have to arrange all the images vertically. In most cases, all the images will not be of same width, then the width of the sprite will be of same width of the largest image. And other images will be arranged one by one. We have to keep in mind that we should keep vertical spacing among the images as per our need.
The reason is, we may have designs in different sizes for different resolution. This method will help us to handle the sprite image using background-size property.
Example:
Suppose for 1920px desktop screen our image size is 32px, then we can write CSS like this:
background-size: 32px auto;and set background-position as per needed. Which is very easy to do in browser.
And for other resolutions the same process can be followed.
In these cases, we must create the sprite with high resolution images. Then image quality will not be compromised.
If we use 20–30 images for one sprite, then it will become hard to handle in CSS. So, we can divide them in 2 or 3 sprite images thinking about the usability. No one will twist our hand if we use 20–30 images in one sprite.😉
Here is a demo for more clarification.
