FRONT–END DEVELOPMENT
46
Use sprites to improve performance Problem Loading a separate file for every image, especially when your site has more than 50 icons, can generate many HTTP requests and slows down your site’s load time.
Solution Create a sprite – a single graphic file containing all 50 icons, each spaced a certain distance apart – and save it as a single image (PNG, JPG or GIF). Use background-image positioning in CSS to display only the icon you need in any given instance.
Tip
Amazon uses compact sprites for their button states.
The CSS Sprite Generator is one of many tools that create sprites for you automatically. You can read more about sprites on CSS Tricks.