Delayed Loading Gravatars

About two months I looked at adding Gravatars to a page, where in most cases there would be 20 different Gravatars on each page view. This seemed like a good time to try out Paul Hammond’s Speed Up Your Site with Delayed Content technique for loading Gravatar images. A few quick hacks later it was working and I was reasonably happy with it.

Fast forward a few more weeks and I found myself wanting to add Gravatars to another page, but this time most of the page views were going involving loading 250 different Gravatar images. I went back to my original script for delayed loading, cleaned it up a bit and applied it to this new page. At this point I realized that this was something that would be nice to have as a simple to use, mostly drop in feature. So I refined it a bit more, made a few more improvements and I’m now making it public as Async Gravatars. The code is open source and available on Github at

The process and the code are actually very simple:

Step 1

Use the same SRC attribute for all of your Gravatar images in the IMG tag, with the md5 of the real Gravatar in the data-gravatar_hash attribute, like so:

[sourcecode lang=”html”]
<img data-gravatar_hash="713072bbe89035a79c17d19e53dd5d9b"
class="load-gravatar" height="64" width="64"
src="" />

For PHP powered sites something like this will do the trick:

[sourcecode lang=”php”]
<img data-gravatar_hash="<?php echo md5( strtolower( trim( $email ) ) ); ?>"
class="load-gravatar" height="64" width="64"
src="" />

It is important to use the same SRC for all of the images, that way your browser only needs to make on request for all of them. And by using a real image with the same dimensions you won’t have issues with the page re-flowing when the real Gravatar gets loaded. I should note that the one SRC value you use doesn’t have to be loaded from, it can be something that you host on your own site.

Step 2

Load the jQuery code and the async-gravatars.js file, then one small piece of Javascript to trigger loading of the real Gravatar images after the page has finished loading:

[sourcecode lang=”javascript”]
jQuery( document ).ready( function() {
$( ‘.load-gravatar’ ).async_gravatars( {
ssl: true
} );
} );

The .async_gravatars() function accepts the following options, with these defaults:

[sourcecode lang=”javascript”]
‘default_img’ : ‘identicon’,
‘hash_attr’ : ‘data-gravatar_hash’,
‘rating’ : ‘pg’,
‘size’ : 64,
‘ssl’ : false

Step 3

Sit back and enjoy, there is no step 3!


If you want to see it in action I put together a little demo page that loads a sample of Gravatar images for some of my fellow Automatticians. A demo page is also included in the Github project.

The Javascript code that does the work is very simple, so spend a minute or two and take a look. If you have suggestions or improvements let me know.


  1. Claude Betancourt

    Thu 19 May 2011 at 8:14 pm

    Very nice and clean. Thanks for sharing.

  2. Happy to share, I hope someone finds it useful.

  3. Very useful, was just thinking about writing this myself. Good old Google to the rescue.


    I noticed you’ve also implemented gravatar previews in the comments as well, hmmm, nice.

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2019 Joseph Scott

Theme by Anders NorénUp ↑