Icon Images Spiriting for Web Performance

This blog is about how your website can perform faster with converting your images into a single sprite.

When i started my web performance benchmarking project, i didn’t know about how much i can make my website more optimise and fast using this technique though it is a very common technique use these days by web developers.

For best practices and background information you should read The Mystery of CSS Sprites: Techniques, Tools and Resources, or if you are a beginner then you should read https://css-tricks.com/css-sprites/.

What are sprites?

A sprite is a collection of smaller individual images. It improves your web pages’ performance and keep things more organized. For example have a look at the following image

Social Network Icons Image Sprite

As you can see there are three types of icon present in the image for each social network platform. Developer can use any of these icons for his web page.

How it improves a web page performance.

When a browser gets the image url link it sends the request for it. Then it waits for the response and when it gets the image from the server, it shows the image on the page. This whole trip takes longer time on slower connection. It also increase the load on the server as many systems making multiple request to the server.

So there are two methods to make website perform better

1. One is to compress your images so that the content load time decreases. But for that you have to trade off between quality and size, and this is not very much appreciated for high resolution display devices. You can compress your images only to some extent but after that you just can’t afford to degrade the image quality.
2. Second is to reduce the number of requests your web page or to be more precise browser is making. Commonly a browser can make 5–6 requests parallelly which means if your web page requires more than 6 requests to be made then all the other requests get queued unless any one of the current requests is done.

So sprite exploit the second point. It reduces the number request to make for multiple images, as we combine them into a single one. Though the size of this sprite is of course more than any of the single image but by combining many of the images into one you are making browser fast and efficient.

How to use?

To use CSS Sprite all you have to do is get the image once and shift it around and only display parts of it. This reduces the overhead of having to fetch multiple images.

For a detailed tutorial read this blog: https://coderwall.com/p/frib5a/designing-scalable-icons-using-css-background-size

IMPORTANT:

While using background-size CSS property remember to use the width of sprite as background-size value and use a parent node to set size for the show window.

After good what is bad about CSS Sprite?

Finding the correct positions of each images is one of the few problems. I’m always switching back and forth between Photoshop and my CSS editor to write down the correct values, getting more and more frustrated with every switch.

But there are now many online generators which give a combine sprite and also the CSS & HTML code. Some of them are following:

• http://instantsprite.com/
• http://wearekiss.com/spritepad
• http://www.spritecow.com/
• http://spritegen.website-performance.org/

You can use

• Node
• LESS & SASS
• ImageMagick
• Compass
• Grunt
• Gulp

Conclusion

What CSS sprites need in order to truly flourish is a CSS solution for cropping an image. Such a property should define a crop operation on a given background image before the image is used for further CSS processing.

So simply put CSS Sprite save the space, lower HTTP Requests and leading to a faster, more organized website.

So sprite can be used to combining social network icons, client logos or any kind of icons into one.