{"id":28346,"date":"2021-04-14T17:29:33","date_gmt":"2021-04-14T17:29:33","guid":{"rendered":"http:\/\/Serving-Remote-Optimized-Images-w-gatsby-image"},"modified":"2025-10-26T02:51:18","modified_gmt":"2025-10-26T09:51:18","slug":"serving-remote-optimized-images-w-gatsby-image","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/serving-remote-optimized-images-w-gatsby-image\/","title":{"rendered":"Serving Remote Optimized Images w\/ gatsby-image"},"content":{"rendered":"

Even though a picture is worth a thousand words, it costs a pretty penny to store and deliver images online. Because of this, many modern web-development tools aim to minimize the impact of images, and other media assets, on site performance.<\/p>\n

This post shows you how to build an optimized webpage by leveraging the gatsby-transformer-cloudinary plugin and gatsby-image. We\u2019ll upload local images to a remote content delivery network (Cloudinary), then subsequently source, and transform, the responsive remote images in a GatsbyJS project.<\/p>\n

Sandbox<\/h2>\n

We completed this project on Codesandbox, and you can find it here<\/a>. You need to provide your Cloudinary credentials as environment variables in the sandbox by creating a .env<\/code> file in the root directory. Specify the environment variables as shown in .env.example<\/code>.<\/p>\n

https:\/\/codesandbox.io\/s\/using-remote-images-in-gatsby-w-gatsby-image-live-yqhxq<\/a><\/p>\n

Here are the steps we\u2019ll follow to use remote images in a gatsby project with gatsby-image:<\/p>\n

    \n
  1. Install Gatsby.js and its dependencies.<\/li>\n
  2. Set up the project configuration and layout.<\/li>\n
  3. Handle single- or multiple-image queries from Cloudinary through gatsby-transformer-cloudinary.<\/li>\n
  4. Optimize the sourced images with Cloudinary and lazy-load them with gatsby-image.<\/li>\n
  5. Transform the images using Cloudinary right in the graphql image query.<\/li>\n
  6. Design a responsive layout and typography with Chakra-ui.<\/li>\n<\/ol>\n

    Typically, with gatsby-image, images are stored locally in the project. To utilize external images, a hosted image is required and used with a normal HTML <img\/><\/code> element. With gatsby-transformer-cloudinary, we can utilize remote images in gatsby-image.<\/p>\n

    Prerequisite and Installation<\/h2>\n

    This project requires knowledge of JavaScript, React, and the basics of Gatsby.js. You install Gatsby.js and other packages with Node.js and its package manager npm, or Yarn, a viable alternative for it.<\/p>\n

    We install Gatsby.js globally with npm, and create a new project using the command<\/p>\n

            npm install -g gatsby-cli && gatsby new<\/span> gtc-demo\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    \n
    To give you a jump-start, Gatsby scaffolds new projects with a starter, which comprises several pages and modules, and we\u2019ll remove them when they\u2019re obsolete.<\/p>\n<\/blockquote>\n
    We proceed to install the required dependencies using the command:<\/p>\n
        cd<\/span> gtc-demo<\/span> && npm<\/span> i<\/span> --save<\/span> gatsby-transformer-cloudinary<\/span> dotenv<\/span> @chakra-ui<\/span>\/gatsby-plugin @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    Project configuration setup<\/h2>\n
    Sign up for a Cloudinary account<\/a>. Cloudinary offers a free tier, which is more than adequate for small to medium projects.\nOnce signed up, note your cloud name, API key, and API secret for later use.<\/p>\n
    Gatsby touts two types of plugins:<\/p>\n