Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog

Avatars, or the well known Gravatars, are tiny images, often called your online identity, picture, badge, logo, or graphic image which represent you and/or your blog. Some use photographs of their face or body, or a body part like an eye, nose, or hand. Others use pictures of animals, flowers, scenics, or graphic images. Many professional bloggers use their logo.

Many people like to see these graphic representatives of their blog next to their comments, or now, with the new addition of avatars and Gravatars to WordPress.com, in their WordPress Administration Dashboard listing of the top posts, My Comments comment follow panel, and on the Comments Panel, as well as within the comments of many WordPress Themes.

WordPress.com bloggers can add an avatar image to their blog by going to the Users > Your Profile panel. In a box currently on the left side is where to upload your image. The image should be no bigger than 128 pixels, though 80 pixels square is the standard. The image must withstand “shrinkage” down to 16 pixels, the size that appears on the Administration Panels Dashboard.

How Do I Make My Avatar/Gravatar?

Your avatar or Gravatar comes in only one size when uploaded. Traditionally it is 80 pixels square, but Automattic has stated that they want to increase the base size to 128 pixels. The key to creating a useful avatar is that it must be “shrinkable”. It must have the ability to remain viable and visible down to its smallest size usage.

On most blogs, the comments area features an 80 pixels square image. On the WordPress.com Administration Panels, the image varies from 48 pixels on the My Comments panel, 32 pixels on the Comments Panel, then shrinks down to 16 pixels on the Top Posts list on the Dashboard Panel.

On the front page of the WordPress.com site, the avatar images are 128 pixels and 48 pixels for the top blog posts listings. On the Blogs of the Day on WordPress.com site which tracks the most popular blog posts and blogs on WordPress.com, the avatars for the most popular posts are 96 pixels square.

That’s a lot of flexibility for such a small image.

Here is an example of four sizes of my avatar for Lorelle on WordPress. The first one is 128 pixels, then 80 pixels, 32 pixels, and finally 16 pixels.

As you can see, the image is clear at 128 and 80 pixels, but the image quality drops to nothing as it gets smaller. Only the color is retained. This test makes me reconsider the avatar graphic, don’t you think? Then how often is my avatar going to be in the top 10 blog posts lists and the 16 pixel size used? Hmm?

Many use a flower or body part. Let’s take this photograph of a flower by my husband, Brent VanFossen, and run it through it’s shrinkage as an avatar.

There is enough contrast in the colors and shapes for the image to hold to the small size, though it looks like a button rather than a flower a the smallest size. High contrast between the foreground and background colors helps hold the image through the shrinkage process.

Using another photograph of an orangutan by Brent, let’s see how an animal image, especially a face, handles the reduction in size that an avatar undergoes.

The facial features are lost at the smallest size, but it does hold most of the way down. The sparkles in the eyes, called the catch light, keeps the focus on the eyes and facial recognition possible even at the smallest sizes.

Using a graphic, especially a simple, high color and tone contrast design, holds all the way down to the smallest 16 pixel size.

From these examples, it’s clear to see that an avatar image with good contrast between the background and the foreground subject, uncluttered and simple will reduce down better than a busy, dark image. An avatar image can be anything, but it must be shrinkable.

97 Comments

lorelle, with regards to the plugin, it says version 1.2, does it support 2.3 now?

i am using gravatars 2 plugin but would not hesitate to switch if there is an up to date official plugin for gravatars. don’t get me wrong, gravatars 2 is a great plugin to use, very simple and it is successfully integrated into my theme but i would definitely prefer something which is official.

I think that it is worth mentioning two alternatives to Gravatars – Wavatars and MonsterID. Both are very easy to integrate to a theme and I think have the primary advantage over Gravatars that they are generated and stored locally, so you arent dependent on the servers at Automattic (reliability and speed).

I host WP on my own domain and so I wanted a mixed solution, and I found it! I use Comvatars. It combines the best of all worlds. You can host your own avatars, use Gravatars or Favatars or all three! I choose all of them together and they work great. If the user doesn’t have a site-personal avatar it looks for a Gravatar, and if that fails it looks for the fav icon from their website. Lastly, if nothing can be found it uses an anoymous avatar from my unidentified section. I love it!

I’m fairly new into blogging and would like to enable avatars on my site. I installed the Easy Gravatar Plugin successfully. You mention in the post above that you can change your avatar by going to… “Users > Your Profile panel. In a box currently on the left side is where to upload your image.” I see no box on my WP admin. Where is this?

