Improving the default profile picture

When developing the first version of Kicklet user profiles, we chose to use Gravatar for users' profile pictures. There are numerous reasons we decided to do this before learning that it might not be the best solution for a service like Kicklet. Our rationalization for doing so went something like the following:

• GitHub used to use it, and we expect that many of our users are also GitHub users. This made us hopeful that most users would already have a gravatar.
• A lot of sites still use it (Disqus, StackOverflow, and Wordpress just to name a few), so we really hoped that most users would already have one.
• It's easier to support as a developer. This is a big reason I pushed for gravatar, as I was Kicklet's sole developer. Supporting user-uploaded images or integrating with Facebook/Twitter/LinkedIn to get user photos just isn't quite as simple to develop or maintain.
• It was the cheapest option. Handling file uploads would inevitably incur an overhead in storage and/or bandwidth at some point, while Gravatar is totally free to use and simple to integrate.

Unfortunately, the honeymoon period with Gravatar didn't last long. Don't get me wrong; Gravatar is an awesome service and we still plan to support it. However, to my surprise, most Kicklet users either don't have a gravatar (and didn't create one on signup), or choose not to tie it to Kicklet. I totally understand not wanting to create one just for Kicklet though. Asking a user to sign up for two services at once is asking a lot. In fact, at the time of writing this, over 2/3 of Kicklet users have no gravatar associated with their account, and therefore have no profile picture (other than the default one we chose to use in this case). This results in something that looks a bit like the following:

This is a user experience issue. The sea of gray default profile pictures is pretty unappealing and can give the impression that other users aren't necessarily passionate about completing their profile. Worse yet, they could be fake! This is probably not true, but the user's perception matters, so let's see what we can do to improve this.

Gravatar actually provides a few options to alleviate this issue. They have a few options that will automatically return images generated from the data you pass to them, so every user can have a different profile picture whether they have a gravatar or not. Here are a couple of the options they support:

While these are kind of neat, we really liked the cleaner feel of the regular default silhouette-type profile picture. Additionally, they don't work as well when the image is rounded off completely into a circle. After some playing around, we felt the basic default profile picture could be improved with just some added on a user-by-user basis. We had a few goals in achieving this:

• Preferably, the image would still be served up from another "free" source to improve performance and keep our operational costs low.
• Images need to use colors that are aesthetically pleasing, while preferably being auto-generated on a user-by-user basis.
• The addition of color shouldn't result in a multitude of image files. Generating different image files would require the user to potentially download extra image files for every page they visit. If a page has 15 profile pictures on it, that could mean the user's browser would have to make up to 15 additional web requests if all 15 profile pictures were the default!

So how do we get a variety of pretty default profile pictures all for free?

CSS to the rescue!

Here's the general process we used to create a more pleasing user experience with CSS:

• Use CSS color filters to colorize the default profile picture.
• Keep the colors pleasing by choosing a filter like sepia-tone.
• Create a variety of style classes with these pleasing colors to assign to different users. Not every user needs a totally unique image, but there needs enough to prevent a lot of duplicates on a single page.
• Use CSS attribute selectors to only apply the style to users that have a default gravatar image, and not a custom gravatar.

Here's one of the CSS styles we created to achieve this effect:

img.sep-f-0[src*="//www.gravatar.com/avatar/default"] {
  -webkit-filter: sepia(100%) hue-rotate(20deg);
  filter: sepia(100%) hue-rotate(20deg);
}

There are a couple things to note here. First, we decided to use the class name format of sep-f-X, where X is some number associated with the user. This number, X, is decided by the formula, user.id % Y, where Y is the total number of color filter styles we have. This class gets generated on page render.

Secondly, note that the attribute selector checks to see if the src attribute includes this ".../avatar/default" string. That is the string we generate for users with no associated gravatar. This keeps real gravatar images from getting the color filter applied as well.

This approach works well for us. If there are default profile pictures on any page, only one web request needs to be made. This does result in a bit more CSS that has to be downloaded, but it comes out to something around 1KB (ignoring compression), which we're OK with for now. Anyway, this is what the end result looks like:

In closing

This approach does have a few shortfalls:

• "Fancy" CSS like color filters don't work in most major email clients, so if profile photos are embedded in email, most email clients will just show the basic gray default profile picture.
• We're not verifying gravatar emails, so users can get around the color filter by entering random text into the gravatar field for their profile. This is OK though, because we prefer to give the user the option to use the regular ol' gray default picture anyway.
• Users can't choose their own color filter as it's assigned by user ID, so I could foresee some people being upset if they don't get their preferred color.

Can we make improvements? Of course!

• We could add variety by increasing the number of color filter styles.
• We could manually vet out a number of color filters to create colors that better match the Kicklet design.
• We could allow users to choose their filter color (with a minor database addition).
• We could allow users to upload their own picture instead of relying on Gravatar.

Just one last thing. That last improvement idea about allowing users to upload their own picture... We did that! Now you can choose to use gravatar or upload an image of your own for your Kicklet profile. Check out the new profile pictures and let us know what you think of them in the comments below.