The Startup
Published in

The Startup

Optimizing Gravatars in Gatsby

How to pass Gravatar images through gatsby-image’s awesome optimizations.

The Problem

Most images in Gatsby are preprocessed by a library called gatsby-image. For this library to work its magic in full effect, we need either:

  • The image in our local file system,
  • Or the remote image URL as a value somewhere in Gatsby’s GraphQL node.

Method 1: Remote, Dynamic, Fast-ish

The first case is when we need Gravatars to load-on-demand, in situations such us where we don’t know the Gravatar emails ahead of time during the development process.

yarn add gatsby-source-gravatar
Code for Method 1: Remote, Dynamic, Fast-ish
  • The toUrl call to get a Gravatar URL from an email address, and
  • How the url is used manually in GatsbyImage.

Method 2: Local, Static, Really Fast

If you know the emails you need for your Gravatars ahead-of-time and don’t mind the images being generated just once during build time, there is a better alternative to the approach discussed earlier in Method 1.

yarn add gatsby-source-gravatar gatsby-plugin-remote-images
  1. We get our Gravatars’ URLs into Gatsby’s running node using gatsby-source-gravatar,
  2. We turn those image URLs in the nodes to actual local file copies using gatsby-plugin-remote-images, and
  3. Use gatsby-image like we normally would with a local image file, and get its full optimization feature-set.
Code for gatsby-config.js
Code for Method 2: Local, Static, Really Fast

Full Source Code

CodeSandbox | Github Repo



Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +768K followers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store