Ok… I see now that my image is in the GLOBAL (wordpress.com hosted) site. How can I make this work in my locally installed copy? Further, is there a way to opt-in users on my blog? I see that when I visit yours (again hosted at wp.com) there is a top iframe showing my credentials. Again, I’m new at this but learn quickly… thanks for any pointer. I like this feature.

If your commenters have a Gravatar account, their image will appear in your comments when using a Gravatars Plugin. To make it work, I’m sure you’ve found the panel added by the Plugin by now. There is no way to “opt-in” blog users other than to provide them with a link to get their own.

I can’t get the plugin to work on my wp.org site. I have it installed and activated and they ask me to put the snipet of code to call it () in the comment loop. When I add it, all I get is a URL pasted on the page. I’m not sure where to place that code gravater is giving me. Any suggestions?

Hello,
I’ve just added my avatar a couple of days ago and I really really hate what it looks like in Netvibes now with the avatar. The FAQ say that you cannot suppress your avatar. Is it absolutely true ? Because I’m currently contemplating starting a new blog to avoid this inconvenience …
Would you have a sugestion about that ? Should I mail the support (as soon as it re-opens …) to ask them ? Or is it a no-solution situation ?
Thanks for your input.

The issue you have is with Netvibes not WordPress or WordPress.com or even Gravatar. Change your avatar image if you don’t like it. I can’t help you with Netvibes. For help with how it works in WordPress and WordPress.com, see the appropriate forums or the Gravatars site.

Hello Lorelle,
thanks for the answer. Yet, my question was really about supressing the avatar in WordPress.com. I do not want to change it, I want it to disappear and things to go back as they worked before. I think I shall contact the support to ask them about that …
Thanks again.

I NEED HELP when i upload a pic and press send to editor, i want to move it around to the bottom, but when i click on it and move it, it wont go to the right place, I’ve looked in the FAQ but I can’t find a thing PLEASE HELP1

Delete the image from the Rich Text Editor. Move your cursor to the place where you want the image to go. Using the image uploader, add the image at that point. Then click on the image to align it within your post text. You can learn more about this in WordPress.com Blog Bling: Decorating Your WordPress.com Blog.

It can take some time, maybe a few hours, for the server to update itself so your Gravatar is visible across the web. If you continue to have problems, visit the WordPress.com Support Forum for help, if you are using WordPress.com. Visit the WordPress Support Forum if you are using the full version of WordPress.

Actually, that’s a very good question. I’m not sure I have the answer. I used to have an avatar on the WordPress Support Forum and it was indeed there when I checked my profile. I tried to edit my profile to see if I could set the avatar there, and suddenly, my avatar was gone. So I went to Gravatar.com from that page and I was already signed in with no avatar shown. Since I didn’t have an avatar associated with the email address of the support forums, I assumed that I was automatically still logged in through WordPress.org. So I’ve added a new avatar associated with that email address and we’ll wait and see if it appears on the WordPress.org forums.

If you are working with the full version of WordPress, go to gravatars.com and add your photo there if you are talking about having your gravatar on blogs you comment on. If you want your photograph to be on your blog, you can manually add it to your WordPress Theme with a text widget, or place it manually in a blog post or Page. There are also WordPress Plugins that will add a photograph to the author’s pageview or elsewhere through the WordPress Administration Panels.

The option of adding your picture or avatar to your blog through the Profile panel is for WordPress.com users.

Because of two possible reasons. One, your gravatar hasn’t updated to the new image properly, and two, the old one might be cached and stored in a site you visited previously with your old gravatar. Consider checking to see that you have indeed updated a new image at Gravatar.

Gravatars are free. In order to use Gravatars, you must use their service. How else will other people’s blogs and websites know where to get the image for your comment which is linked to your email address when you comment? Gravatars are becoming the default online avatar. There are other services, but most are using Gravatars on their forums and blogs. It used to be that you had to upload an image to every site you logged into. No login, no image. Gravatar crossed that border allowing for one sign up and that’s it.

