Skip navigation

WordPress School: Gravatar

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In the last lesson in this WordPress School course, you were to fill in the blanks of your WordPress site profile on your test site. In this lesson, you are to create your Gravatar.

Gravatar logo and default image.Gravatar is a “Globally Recognized Avatar.”

Aside from the popular movie, most are familiar with avatars, the images used to represent you online. Every website, forum, and social media service encourages their usage. We have to have one for each online activity we enroll in. The development of the Gravatar is an attempt to create a universal avatar with the ability to be incorporated into multiple services – one stop picture and branding.

While this isn’t true for the majority of social media and interactive sites, it is true for the WordPress Community. In October of 2007, Automattic purchased Gravatar and integrated it into WordPress.com two months later for testing, and soon afterward Gravatar was integrated into the core of WordPress.

Screenshot example of Gravatars in WordPress Comments.

Through WordPress or directly through Gravatar, register and set your Gravatar image. Your image will then be linked to your email address. Sign into any WordPress site with that address, or leave a comment with that address, and your avatar image will be automatically displayed in the comments or other areas on the site. This includes all WordPress sites around the world including WordPress.com.

Gravatar Hovercard featuring Lorelle VanFossen -  WordPress School.Gravatars are now available for 43 languages and the number continues to grow as they are embraced globally.

Gravatar offers a “Hovercard” feature. When hovering the mouse over a Gravatar, a hover popup displays the Gravatar image alone with their profile, if available, and a button to click to visit and read their complete profile on Gravatar. Gravatar Hovercards come automatically with WordPress.com and are available through the WordPress Jetpack Plugin for self-hosted and managed WordPress sites.

Person's Gravatar image integrated into Woopra Program.Using an Open API, WordPress automatically generates Gravatars, no Plugins required. WordPress Themes and Plugins may include features to integrate Gravatars into a site even more. Web designers and developers need to take Gravatars into consideration when it comes to integration as well as designing for them.

The Gravatar plays such an important role in creating your online identity, take time to choose your Gravatar image.

The Gravatar Image

As computer monitors increase screen size and resolution, the small screen is gaining ground. Your Gravatar image must work in a variety of display systems as well as uses.

Example of a woman's picture in a WordPress.com Profile Widget using a Gravatar Profile.Gravatar images are featured in:

  • Comments
  • WordPress.com Blog Reader
  • WordPress Widgets
  • WordPress.com profiles
  • WordPress Administration Screens
  • Third-party services

With all of these locations featuring Gravatars, the images must be able to be resized from 8 pixels to 2048 pixels width or larger, though most still stay at 148px and smaller. It is challenging to create an image to withstand that type of resizing torture.

Let’s look at some examples to see if they can withstand the reduction. This is my Gravatar for sized 128 pixels, 80 pixels, 32 pixels, and 16 pixels.

Avatar 128 pixel of Lorelle on WordPress logoAvatar 80px Lorelle on WordPress logoAvatar 32px Lorelle on WordPress logoAvatar 16px Lorelle on WordPress logo

Choosing an Avatar Image

Lorelle WordPress School Tips and Techniques Badge.Your Gravatar image is your representative on the web. Let it speak well of you.

You may choose a photograph, graphic, cartoon, or logo or brand. It’s up to you. Choose an image that represents your personality, character, and identity on the web. However, there are some unacceptable images used for avatars as they convey messages and impressions you may not wish to convey.

  • Parents/Grandparents/Great Grans with their descendants: Be proud in other ways and protect their image privacy.
  • Cartoons/Anime: While they may represent your personality and a favorite television show or movie, they do not project professionalism.
  • Pets: We all love our fuzzy children. Unless you represent a pet blog or society, keep your pets out of your avatars like you would your children.
  • Copyrighted Material: Using copyrighted material for your avatar maybe a violation of copyright and put you at risk.

When you add your image through Gravatar, you will be asked to rate it G, PG, X, etc. While most people laugh at that, please respect others and yourself by choosing right and well.

The image is recognizable at the larger sizes, but the quality drops when resized to smaller sizes.

This photograph of a flower by my husband, has enough contrast in the colors and shape for the image to hold the smaller size and resolution, but is it still recognizable at the smaller size?

