The CSS Sprites is a simple and effective technique of CSS that allows us to bandwidth .
Sprites really are images that contain multiple pictures’ to ‘and are shown through various techniques that allow us to cut them.
It was originally used in the development of video games because of his versatility in making animation, today we are also what we find as a
CSS technique that allows us to save bandwidth .
Thanks to this technique we can
reduced the weight of our web application and most importantly the number of HTTP requests , these two advantages allow us to reduce loading time of our web application and reduce the burden on the server.
How to apply this technique?
Only we have to
use CSS properties that allow us to alter the height and width (height, width), thus we can crop an image that show as background, also need to modify the properties of background-position to move by the original image and show the desired zone .
Small tutorial to start using this technique.
When using this technique?
HTTP requests being sought on an individual basis and increase the transfer and Charging time .
use it if we have a large number of users and our server reaches peak load high , would also be desirable to use in Web applications that have a large number of small images .
The main concept to remember is that we must be careful with the
sum of the size of the external files , is not the same load of 10 KB 15 elements that a single element of 150 KB, in the second case the burden would be significantly lighter.
The explanation for this assertion is that by charging a
high number of elements are making demands that include HTTP headers’ to ‘and that in turn are accompanied by cookies (cookies are relatively light but users surf with asymmetrical connections where the upload speed is much lower).
Therefore we can get to
case where the headwaters of the files that are larger than their own files
and often the burden on the server is doubled.
Yahoo uses this technique to
, the main reason is the large number of small images you use to identify each service.
AOL also use CSS Sprites
on its home page, and the reason for their use is identical to that of Yahoo because of the large number of images that are used to identify all of its services.
These two examples are very well detailed in WebSiteOptimization.
Generate a aumáticamente CSS Sprite
Creating this kind of images can be complicated but that is why it is best to use an application that generates the
CSS Sprite will automatically
CSS Sprites Generator