The 9kb Facebook-logo

Websites with astronomical traffic numbers have wholly different problems than us mere simpletons. When hordes of office workers, students, stay-home moms and other human beings not deprived of internet access, trample your servers on daily basis to check on each others’ kitty pictures, you’ll want to shave as many kilobytes off each data transfer as you can.

So tweaking the way a webpage is build becomes very very inportant. As an example take a look at the Facebook “task bar” on the Facebook page. Loading every icon/logo/message indicator/etc… (HTTP requests) will give you a lot data traffic which can also utilize CPU’s/HDD’s and memory of servers to the extreme.

It is therefore not surprising that the Facebook development team is utilising methods to minimise bandwidth on kilobytical levels. One of them is the construction of the Facebook logo. At first glance, it may appear as if the logo is only a single image, but a little digging in the source code reveals that it’s actually a cleverly orchestrated palette of icons.

This is how you see it:

Facebook logo

And this is how the file really looks like:

Logo Facebook explained

The image, a PNG at a mere 9kb, is recalled only once in one entire Facebook pageload, but serves a multitude of icons such as friend requests, notifications, the ‘like’ thumb and instant messages, in various states (static, hover, active). By loading one file to rule them all, the pageload is reduced – albeit only marginally so. In terms of file management, loading one 9kb file as opposed to an odd 35 of them, ‘weighing’ 1-2 kb each, it’s a brilliant piece of web engineering.

The tricky bit which remains is of course how to allocate the right image on the right location, but if you’re even remotely familiar with CSS it should not be a complete secret to you. It is called CSS sprites and it’s all on reducing the HTTP requests. Here’s what Facebook has done:

.slimHeader #pageLogo a,
.slimHeader #pageLogo a:hover,
.slimHeader #pageLogo a:focus,
.slimHeader #pageLogo a:active {
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/yJ/r/vOykDL15P0R.png);
background-repeat: no-repeat;
background-position: 0 -214px;
height: 31px;
margin-top: 6px;
}

The background position rule simply tells the image how high to appear in the space. The height rule serves as a mask; width is identical to the image width and needs no further information to display properly.

So the website reader will only see the “addressed” part of the file, which is already loaded and in your browsers cache. It’ll spare you data traffic and utilization and therefore a quicker loading time of your webpage.

Visit our webdesign Hong Kong page for more information about our projects.
Or to see the 9kb Facebook logo for yourself: “like” our Facebook page: Grayscale

Tags: , , , ,

"I like the cut of your jib. May I come over for a coffee?"
— Sure thing! Contact us to make an appointment.

Grayscale HQ

Unit B, 18/F
Wing Wah Industrial Building
677 King's Road
Quarry Bay, Hong Kong

Contact

info@grayscale.com.hk
+852 5804 3077