Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

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.

For example:
<!-- 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

blog comments powered by Disqus