We know that Google considers page speed as one of the important factors for ranking a website. The faster the page loads the better. The number of HTTP requests made by a page is one of the most critical factors affecting the page speed. We can significantly improve our page load time by reducing the number of server requests. This can be easily implemented by using CSS Sprites. Let us first understand a bit about this concept before proceeding to online CSS sprites tools.
What are CSS sprites?
CSS sprite technique is a performance improvement method that combines multiple images into a single image known as a sprite sheet. The various images on this sheet can be displayed on our website by mentioning the X and Y coordinates of each image. So instead of loading multiple images by separate HTTP requests, the website can make one single request to download the sprite image and then display all elements within the sheet.
How to create a sprites image?
Several tools generate sprite images for us from our uploaded images. In this post, we will discuss 5 free CSS sprite generators that are available online. For testing the tools, I am using the same four social media icons Facebook(4.1KB), Google Plus(4.3KB), Twitter(4.1KB) and Instagram (4.0KB). All these icons are in PNG format.
When we use these icons separately without sprites on our website we need to make 4 separate HTTP requests to the server to download each image file. Now let us use the below free online tools and make CSS sprites using each one of them.
The sprite image generated by this site is of size 4.10 kb.
This site also provides the CSS codes to be included for the background-position of each image.
The final sprite image generated was of size 4.80 Kb. This website allows a maximum image size of 25MB and a maximum of 200 images per sprite.
This site also has a downloadable windows version of the same utility. This can be used by those who prefer it to create sprites offline. I have not tried this desktop version until now.
The sprite image was of size 4.23Kb. This site has the provision of encoding the image in the CSS file.
We can also specify the layout from the three available options (compact, vertical, horizontal). Padding between the sprite images can also be added manually.
The final sprite was of was 4.12 kb. The CSS and sample HTML code for usage is available on the same page.
The sprite created using this site was of size 4.15 kb. Sprite CSS and sample HTML code to embed the sprite images on the website are also provided.
Let us now summarize our total savings by using the above online CSS sprites tools.
- 3 HTTP requests(4 separate requests reduced to 1)
- About 75% reduction of bandwidth (16 KB for 4 individual files reduced to nearly 4 KB )
Bonus: Refer to this Udemy course for a detailed understanding of this concept. This course is especially beneficial for web developers.