gatsby-image w/ Support for PWA and Dark Mode

By William Imoh

Building responsive web apps involves the cumbersome task of adding media queries in CSS.

Thanks to the rapid advancements in CSS and CSS-in-JS libraries, web responsiveness is only a few lines of code away.

This three-part series explains how to use the React component gatsby-image to create a responsive banner-and-grid gallery with remote, optimized images sourced from Cloudinary. Specifically:

  • Part 1 explains how to build an optimized webpage by leveraging Cloudinary’s gatsby-transformer-cloudinary plugin and gatsby-image, sourcing and transforming responsive remote images in a GatsbyJS project.
  • Part 2 describes how to source images from Cloudinary into gatsby-image by means of the getFluidImageObject and getFixedImageObject APIs?