Lighthouse: Combine images using CSS sprites
Combining images using CSS sprites reduces the number of round-trip requests made, which can yield performance gains for your page.
This method mostly refers to small images like icons, logos, and other graphical elements that can be combined into a single image and then positioned by CSS on the page.
Reducing the number of images loaded is beneficial to your page performance as it decreases the number of requests, resulting in less time spent by the browser loading the image.
How does your site score on this audit?
How does combining images using CSS sprites affect page performance?
In general, the more requests made by the browser, the longer it takes to load the page.
For instance, if you have 8 small icons on your webpage, your browser will need to process 8 requests, loading each icon separately. This is likely to result in a longer page load due to more request round-trips between the browser and the server.
On the other hand, if you combine the 8 icons into one CSS sprite, then your browser only has to process one request, reducing the number of round-trips.
Note that this optimization is more impactful for HTTP/1.1 requests as there are performance limitations for HTTP/1.1 such as the connection limit for number of requests or a high overhead associated with requests.
How does GTmetrix trigger this audit?
GTmetrix uses the following criteria to consider an image as a small image:
- Pixel area - smaller than 96x96
- Image size - smaller than 2,048 bytes
GTmetrix evaluates your page and counts the number of small images per domain and evaluates what protocol was used to serve these image requests.
Depending on the protocol, this audit will trigger if the small image count per domain exceeds the following thresholds:
- 100 - for HTTP/2 requests.
- 4 - for HTTP/1.1 requests.
This is a Custom GTmetrix audit
Lighthouse doesn't specifically audit for the usage of CSS sprites; however, we at GTmetrix still feel that they play an important role in your webpage's performance.
Websites on HTTP/1.1 suffer from a number of performance limitations compared to those on HTTP/2 - particularly the lower number of possible parallel HTTP connections. Combining small images into CSS sprites can help HTTP/1.1 sites load the page's requests faster overall.
With some users continuing to use HTTP/1.1 websites, we, at GTmetrix, believe that we should continue to check for and recommend combining small images into CSS sprites.
Moreover, while the audit combining small images into CSS sprites can also impact the performance of HTTP/2 websites, it is to a much lesser extent. This is reflected with a higher threshold for small images on HTTP/2 websites for the Structure Score.
How to combine images using CSS sprites?
To fix this audit, follow the below steps:
1) Combine small images using a CSS sprite generator tool
Ensure that your images are properly sized for your webpage and user's viewport before combining them.
Combine your small images into a single image file using a CSS sprite generator tool like cssspritetool.com.
Along with the combined image file, the tool will also provide CSS and HTML code.
2) Add the CSS and HTML code to your webpage
Add the CSS and HTML code to your webpage. The CSS code declares the combined image, and the HTML code positions the different small images on your webpage.