HTML5 Canvas Identicon Generator
Identicons are graphic representations of hashes. The most popular implementation has 16-blocks of a single colour, as in figure left. You'll no doubt have seen them used as avatars in blog comments.They're one option provided by the hugely popular Gravatar service, and can also be generated yourself using a Wordpress plug-in, or other blogging software.
The problem with these avatars, is that each commenter on your blog adds one extra image. This can quickly result in hundreds of extra HTTP requests, and reducing requests is the single most important factor in site performance. It may be Gravatar's bandwidth, but it's your blog that's going to be slow. The usual method of packing many images into a CSS sprite is also impracticable here.
Gravatar takes an md5 hash of your e-mail, and returns the corresponding avatar, or in our case identicon. The Gravatar server also hashes the hash, probably with a salt value, which is evident from the avalanche effect when changing one character of the original md5 hash. For this reason, the identicons generated by the Wordpress plug-in are different, and it's impossible to generate a Gravatar equivalent identicon yourself.
I've been meaning to write my own client-side identicon generator for a while now. For each comment, JavaScript reads the hash from the HTML, draws the identicon onto a canvas, then over-writes the place-holder image. This means zero extra HTTP requests, and is extreamly fast.
Figure top-left is a live example generated by JavaScript.
Download script