11:34 AM
Unknown
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.
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.
Posted in
Pretty clever. That image is about 5KB. I wonder what the trade-off is by adding more text to the CSS.
ReplyDeleteIt does create more bulk in your CSS obviously, but only by maybe 300 bytes per instance. The image sizes generally do end up being smaller as a result too, because there is only one png (or jpeg/gif what have you) header instead of multiple, which could cut down on a few kbs for each image, so that will usually always make up for it. That's not really the importance of this though. Yes the images are slightly smaller, but what's important is how many HTTP requests you cut out. The overhead of an HTTP request and response and all the back and forth is trivial when we are talking about one request, but stack that up 10-20, maybe even 50 times and it really adds up. It can easily shave off 500ms from a page load regardless of transfer speeds.
ReplyDeleteThanks for the comment
I'm having a problem regarding website speed load and I'm so thankful that I found this post. :) It will help me a lot.
ReplyDelete