Do you use image sprites to reduce HTTP requests?
  v1.0 Posted at 13/10/2015 11:59 AM by Rebecca Liu

A sprite is an image that has all of your other images inside of it, so if your sprite has 5 images, you’d be getting rid of 4 HTTP requests and speeding your site’s loading time up by the time for each of those 4 requests latency. You will use CSS selectors for each link to display only a portion of the image sprite - effectively showing just the image you need.

The benefits to use CSS image sprites are:

  • to save bandwidth
  • to reduce HTTP server requests
  • to speed up page load times

Ensure that the file size of your master image isn't greater than the sum of its pieces.

One image per Icon
Figure: Bad Example - four images, one for each icon
One image contains all icons
Figure: Good Example - one image contains all the icons and CSS selectors make the browser display only the part you need

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address: