Ben Gillbanks decided to put an old idea into motion. After the discussion over Gravatar privacy concerns and local avatars in WordPress reignited a couple of weeks ago, he went to work building Pixel Avatars, a generated avatar solution that requires no connection to a third-party service.
Gravatar solves a huge problem. It creates a global avatar so that users need to upload an image to only one site and carry it around the web with them. To use the service, sites must pass email addresses back to Automattic-owned Gravatar.com, such as when a visitor leaves a comment. The typical local avatar solution suffers because it forces users to sign up and upload an image for that specific site. Neither option is ideal for every site owner. And, both options tend to add heavily to the page load speed, depending on the number of avatars loaded.
That is where Pixel Avatars come into play. The script has all the privacy benefits of local avatars while maintaining a light footprint.
“Initially, I just liked the idea of making dynamic images that can follow you around the internet,” said Gillbanks. “I hadn’t even considered the privacy implications of using Gravatar — although in hindsight they are obvious.”
He is launching Pixel Avatars as a module in Toolbelt, a WordPress plugin that he launched in 2019. The plugin is a privacy-focused alternative to Jetpack, another project of Automattic that relies on connecting to a third-party server.
“The last few years have made a lot of people more aware of privacy online and so I want everything I build to have privacy as a priority,” he said.
Gillbanks had not put much thought into the Gravatar vs. local avatar discussion until the WP Tavern coverage of it. It is nice to see that we are least in part responsible for some innovative ideas.
“It is accepted that using Gravatar is how you add avatars to WordPress sites,” he said. “However, Gravatar is owned by Automattic and it has the potential for them to generate a lot of data about what sites people view (comment on), and how popular websites are. I have no reason to be suspicious here. I doubt it’s being used in this way, but the potential is there and we’d have no way of knowing if it was being used for data collection.”
He further explained that he believes Gravatar would be better as an optional plugin. “Even a bundled plugin would be better than having it on by default,” he said. “In my opinion, the default should be local avatars with a fallback similar to what I have made for non-registered users (or just a blank image). I’ve offered my code to the core privacy team — my plugin is GPL and the code is on Github, so they are welcome to use it if they wish.”
How the Pixel Avatars Feature Works
Pixel Avatars are completely local to the site. Using 5kb of JavaScript, which is smaller than a single avatar image on average, the code generates a pixelated avatar. For each user, the plugin creates a hash string using their email address. This method also ensures that the avatar is consistent regardless of what site it is used own.
One of the reasons this is much faster than traditional avatar systems is that the avatars are generated. They are not images that must be loaded, which can be especially problematic when loading a blog post with 100s of comments, each with its own avatar.
“If you use external or local avatars then you will still need to load additional image files and no matter how good your content delivery system (server, CDN, third-party avatar service, etc.), this will mean more data transfer, so a slower page load than my Javascript system,” said Gillbanks.
From a technical perspective, the script is relatively simple. It short-circuits the core WordPress get_avatar() function and returns an HTML canvas element with a unique data property containing the hash of the user’s email address. Once the page is loaded, the JavaScript code generates a unique image for each of the canvases.
“Since I am filtering a core function, this will work everywhere that function is used,” said Gillbanks. “Comments in the admin, the little avatar in the admin bar, and any other pages or blocks that make use of the get_avatar() function. It’s not just for comments.”
Some site owners may want to use Toolbelt to handle guest commenter’s avatars while serving a local avatar for logged-in users. This system could be the best of both worlds — local avatars for those who have them and not sending any data from site visitors to a third-party site. Gillbanks has tested against 10up’s Simple Local Avatars plugin, but it should work with other local avatar plugins.
