Rules

Secret ingredients to quality software

Do you use image sprites to reduce HTTP requests?

Last updated by SSW.Rules.SharePointExtractor on 22 Feb 2021 02:13 am (9 months ago) See History

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.

Figure: Bad Example - four images, one for each icon

Figure: Good Example - one image contains all the icons and CSS selectors make the browser display only the part you need


We open source. Powered by GitHub