Increase Website Load Speed With Neat Little Trick

I was looking into this a while back and it just popped back up in my mind again. To reduce bandwidth and page load times some websites will place a majority of their images in a single image and use it as if it were a tile sheet.

Example: http://www.google.com/images/nav_logo8.png

Using some a certain combination of CSS properties you can crop out unneeded parts of the image.

Example:

.next-button {

     cursor: pointer;

     background-image: url(tilesheet.png);

     background-position: 32px 0px;

     width: 16px;

     height: 16px;

}

Pretty cool stuff no doubt. It obviously not worth it for smaller sites considering the amount of work it would take to get it setup. But it's always an option for bulky high traffic sites. Keep in mind this is just one out of a thousand techniques Google uses to give you those quick loading pages.

-Posted By Foremost Media Staff Member Kevin W.

Read More