How to Generate Gravatar Images with JavaScript/Node

Gravatar is a service that automatically loads a profile image on websites when you enter your email address on the site. It’s an easy way to let your users bring their own avatars without needing to upload them to each site they use.

A user creates their Gravatar by signing on on Gravatar’s website. If the user hasn’t signed up with Gravatar, a variety of default avatars can be shown.

Here are a few default Gravatars as an example:

Users can also upload their own pictures to Gravatar.

How to Create the Gravatar Code

In the simplest form, you load an image that is built with this structure, replacing <md5sum> with an md5sum of the user’s email address:

https//www.gravatar.com/avatar/<md5sum>

An md5sum is a code that can convert an email address into a unique string of characters like c160f8cc69a4f0bf2b0362752353d060. That string is the md5sum for the email address [email protected].

Looking at the code example above, the Gravatar URL for that email address would be this:

https://www.gravatar.com/avatar/c160f8cc69a4f0bf2b0362752353d060

Loading that URL as an image loads the default Gravatar:

For a nicer default image, like the examples at the top of this post, you can append a type to the end of the URL. Some possibilities include:

• identicon
• monsterid
• mp
• wavatar
• robohash
• and more

Any of those words can be added to the plain Gravatar URL with a parameter named d like this:

https://www.gravatar.com/avatar/c160f8cc69a4f0bf2b0362752353d060?d=identicon

How to Generate the md5sum in Node.js (JavaScript)

Here’s function that will generate a Gravatar in Node.js, and allow you to choose a different type of default image for when an email address doesn’t have a Gravatar:

const crypto = require("crypto");

function generateAvatarUrl(emailAddress, options = {}) {
  const defaultImage = options.defaultImage || "identicon";
  const emailHash = crypto.createHash("md5").update(emailAddress).digest("hex");
  return `https://www.gravatar.com/avatar/${emailHash}?d=${defaultImage}`;
}

To use the function, call it with an email address as an argument like this:

const avatarUrl = generateAvatarUrl("[email protected]");

When an email address doesn’t have a gravatar, the function above will use an “identicon” by default, which looks like this:

Or you could pass in a different Gravatar format like this:

const avatarUrl = generateAvatarUrl("[email protected]", {
  defaultImage: "monsterid",
});

to produce a random monster ID image by default:

For more details about how to load Gravatar with code, see the documentation.