Working with CSS Sprites

March 06, 2016 by Anuraj

.Net C# Web Optimization

CSS Sprites is a technique of combining multiple images into a single image file for use on a website, to help with performance. Using image sprites will reduce the number of server requests and save bandwidth. Here is the network requests for social icons for my blog. Since I was using 5 icons, browser was sending 5 browsers requests.

Network without Sprite image

To use Sprite first you need to combine the images into one, and then you need to write CSS to show only specific part of the image. Something like this.

.github { width: 32px; height: 32px; background: url(/images/social.png) -0px 0;}

And here is the result after using CSS sprites.

Network with Sprite image

The width and height attributes define the size of the image and the background left and top attributes controls the visible portion of the image. Here is a utility which combines the images and generates CSS for the same. You can get it from github

Copyright © 2024 Anuraj. Blog content licensed under the Creative Commons CC BY 2.5 | Unless otherwise stated or granted, code samples licensed under the MIT license. This is a personal blog. The opinions expressed here represent my own and not those of my employer. Powered by Jekyll. Hosted with ❤ by GitHub