CSS Sprites

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?

We must take into account qque ever that our web application called images, style sheets, files javascripts are doing what they really are

HTTP requests being sought on an individual basis and increase the transfer and Charging time .

We first

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.
Practical examples

Yahoo uses this technique to

improve performance

, 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

Related Posts

1. Tricks to optimize the use of Gmail
2. Services statistics free
3. Google Adsense integrated Analytics
4. Measure charge time with Google Analytics Tracking API
5. Advertising for area of Braga
6. Batch Create WordPress plugin
7. Results and appearance of Google in 2001
8. Ranking of programming languages preferred
9. Final solution to transparent PNGs in Internet Explorer 6
10. API Google Books
11. YouTube HD
12. Google Toolbar 5 for Firefox
13. Google Street View in Italy