Dear blogmaster!
I’ve read through all the posts here but don’t seem to find an answer to my question.
I am not interested in having gravatars on my “blog” just localized avatars. I have a self-hosted (wordpress.org) blog. There is no function within the user profile page that allows them to upload there own personal avatar (as there is in wordpress.com blogs).
As the administrator I have enabled avatars in the admin panel under the “Discussion” section, but still no upload avatar feature appears under the user profie. The very best I can get is that comments will display the “mystery man” avatar.
This is a little frustrating, but I am glad I am not the only one who is having problems understanding this :-)
Hope to hear from you,
Jennifer

You are actually one of the few to have issues with Gravatars. There are WordPress Plugins that will allow custom avatars, which means that upon signing up, people will have to provide one or they will get the default blank avatar. I’ve not worked with them, but you can try them to see which ones you like.

By enabling avatars since WordPress 2.x, you are automatically enabling Gravatars without needing a Plugin. Uncheck that box if you do not want to use Gravatars. Your WordPress Theme must be updated to work with WordPress 2.6-WordPress 2.7 in order for Gravatars, and most WordPress Plugins, to work. Be advised that versions before 2.7 have security vulnerabilities and you are at risk if you continue to run your blog with older versions of WordPress.

Check your email address to ensure it matches your Gravatar email address and the address within your WordPress.com profile. I accidentally put my email in with an extra letter, which caused it not to work and I couldn’t figure out why for the longest time. If that isn’t it, contact Gravatar for help.

Hi. This is a great post. I am having problems with my blog icon/photo. I already updated my gravatar and profile photo but it doesn’t show up on my dashboard, my comments, or when I link my blog. :( Help?

No, as the placement changes every few versions and updates. Look under Users, My Profile for the avatar, or better yet, go to gravatar.com and sign up with the email you use the most on WordPress.com and upload your image there. It will automatically work with WordPress.com.

Hi Lorelle,
Thanks for the post. I’m a little confused. When Gravatars first appeared on WordPress, I was able to move my cursor over my avatar, and my “About” info was displayed. Now, for some reason, the avatar is static and does not seem to be “live.” Have I unwittingly disabled something? Both Avatars and Gravatars are enabled on my controls. I have never received an email from Gravatar or WordPress, confirming I do have Gravatars enabled.
Thanks for your patience.
Ailsa

To get help with Gravatars, go to their site. You can login and verify what gravatar image is set. They’ve recently updated Gravatar with new Gravatar Hovercards for WordPress.com. If this is a WordPress.com issue, then you need to check with them through their support.

With havin so much content do you ever run into any issues of plagorism or copyright infringement?
My site has a lot of unique content I’ve either written myself or outsourced but it appears a lot of it is popping it up all over the internet without my permission. Do you know any techniques to help reduce content from being stolen? I’d definitely appreciate it.

[…] Lorelle van Fossen did the blogosphere a great service in promoting Gravatars. These are avatars that show up whenever you leave your email in a comment. I have these installed on my blog so why not go get your free gravatar and start seeing it show up wherever your safari takes you? […]

[…] 2.5+: How To Add Gravatar to Your WordPress Theme and Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog will help you learn more about the new Gravatar system now included in WordPress […]

[…] you just read this whole article and have no clue what a Gravatar is, I suggest you read this one first by Lorelle on WordPress. It goes over the basics of how to get your own Gravatar by signing up at […]

[…] your gravitar look good on this site, make sure it looks good at 65 pixels. My friend Lorelle has a fantastic post on what makes a good gravitar that you might want to read when trying to figure out what image to […]

[…] So to anybody who’s installing a custom wordpress blog at their private server instead of a free wordpress.com blog or a paid hosting at wordpress.com, this is a problem. I didn’t notice that the avatar option was missing, (it was there when I used my old blog at wordpress.com) until one of my friends asked me about it. Since I’m new to wordpress, let’s do this then. We’ll be based on the guide from here. […]

[…] you just read this whole article and have no clue what a Gravatar is, I suggest you read this one first by Lorelle on WordPress. It goes over the basics of how to get your own Gravatar by signing up at […]

[…] When you do add a favicon, keep in mind that your favicon needs to be easy to identify. A dark picture doesn’t reduce well, so you want something simple with a lot of contrast. Here are some good examples of favicons. […]

[…] email and associate it with an image. I explain how to create the image and add it to Gravatar in Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog, but here are a few things you need to […]

[…] Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog: With Automattic’s purchase and integration of Gravatars into WordPress.com, I offer a step-by-step guide for adding avatars and Gravatars to your WordPress and WordPress.com blogs. […]