How to Change the Gravatar Image Size in WordPress

Do you want to change the Gravatar image size in WordPress?

Gravatar is a service that connects a user’s email address with their picture. WordPress themes show Gravatars at a set size, but you may prefer to make these images smaller or larger to better suit your website’s design.

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

What Is Gravatar?

Gravatar stands for Globally Recognized Avatar. It’s a web service that allows you to create a profile and associate avatar images with your email address.

Most WordPress themes show a Gravatar next to the user’s comment. Some themes also display a Gravatar in the author bio box.

When a user doesn’t have a Gravatar account, WordPress will show a default image 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.

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’re most interested in.

How to Change Gravatar Size for WordPress Comments

This method requires you to edit your theme files, so it’s not the most beginner-friendly option. However, this method should work for most WordPress themes.

Keep in mind that if you edit your WordPress theme files directly, then those changes will disappear when you update the theme.

With that in mind, we recommend creating a child theme as this allows you to update your WordPress theme without losing customization.

First, you need to connect to your WordPress site using an FTP client such as FileZilla, or you can use the file manager of your WordPress hosting cPanel. If you’re a SiteGround customer, then you can use the Site Tools dashboard instead.

If this is your first time using FTP, then you can see our complete guide on how to connect to your site using FTP.

Once you’re connected, go to /wp-content/themes/ and open the folder for your current WordPress theme.

Once here, you can open the comments.php file and look for the wp_list_comments function. Inside this function you’ll find theavatar_size, which sets the size of the Gravatar.

Here’s an example of how this might look:

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

You can simply change the avatar_size to the size you want to use. In the code snippet above, this would mean changing 60 to another number.

Gravatars are square so WordPress will use the same value for the image’s width and height.

After making this change, save and upload the file back to your WordPress hosting account. When you’re finished, visit your WordPress blog to see the change in action.

If the Gravatar image hasn’t changed, then it may be due to your cache. To learn more, please see our guide on how to fix WordPress not updating right away.

If the Gravatar still doesn’t change, then your theme’s CSS could be overriding the setting in the comments.php file.

You can check using your browser’s Inspect tool.

The steps will vary depending on which browser you’re using, but on Chrome you can simply right-click or Control-click the Gravatar and then select Inspect.

This will show the page’s HTML and CSS code in a new panel.

In this code, look for an image alt src section. This should contain a height value, which is the size of your Gravatar.

If the size is different to what you specified in the comments.php file, then this means your theme’s style.css file is overriding your changes.

You need to use the FTP client to open the style.css file in your theme’s folder. Then, search for a block of code that has the word avatar.

You’ll typically find this in a comment-author .avatar CSS class, such as this:

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

You can now go ahead and change the width and height to the values you want to use for your Gravatars.

After that, simply save your changes. Now if you visit your site, you will see your updated Gravatar images.

You may be wondering why we start by changing avatar_size in the comments.php file when you could simply override the image size using CSS.

Firstly, if you use CSS to make the image appear larger than it actually is, then it may look blurry. Secondly, this approach gives us 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 so that it loads faster.

For more tips, please see our ultimate guide to boost WordPress speed and performance.

How to Display Round Gravatar Images

You may have noticed that the Gravatar images on WPBeginner are round, and want to show round images on your website.

Some themes, such as Astra and Hestia Pro show round Gravatars by default. If your theme displays square Gravatars instead, then you can make these images round using code.

To start, go to Appearance » Customize.

Here, click on Additional CSS and then add the following code:

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

To make this change live, click on the ‘Publish’ button.

Now if you visit your WordPress blog, you’ll see the Gravatar images are round.

If this doesn’t work with your WordPress theme, then there is likely a theme function or a plugin that’s overriding the default Gravatar classes.

To check what CSS class your theme is using for its Gravatars, simply right-click or Control-click on any Gravatar and then open the Inspect tool.

Once again, this will show the HTML and CSS for the page.

You can simply hover over the code until the Gravatar image is highlighted, which will show the image’s CSS class.

If the class is something other than ‘avatar’ then you’ll need to use this in the CSS code above, instead of .avatar.

How to Change Gravatar Size for Author Bios

Some WordPress themes also show Gravatar in their author bio boxes.

If you want to add this feature to your website, then check out our guide on how to add an author info box in WordPress posts.

To change the default Gravatar size in your author bio boxes, you need to find the theme file that adds the bio. Typically, this file will contain get_avatar.

You’ll often find this code in a template part file called author-bio.php, single.php file, functions.php file, or similar. Here’s an example of how this code might look:

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

In the snippet above, you can simply change the number 85 to the size you want to use.

In other themes, the code may look like this:

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

After changing the size, simply refresh the page to see your new author bio box.

If the Gravatars haven’t changed, then you’ll need to search for the avatar class in the style.css file by following the same process described above. Once you find this class, you’ll need to change the height and width values.

We hope this tutorial helped you learn how to change the Gravatar image size in WordPress. You may also want to learn how to create a contact form in WordPress or check out our list of the best landing page plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.