blog posts

In the previous article of the GTmetrix training series, we learned how to fix the Enable Keep-Alive error. If you have noticed, the site will load faster if we send requests to the server simultaneously. But this is not the only issue, and the more the number of requests, not only it will not get better; on the contrary, it will get worse. I will discuss how to fix the Combine images using the CSS sprites error in GT Matrix in this tutorial.

Combining images using CSS sprites is a solution where you can display part of the images and hide part by using CSS language. That is, it is possible to reduce the number of HTTP requests by placing several images that are static so that only one request is sent to the site, but at the same time, we can display a part of the image. So, if you want to fix this error and increase the site’s speed, stay with us until the end.

Training on how to fix Combine images using CSS sprites error

I’ll start with an example to better understand what Combine images using CSS sprites is. Consider a site like DigiKala, which has several thousand visitors daily; in the footer and product pages of this site, there are a series of images related to social networks, shipment status, etc., which are fixed on all pages. Every user who enters this site will send a request to the server to load these images. Every request is equal to involving the server; if you check the large level of visits to Digikala and, on the other hand, the number of static images that are loaded every time, the server will be constantly involved with the request. This conflict can be disastrous and cause a severe drop in site speed.

But for this, there is a way to put these still images together using photo editor programs. Then prepare a final output from this set of images and have one image instead of several images. So in this case, if we consider the following image as an example, where there are seven images, seven requests will be sent to the server to load these images. But by putting these images together and preparing an output, 7 images can be placed inside one image and used, in which case, only one request will be sent to the server. In this case, we have reduced the number of requests by 6 times.

Now you might be asking, well… how do we use this one image in such a way that we only use some of the internal images that are next to each other? The solution to this method lies in the CSS language. You can use CSS to prevent some of these images from being displayed. You just need to master the knowledge of CSS and display the desired section by defining the points that are in the image. As in the image above, if we want to display only the LinkedIn icon, it is enough to use CSS to display only the position of this icon in the image.

The first method: using the editor program

In this method, you must first design your images in a photo editor program such as Photoshop and put them together in the right proportion. For example, in the image above, it is enough to put all the icons in the form of images and used to display social networks together with the right fit and the right distance and get an output from it in the form of an image.

Then we upload this image to our host, and finally, to show which icon from this image, we just need to define the position of the image with CSS. This issue requires technical knowledge, so we will skip further explanations. But if you do not have technical knowledge in this field, you can use the second method, which is a simple solution.

The second method: using an online tool

In this method, you do not need to use an image editor program and technical knowledge for CSS coding. Just upload your pictures to this online tool. After that, this online tool will give you the CSS output to use on the site. For this purpose, first click on the button below to be redirected to the introduced site.

website-performance

As you can see, you must first click on the Open button and upload each and every image you want on this site side by side horizontally or vertically. Then, by using the Setting button, you can choose and personalize your desired settings, which include layering, choosing the prefix name for the css class, and the distance between each image. After the images and their arrangement are finalized, click on the Downloads button and a window will be displayed as shown below.

Now, as you can see, there are several outputs in the form of the final image of png, css, html, and you can view the demo. First, you must view and download the final image from the png column. Then upload it to your host. Then, using the CSS column, add the created codes to the css file of your site. Finally, you can copy the codes that you need to display the images from the HTML column. Now, after doing this, instead of sending several requests to download these small images and the server being involved in this issue, it will be downloaded only once and by using CSS you can display any part of the image you want.