The page load time of a site is one of the things that distinguish a well ran professional website from amateur/failing site. It’s thus also a way for Developers to showcase their experience by creating a fast loading quality site.
One of the ways to instantly improve the site performance beside caching, proper compression of images, and using CDN (content delivery network), is to use reduce the number of http requests made. Even milliseconds matter and they add up, every individual request is a carries a lot of wasted overhead that is needed to establish a request. Among these can be dns lookup, protocols handshake, headers exchange and so on.
What is a spritesheet?
The Spritesheet is the perfect way to reduce number of requests made for images. The Spritesheet is term borrowed from gaming industry. Where game developer would take all the game graphics into one big picture and then use it by copying and cropping to show only specific parts. Additionally, If timed properly spritesheets can be and are used for animation purposes.
Some Examples of Spritesheets
Early Games’ Examples
This would allow Game Developers not only reduce file size, io operations, but also animate more easily. For example take this image:
I have made jsfiddle that uses this image and iterate over them making it look like an animation.
First Create all assets as normally you would, then once you are done creating and compressing images you can replace all you image tags with divs and set their background image to div. Usually there are task runners that take care of this.
You can manually create do all of it, but I won’t advice it at all.
Disadvantages & Alternatives
You can’t use img tag, which could cause conflicts. Alternatively you could also use data uri for image instead of url.
Increased complexity of an app.