Serving Remote Optimized Images w/ gatsby-image w/o GraphQL

By William Imoh

Part 1 of this series chronicles the process of using remote images from Cloudinary in GatsbyJS projects through GraphQL queries. Here in part 2, you’ll learn how to —

  • Leverage remote images stored in Cloudinary and served through an optimized content delivery network (CDN).
  • Serve fluid or fixed images with gatsby-image.
  • Render images for responsiveness and optimize them with gatsby-image.
  • Transform those images with Cloudinary.

For instance, we can quickly change this penguin image:

Specifically, this part guides you through two processes:

  1. Fetch an image from Cloudinary with the getFluidImageObject