Ben Langhinrichs

Photograph of Ben Langhinrichs
E-mail address - Ben Langhinrichs

Recent posts

Wed 14 Mar 2018

Not just a symbolic issue

Thu 1 Feb 2018

On StackOverflow: XPages and missing doclinks

Tue 23 Jan 2018

Midas LSX 5.53 - improved support for Asian characters and tabbed tables

March, 2018
    01 02 03
04 05 06 07 08 09 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Search the weblog

Genii Weblog

An interesting technique... and no idea why it is used

Sun 25 Mar 2007, 09:11 PM

by Ben Langhinrichs
In customizing the latest version of FCKeditor for our upcoming CoexEdit release, I noticed this technique for showing toolbar icons.  It is one with which I am not familiar.  Basically, instead of each toolbar icon being a separate image, there is one long image (see a portion of it to the left).  Each image is 16x16 pixels, and they are simply stacked vertically, all 68 of them.  Then, the images are displayed using a bit of JavaScript code such as:

eCell.innerHTML = '<div class="TB_Button_Image"><img src="default/fck_strip.gif" style="top:-' + ( i * 16 ) + 'px;"><\/div>' ;

referencing the CSS which looks like:

    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 3px;
    background-repeat: no-repeat;

So, while I understand how it works, I am a bit mystified as to the purpose.  The images were small to start with, and the very minor byte size reduction was more than overwhelmed by the additional JavaScript, so it wasn't a clever attempt to reduce delayed images, as I first thought.  So, why?  Anybody know?

Copyright © 2007 Genii Software Ltd.

What has been said:

589.1. Johan Känngård
(2007-03-25 23:20)

The reason this techique is used, is because it's much faster to download a single image than multiple ones. Every request takes time to handle for the network, the server and the client. A single image is also better cached in proxies and in the client.

589.2. Steve Castledine
(26/03/2007 03:23)

I think it also looks better - I always find it looks poor to a user when single images are flashing up one by one when something is not running quickly. Anything not to confuse them!

589.3. Peter Herrmann
(03/26/2007 05:03 AM)

The 'technical' term is CSS Sprites and the reason is as Johan stated: to reuce the number of calls to images (because a browser can only make about 4 requests at a time). Yahoo has an excellent piece on the perf considerations here : .

589.4. Charles Robinson
(03/26/2007 06:52 AM)

Wow, the things you learn by asking. :-) To quote G.I Joe from my grammar school days, "Knowing is half the battle!"

589.5. Ben Langhinrichs
(03/26/2007 08:50 AM)

Thanks, all! I do like the way the whole toolbar shows up instantly, but I had no idea about the four images part. Interesting stuff.

589.6. Robin Wills
(26/03/2007 13:11)

Here's a good explanation Michel Van Der Meiren's Domino 2.0 blog which is worth a read. Michel's written his blog from scratch in Domino.

HTH, Rob

589.7. Chris Reckling
(03/30/2007 01:41 PM)

Notes client does a similar technique for its toolbars except the icons are in a long horizontal image (and there is also a mask image to handle things like disabled states).