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.

Table of Contents

• Prerequisites
• Installation
• Setup of Project Configurations
• Design of Page Layout
• Creation of Pages
• Summary

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-image, images are stored locally in the project and to utilize external images it has to come from a source, hence we use gatsby-transformer-cloudinary to fetch remote images.

At the end of this project, you will be able to:

1. Source and lazy-load remote images with gatsby-image
2. Transform images using gatsby-transformer-cloudinary
3. Design a responsive app with Chakra UI
4. Add progressive web app (PWA) and offline support for the webpages
5. Add Dark mode to your site with Chakra UI

The final app looks like this:

Prerequisites

This project requires knowledge of JavaScript, React, and basics of GatsbyJS. You install GatsbyJS and other packages with Node.js and its package manager npm, a viable alternative for which is Yarn.

#gatsby #image