FixOutlook mosaic avatar finder

As I wrote earlier, the fantastic initiative created an enormous mosaic of all supporter’s avatars. Because it’s quite a lot of work to find your own avatar between 18,040 avatars I decided to give it a try using PHP and GD.

First I tried to do it by pixel scanning, using GD’s imagecolorat() function. By looping over every pixel (there are 30,992,064 in the image) and saving its RGB values to a MySQL database we create a table describing every pixel. By feeding a tile to the same pixel scanning functions we can look the pixels of that tile up in the table and have the coordinates of the tile returned. Nice solutions, but an enormous resource hog.

My colleague Andries suggested a different method: clipping the image in separate tiles and then calculating the MD5 hash of the image. We then do the same for the needle tile and look for a collision. This should be much faster but only works when the original tiles are not edited when put in the mosaic. I know that the avatars are resized from the original 73×73 pixels to 48×36 pixels, but I don’t know whether any other filters are applied. My own avatar is actually not in the mosaic (I can tell that with certainty because the mosaic was already high and dry upon the Redmond wall when I tweeted my support) and I don’t know anyone who is included. So if you happen to be in the picture and still have the original Twitter avatar, please leave a comment. I fired off an e-mail to The E-mail Standards Project asking them whether any filters were applied during the creation of the mosaic.

Another idea (by my colleague Nils) would be to use ImageMagick’s compare function which shows the differences between two images. Using this method has the advantage that the original avatar may be edited, since it can return the actual difference between the needle and the haystack. But first I need a source avatar… I’ll keep you updated!

For those who are interested in the code which did the clipping, here it is. It only took 16.2656 seconds to complete the tiling of the full mosaic on my Macbook Pro. Quite impressive! I had to increase the memory limit in my php.ini file though. After clipping is completed you’ll have 18,040 avatars sitting in the tiles/ directory which can be read by PHP’s md5_file() function.

// Create image resource (from mosaic file)
$image = imagecreatefrompng('fixoutlook-mosaic.png');

$i = 0;
for ($x = 0; $x < $width; $x = $x + 48) {

    for ($y = 0; $y < $height; $y = $y + 36) {

        // Create resource for new tile
        $dest = imagecreatetruecolor(48, 36);

        // Copy tile from mosaic
        imagecopy($dest, $image, 0, 0, $x, $y, 48, 36);

        // Save tile
        imagepng($dest, 'tiles/tile_' . $i . '.png', 0);

        // Remove tile from memory


PS: This great syntax highlighting is done using the Syntax Highlighter WordPress plugin.

Write a Comment


  1. BOOM!

    That was my head exploding reading this. All this sort of stuff blows my mind, it’s shocking to read (admiration shocking, not bad shocking)



  • FixOutlook mosaic avatar finder (part 2) - Vincent van Scherpenseel on UX & Web January 20, 2010

    […] mosaic avatar finder (part 2) Yesterday I wrote about the avatar finder I was building. I posted a comment to the blog of the Email […]

  • FixOutlook mosaic avatar finder (part 2) | Bits of Thought and Bytes of Code - Vincent van Scherpenseel January 20, 2010

    […] Yesterday I wrote about the avatar finder I was building. I posted a comment to the blog of the Email Standards Project asking for avatars. digirati replied and send me their avatar, but unfortunately they weren’t able to locate themselves in the mosaic. So now I had the source image of an avatar which was quite likely to be included (as digirati was one of the first 1,000 people to tweet their support) but still no (edited?) tile. Luckily, digirati’s avatar had quite a lot of pixels of the same color (R = 34, G = 34, B = 34), so I decided to pixel scan all tiles I had separated from the mosaic earlier and save them to a database. […]