CSS sprites to speed up page loading
What are CSS sprites? Well it's simply images used in website design, put in one image file. It means that browser needs to download only one image instead of multiple and as browser can can maintain only couple simultaneous connections, it needs one HTTP request and connection to download all design images, thus making all other site components load faster.
The usage of CSS sprites however is not so simple, if you used to just apply background images to elements, then now you'll have to do precise background positioning to use CSS sprites.
<!-- All div elements use same background image, just with different background position --> <div style='background-image: url(./css_sprite.png); background-position: -103px 0px; width: 297px; height: 184px;'> </div> <div style='background-image: url(./css_sprite.png); background-position: 0px -184px; width: 400px; height: 298px;'> </div> <div style='background-image: url(./css_sprite.png); background-position: -267px -482px; width: 133px; height: 117px;'> </div>
There is a way to make it more easier to implement CSS sprites to your website. Here is a PHP sprite class that can create CSS sprite from multiple images and generate CSS code for sprite usage
So CSS sprites is one of many methods you may consider to use, when you need to squeeze all performance you can from your website.
You may also be interested in:
Powered by BlogAlike.com