CSS sprites

CSS sprites

From Master pages concept to Master image concept, that how CSS sprites was established in 2004. The idea came from early video games where lack of memory was crucial. Dave Shea suggested that approach where you combine all the needed images in one single “Big” image and you rely on a CSS property called background-position to extract the exact position of the image to display.

Why image sprites? why downloading one big image instead of multiple small images?

The answer is quite simple: HTTP requests. Every website at page load spend 62% to 95% of the time in making HTTP requests to fetch all the images, CSS, scripts etc… Image sprites is certainly a desired solution. it cost only 1 HTTP request to get all the images and as a web developer i clearly knows that reducing the number of requests has a huge impact on lowering response time and increasing load performance. If we take any website as an example, it has quite convincing to have 1 request instead of 20 or even 30 just to get all the images!!

So like dietitian does:

Before

After

CSS

 

 

 

 

 

 

 

It’s clear enough now why they’re cool and why should we use them.

Tags

Like this Article? Share it!

About the Author

Author Gravatar
Michel Abi Khalil

Related Posts

Comments are closed.