Do you use image sprites to reduce HTTP requests?
Updated by Tiago Araújo [SSW] 6 months ago. See history
123
<introEmbed
body={<>
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
Categories
Acknowledgements
Related rules
Need help?
SSW Consulting has over 30 years of experience developing awesome software solutions.