Serving Remote Optimized Images w/ gatsby-image

By William Imoh

Even though a picture is worth a thousand words, as the English adage goes, it costs a pretty penny to store and deliver images online. Hence the common goal of many modern web-development tools to minimize the impact of images and other media assets on site performance.

This post, part 1 of a three-part series, shows you how to build an optimized webpage by leveraging gatsby-transformer-cloudinary plugin and gatsby-image, ultimately sourcing and transforming responsive remote images in a GatsbyJS project.

Here are the steps:

  1. Install GatsbyJS and its dependencies.
  2. Set up the project configuration and layout.
  3. Handle single- or multiple-image queries from Cloudinary through gatsby-transformer-cloudinary.
  4. Optimize the sourced images with Cloudinary and lazy-load them with gatsby-image.
  5. Transform the images with Cloudinary.
  6. Design a responsive layout and typography with Chakra UI.

Normally with gatsby-