How to implement Gravatar

Gravatar which stands for "Globally Recognized Avatars" is a simple solution for providing universal avatars. This concept is great for websites which use avatars as a secondary function where it's either not worth developing an avatar management system or you believe that your users won't bother to set an avatar.

Another example is for guest systems where users can interact with each other without requiring an account such as a comments section on a news article. The avatar can be displayed if the email address is known for a given user without actually exposing the email address to the public.

Gravatar was originally made popular by WordPress but has since been adopted by popular commenting systems such as DISQUS and is well adopted by the tech world appearing on massive sites/platforms such as StackOverflow, GitHub, BitBucket, Microsoft Azure Portal.

Where you don't see Gravatar is social networks or anywhere where an Avatar is a key part of the user experience, in scenarios such as this you would always want to develop your own avatar management system.

How does it work?

From an end user's perspective it's easy - sign up for a Gravatar account, verify that you own a particular email address, then upload an avatar image. When using a system which utilizes Gravatar, your avatar will automatically appear! It doesn't get much simpler than that. Another thing to note is that you can manage multiple email addresses in a single Gravatar account.

The way this is archived is by encrypting a user's email address to form a globally unique identifier for that user. The platform which wishes to embed the avatar simply encrypts the user's supplied email address and forms an image reference for example:

<img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50">

Security concerns

There has been some hysteria around security issues and Gravatar. To sum it up in a nutshell, your email address can't be decrypted from the MD5 hash, however the very real concern which people have is that because the hash is unique and usually embedded in the HTML of websites, a particular user's activity across the internet can be fairly easily tracked by searching web page content for the occurrence of that hash. This is something to consider as a webmaster and as an end user.

How to implement Gravatar

Creating the hash is quite easy, however there a couple of small things to watch out for. The email address should be cast to lowercase and trimmed before being MD5 hashed. When creating the hex string it must be a lowercase hex string.

Here's a simple C# method I wrote to correctly hash an email address into a Gravatar identifier. View on GitHub

public static string GetGravatarImageUrl(string emailAddress)
{
    // Create MD5 Hash of email address
    var md5 = System.Security.Cryptography.MD5.Create();
    byte[] inputBytes = System.Text.Encoding.ASCII.GetBytes(emailAddress.Trim().ToLower());
    byte[] hash = md5.ComputeHash(inputBytes);
    // Create lower-case hex string
    var sb = new System.Text.StringBuilder();
    for (int i = 0; i < hash.Length; i++)
    {
        sb.Append(hash[i].ToString("x2"));
    }
    // Build URL
    return string.Concat("http://www.gravatar.com/avatar/", sb);
}