Avatar 128 pixel of a flowerAvatar 80px FlowerAvatar 16px flower

Using another photograph of an orangutan by Brent, how does a face, even if it is an animal face, do as it resizes.

Avatar 128 pixel of an orangutanAvatar 80px orangutanAvatar of an orangutan at 32 pixelsAvatar 16px orangutan

The facial features are lost at the smallest size, but we know it is a face even at the smallest size.

A simple graphic with high color contrast and detail holds better than the photographs at the smallest size.

Avatar of a graphic at 128 pixelsAvatar 80px graphicAvatar 16px Graphic Image

Don’t be intimidated. It takes time to find the right image, and you may go through several before you find one that truly works for you. Professional illustrators and designers are often challenged with designing logos to withstand the pressure of various uses, and there are only a few that specialize in creating Gravatar images.

Assignment

Lorelle's WordPress School Assignment Badge.Your assignment is to add your Gravatar image to your test site.

Please note that if you are already a WordPress.com member, you may have a Gravatar. If you wish to use another, please change your email address associated with the test site.

To add a Gravatar to be linked to your WordPress.com (or other) test site:

  1. Go to Users > My Profile
  2. Click the Gravatar link to setup or change your Gravatar
  3. Anew tab will open in your web browser to help you upload the image or modify it on Gravatar.com
  4. Remember, the Gravatar image is linked to your email address. You may have multiple email addresses and multiple Gravatars accordingly.
  5. You will be asked to rate your Gravatar. Choose appropriately.
  6. While there, create or edit your My Profile and add the short bio from the WordPress profile assignment
  7. Follow the instructions and return back to your test site when ready

If you do not see your Gravatar image, be patient. It can take a few minutes to connect with your site.

The second task is to set the Gravatar image for commenters on your site with a Gravatar image or account.

  1. Go to Settings > Discussion
  2. Scroll down to the Default Avatar section
  3. Select one of the Gravatar alternative images
  4. Save Changes

WordPress Gravatar avatars for non-Gravatar members on WordPress sites.

For more information and reading on Gravatars, see:

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


8 Comments

  1. Posted April 6, 2015 at 10:34 pm | Permalink

    Reblogged this on Just Cause.

  2. Posted April 21, 2016 at 9:37 pm | Permalink

    I’ve just made my very first attempt at a gravatar. So, so much more to learn. Thank you for this and all the other wordpress lessons. I hope to pay it forward in due course.

  3. Teri
    Posted November 23, 2016 at 11:35 am | Permalink

    I am on the gravatar assignment and I’m having a heck of a time. I created my Gravar by clicking on my person in the upper right corner as there is no user section on my dashboard. But under settings: Discussion, there is no Avatar section at all. Is this a new update and it doesn’t exist anymore or am I missing something? I am used to WordPress.org and have no problem finding the Avatar section under discussion. On wordpress.com I am finding no avatar area at all under discussion.

    • Posted November 23, 2016 at 11:50 am | Permalink

      It takes time for the Gravatar to show and your browsers cache may not be clearing.

      Give it a little time. You can see it on Gravatar.com. Thanks.

    • Teri
      Posted November 23, 2016 at 12:01 pm | Permalink

      My gravatar shows up just fine. I just don’t have the option under settings – discussion on choosing avatars for comments. Does it have to do with the hovercards and having it automatically selected?

  4. Posted November 23, 2016 at 12:09 pm | Permalink

    Gravatar images on WordPress.com are handled under Users > My Profile.

  5. Posted November 23, 2016 at 12:10 pm | Permalink

    Oh sorry, you mean the Gravatar image for visitors? Make sure you are in WPAdmin not the new interface. It should be there. I’m at the airport so not able to check if they changed it.


5 Trackbacks/Pingbacks

  1. […] WordPress School: Gravatar […]

  2. […] a month ago in Lorelle’s WordPress School free online course you added a Gravatar image to your WordPress.com test site. A Gravatar image and profile is linked to your email address and […]

  3. […] some of types of images in tutorials such as adding images to represent you in your profile with Gravatars and on your About web page to represent you and your site’s purpose, and other images to […]

  4. […] WordPress School: Gravatar […]

  5. […] WordPress School: Gravatar – Lorelle on WordPress […]

Post a Comment

%d bloggers like this: