Someone is bored!

Suggestion: generate this page with JavaScript and use one transparent PNG image, with different colored backgrouds.

Or I'll do it when I'll get back home ;)

just use div and css with background image url instead of img.

> Suggestion: generate this page with JavaScript and
> use one transparent PNG image, with different
> colored backgrouds.

Yeah, I pondered that, but usually try go for accessibility (and even added alt attributes so you can turn off images, not to say that's a common use-case for that page!). But maybe in this case the dramatically reduced file size would make it more accessible :)

> just use div and css with background image
> url instead of img.

But that would get rid of the randomized color order effect wouldn't it?

I guess the Javascript version would probably be the smallest in size but could lead to problems if the browser hangs while adding thousands of elements to the document. Using divs could save some space but would reduce accessibility. I think one of the things which you could easily do to improve the size is to move the pngs to the employees folder and then have src="1.png" instead of src="image/1.png". This should save you about 80KB on the document size. Additionally you could gzip the html page and do a redirect to the gzipped page when the browser supports it.

So the colors are really randomized? I somehow tried to find a hidden message or something in it ;)

I hope you keep the page up and update it from time to time. Would be funny if I someday in the future I would work at Google and can say "the second red guy in the 600th line is me" ^^

> So the colors are really randomized?

They are partly randomized, partly fixed :)
(But no, no hidden message I'm aware of :))

> I think one of the things which you could easily do
> to improve the size is to move the pngs to the
> employees folder and then have src="1.png" instead
> of src="image/1.png"

Done, good idea!

I think you should run a quick competition to see who can re-create this page using the smallest number of bytes, with bonus points for no-javascript support.

OK, the contest is on :)

I suppose a JavaScript document.write loop without using alt-texts would go pretty far.

Here's the PHP that created the page by the way (updated to latest version), you can see the first 6 person images are in "Google logo order":

$sequence = array(1, 2, 3, 1, 4, 2);
$counter = 0;
for ($i = 1; $i <= 16805; $i++) {
   $n = ($i <= count($sequence)) ? $sequence[$counter++] : rand(1, 4);
   echo '<img src="' . $n . '.png" alt="*" /> ';
}

Kevin, that reminds me of something we did a few years ago where we tried to create a page that would provide a box to search Google but with the least amount of (non-validating) HTML as possible. The results were impressive!

> Kevin, that reminds me of something we did a few
> years ago where

Think it's this one:
http://blogoscoped.com/archive/2005-03-02.html#n12

That's the one. I just found it too. It's a shame http://g.cn redirects, otherwise that would reduce its size by another 2 bytes!

> OK, the contest is on :)

I assume the number of bytes has to include all images, stylesheets, javascript, etc? And does it need to validate?

Nah, no accessibility and validation needed for the contest. The page should look roughly the same as now tho :)

On a totally unrelated issue, are Moire patterns supposed to be self-referential? I just made a screenshot of the whole page and zoomed out of the screenshot in PhotoPaint, only to see new persons forming out of the groups of person images (not sure if that is Moire actually). The white part you can see below is the full page length of 1280 pixels, zoomed out, the gray part is PhotoPaint.

http://blogoscoped.com/files/google-employee-pattern.png

Javascript (135 bytes, not including the SCRIPT tag):

c=Array('F00','0F0','00F','FF0')
for(i=0;i<16806;i++){
   document.write(" <u style=background:#"+c[Math.floor(Math.random()*4)]+">G</u>")
}

http://googlified.com/files/temp/visualize-googlers.html
It runs pretty quick actually.

I've recognized Matt Cutts! :-P

If the page is too long to load, you can see the evolution here:
http://www.zorgloob.com/2008/01/evolution-du-nombre-des-googlers.asp

OK... I'm *almost* there in 133KB with NO external files... and it validates (tentatively):

http://blogoscoped.com/files/more/employees.htm

I just can't get the men to stand next to each other while retaining their dimensions. I'm sure there's some trick to do that with CSS but display:inline doesn't work. I tried display:table-cell too but that didn't work either.

I could actually save some space (and make it work in IE) by using an actual image rather than the data: URI scheme but I figured that reduces HTTP connections and therefore makes it load quicker...

Now make a page to visualise the number of people with adsense accounts...

That is some interesting source code Tony... can you elaborate on what you did?

By the way, can't you use "{ display: block; float: left; }" on the little persons so the line up side by side?

Well, as Datrio suggested above, I'm using one PNG with a transparent middle section so that I can use a background color to change the color of the men. Instead of referencing it directly, I've embedded a base64 encoded version of the image in the page using the data: URI scheme. (This doesn't seem to work in IE7 though.)

I then figured there was no point is using DIVs when other HTML elements were already available and not already in use in the page – and they actually used shorter tags than DIV too – i.e. <b> <i> <s> and <u>

I did have to change the DOCTYPE to HTML 4.01 so that I could use some of the single character tags and still let it validate though.

I tried using { display: block; float: left; } but it crashed Firefox. As soon as I added any position or float properties, Firefox completely froze... although that does seem to work fine in IE7.

Update: I replaced the HTML-based version with a JavaScript version now.

And this post is already #5 in Google for "How many employees does Google have?" :-)

Philipp, I don't think you are using the setTimeout() right.

Can you explain what you mean Haochi? E.g. doesn't it work for you?
By the way, I'm just using it as a dummy delay to give the browser some time to render the display... oddly enough, otherwise, even though I'm using the onload event, Firefox sometimes decided to display a blank page instead of the "loading" message while the content was calculated.

Oh, never mind then. I thought you were using it as setInterval() so that the page won't freeze (it _almost_ crash my FF).

OMG. The page is down in IE 6 and Firefox 2.

Sctronlinux, what are you seeing?
Can't reproduce the issue on FF2 right now, and don't have IE6 (and can't see IE6 on browserpool.de either).

Works fine in FF2 and IE6 for me. Perhaps sctronlinux didn't wait long enough?

Maybe it should draw them progressively so that the user can see something is happening. And by the time they've finished counting them, it will have finished loading! :-)

This progressive loading was actually the behavior of the old "accessible" version, and that's why I kinda figure the longer loading time is OK... because the page has something you can look at while it's loading. I'm using a similar approach here: http://www.coverbrowser.com/covers/house-of-mystery . If you look at the loading time of the whole page, I think you'd conclude it's much too long. However, if you additionally take into account the use-case the site targets – looking at every gorgeous cover easily without distraction – then filling up a non-thumbnailed page with good-resolution pics starts to make sense... because while you're still looking at the top pics, the bottom pics get a chance to finish loading. (That's the thinking behind not using thumbnails, anyway... thumbnails seem to be more oriented if you know what image or type of image you're looking for, but it's less gallery/ explorative-like.)

Nice. Reminds me of the World's Longest Website [1] – but the site doesn't include me yet [2], presumably? ;)

[1] http://worlds-highest-website.com/
[2] http://meiert.com/en/blog/20080118/joining-google/

This eerily reminds me of a project I did many months ago visualizing the causalities of the Israel-Lebanon war in 2006.

http://www.moiz.ca/coffin.htm

Javascript is great for making such isotype-like graphics.

http://en.wikipedia.org/wiki/Isotype_(pictograms)

139 bytes of HTML+JS and 57 bytes of IMAGE = 196 bytes in total.

Requires JavaScript, but works also with images off.

http://www.p01.org/releases/DHTML_contests/files/how_many_employees_does_google_have/