How to Change the Gravatar Image Size in WordPress

Do you want to change the size of Gravatar images on your WordPress site?

Gravatar is a service that connects a user’s email address with their picture. WordPress themes display Gravatar images at a certain size, but some website owners may prefer larger or smaller images.

In this article, we’ll show you how to change the size of Gravatar images in your WordPress theme.

What Is Gravatar?

Gravatar stands for Globally Recognized Avatar. It’s a web service created and run by WordPress co-founder Matt Mullenweg’s company called Automattic. It lets you create a profile and associate avatar images to your email addresses.

Most WordPress themes add a Gravatar next to each user comment. Some also display a Gravatar in the author bio box. When a user doesn’t have a Gravatar account, the default Gravatar image is shown instead.

Since the size of Gravatar images is defined by your theme, you’ll need to edit your theme files to change this setting on your WordPress website.

If you’re not familiar with editing the code of your WordPress files, then we recommend that you first back up your website and check out our beginner’s guide on how to paste code snippets into WordPress.

You might also like to see our beginner’s guide on how to use FTP to access your WordPress files.

Having said that, let’s take a look at how you can change the Gravatar image size on your WordPress site. You can use the list below to jump to the section you are most interested in.

How to Change Gravatar Size for WordPress Comments
How to Display Round Gravatar Images
How to Change Gravatar Size for Author Bios

How to Change Gravatar Size for WordPress Comments

The first thing you need to do is connect to your website using FTP software and then go to /wp-content/themes/. Then open the folder of the theme you’re currently using.

Alternatively if your WordPress hosting company offers a File Manager, then you can edit this file using the web interface in your cPanel.

Once there, you should open the comments.php file located in your themes folder. Next, you need to find the following code: avatar_size

It will be inside the wp_list_comments function.

<?php
wp_list_comments( 
	array(
		'avatar_size' => 60,
    	'style'       => 'ol',
    	'short_ping'  => true,
	) 
);
?>

Simply change the size to whatever dimensions you like. In the screenshot above, you would change 60 to another number. Gravatars are square, so the value you set will be the same for both width and height.

Go ahead and save your changes. If you are using FTP, then upload the changes to your server.

Now open a post that has comments to see if your changes are live. This is how our demo site appears before and after increasing the Gravatar size from 60 to 70 pixels. We’re using the default Twenty Twenty-One theme.

If the size of the Gravatar image did not change, then it could be because of your cache. First see our guide on how to fix WordPress not updating right away.

If it still doesn’t change, then it could be because your theme’s CSS is overriding the setting in comments.php. The best way to check is to use Inspect tool in your browser.

Simply right click on the Gravatar in your browser and click Inspect.

This will split your browser screen into two parts. At the bottom of the screen, you will see the HTML and CSS for the page.

You need to look at the height and width of the Gravatar image to see if it reflects the value that you set. When the code that your mouse is pointing at highlights the Gravatar, you should be able to see the size it is displayed at.

You’ll notice that the size of the image here is different to what you specified in the comments.php file. This means that your theme’s style.css file is overriding the default image size.

Many themes such as the Twenty Sixteen theme use CSS to control the Gravatar image size for different screen sizes.

You need to open the style.css file in your theme’s folder and search for avatar. You’ll likely find a CSS class comment-author .avatar which contain a code like this:

.comment-author .avatar {
    height: 42px;
    position: relative;
    top: 0.25em;
    width: 42px;
}

Go ahead and change the width and height to match the value you set earlier in the comments.php file.

That’s all. You have successfully changed the Gravatar image size in your WordPress comments.

Now you might be wondering why we start by changing avatar_size in the comments.php file when you can simply override the image size using CSS. There are two reasons.

First, to avoid blurry images. If you use CSS to make the image appear larger than it actually is, then it will look blurry.

Second, for faster load times. If you use CSS to make the image appear smaller, then your website still needs to load the larger image. By changing the size in comments.php, you make the actual image smaller and it loads faster.

How to Display Round Gravatar Images

You may have noticed that Gravatar images on WPBeginner are round, and want to do the same on your own site. Some themes, such as Twenty Twenty-One and Astra, display round Gravatars by default.

If your theme displays square Gravatars by default, then you can create the same effect by using code. We’ll use the border-radius property of CSS3.

The first thing you need to do is edit your theme’s style.css file using an FTP program. Alternatively, you can add the CSS by going to Appearance » Customize » Additional CSS in your WordPress admin.

Next, you want to add the following code:

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

This should work on most WordPress themes. Here are before and after screenshots of our demo site using the Twenty Twenty theme.

However, if this does not work on your theme, then there is probably some plugin or your theme function messing with the default classes used for Gravatar in WordPress.

In order to find out which CSS class Gravatar images are using in your theme, you need to open a blog post that has comments. Scroll down to the comments section, and right click on the Gravatar image to select Inspect.

This will split your browser screen into two parts. At the bottom of the screen, you will see the HTML and CSS for the page. You need to hover over the code until the Gravatar image is highlighted, and then find the image’s CSS class.

If the class is something other than ‘avatar’ then use that instead of .avatar in the CSS code above.

How to Change Gravatar Size for Author Bios

Some WordPress themes also use Gravatar for author bio boxes. You may first have to type something in the Biographical Info field of the user’s profile. Learn more in our guide on how to add an author info box in WordPress posts.

You can change the default Gravatar size here in a very similar way to the comments template.

First, you need to locate the theme file which adds the bio. You need to search the theme’s template files for the code get_avatar.

The default Twenty Twenty-One theme uses the template part file called author-bio.php. In other themes it could be in the single.php file, functions.php file, or somewhere else.

Here is the code in Twenty Twenty-One’s author-bio.php file:

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
		<?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

You will just have to change the number 85 to whatever you like.

In other themes, the code may look like this:

get_avatar( get_the_author_meta( 'user_email' ), 85);

After you change the size, refresh the page to see if the size updated. If not, then you’d need to search for the avatar class in the style.css file like we showed for comments, and update the size there as well.

This is how our demo site appears before and after decreasing the Gravatar size from 85 to 60 pixels when using the default Twenty Twenty-One theme.