{"id":6382,"date":"2020-11-27T17:43:00","date_gmt":"2020-11-27T17:43:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=6382"},"modified":"2021-09-12T15:13:34","modified_gmt":"2021-09-12T15:13:34","slug":"serving-remotely-optimized-images-using-gatsby-image","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/","title":{"rendered":"Serving Remotely Optimized Images using gatsby-image"},"content":{"rendered":"\n<p>Even though a picture is worth a thousand words, as the English proverb goes, storing and delivering photos online is expensive. As a result, many modern web-development tools have the purpose of reducing the impact of photos and other media assets on site performance.<\/p>\n\n\n\n<p>Section 1 of a three-section&nbsp;series, this post demonstrates how to use the gatsby-transformer-cloudinary plugin and gatsby-image to create an optimized webpage, finally fetching and transforming responsive remote images in a GatsbyJS project.<\/p>\n\n\n\n<p>The steps are as follows:<\/p>\n\n\n\n<ul><li>GatsbyJS and its dependencies must be installed.<\/li><li>Set up the project&#8217;s layout and setup.<\/li><li>Through gatsby-transformer-cloudinary, handle single- or multiple-image Cloudinary requests.<\/li><li>Cloudinary should be used to optimize the sourced images, and gatsby-image should be used to lazy-load them.<\/li><li>Cloudinary can be used to transform the photos.<\/li><li>With Chakra UI, create a responsive layout and typography.<\/li><\/ul>\n\n\n\n<p>Images are normally saved locally in the project with gatsby-image, and to use external images, they must come from a source, thus we use gatsby-transformer-cloudinary to request distant images.<\/p>\n\n\n\n<p>You will be able to do the following at the end of this project:<\/p>\n\n\n\n<ul><li>With gatsby-image, you may source and lazy-load remote pictures.<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/gatsby-transformer-cloudinary\">gatsby-transformer-cloudinary<\/a> transforms images.<\/li><li>Using <a href=\"https:\/\/chakra-ui.com\/\">Chakra UI<\/a>, create a responsive app.<\/li><li>Add offline functionality for the webpages and a progressive web app (PWA).<\/li><li>With Chakra UI, you can add Dark mode to your website.<\/li><\/ul>\n\n\n\n<p>This is how the final app looks:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-01.mp4\"><\/video><\/figure>\n\n\n\n<h2>Prerequisites<\/h2>\n\n\n\n<p>This project necessitates familiarity with JavaScript, React, and the fundamentals of GatsbyJS. Node.js and its package manager npm are used to install GatsbyJS and other packages; Yarn is a possible option.<\/p>\n\n\n\n<h2>Installation<\/h2>\n\n\n\n<p>Follow these steps:<a href=\"https:\/\/beginnerwebdev.com\/\"><\/a><\/p>\n\n\n\n<ul><li>Verify that Node.js and npm have been installed in your system by typing this command:&#8220;`bashnode -v &amp;&amp; npm -v&#8220;`<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>The output prints the version numbers of Node.js and npm. Otherwise, download and install both at &#91;nodejs.org](https:\/\/nodejs.org\/).<\/code><\/pre>\n\n\n\n<ul><li>Install GatsbyJS globally with npm. Type:&#8220;`bashnpm install -g gatsby-cli&#8220;`<\/li><\/ul>\n\n\n\n<ul><li>Create a Gatsby project in a directory of your choice. Type:&#8220;`bashgatsby new gtc-demo&#8220;`The default GatsbyJS starter then creates the project.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em><strong>Note<\/strong>: Gatsby scaffolds new projects with a starter, which consists of numerous pages and modules that Gatsby removes as the development process progresses to give you a head start.<\/em><\/p><\/blockquote>\n\n\n\n<ul><li>Install the following packages:<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/gatsby-transformer-cloudinary\">gatsby-transformer-cloudinary<\/a> is a plugin that allows gatsby-image to use Cloudinary&#8217;s excellent optimization and transformation capabilities.<\/li><li>Environment variables are handled by <a href=\"https:\/\/www.npmjs.com\/package\/dotenv\">dotenv<\/a>, a module.<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/@chakra-ui\/core\">chakra-ui<\/a> is a UI library for quickly creating React.js interfaces. Install the gatsby-plugin-chakra-ui plugin and any dependencies it has.<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/gatsby-plugin-chakra-ui\">Gatsby-plugin-chakra-ui<\/a> is a plugin that allows Gatsby projects to use Chakra UI.<\/li><\/ul>\n\n\n\n<p>In the project directory, run the following npm command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd gtc-demo &amp;&amp; npm i --save gatsby-transformer-cloudinary dotenv gatsby-plugin-chakra-ui @chakra-ui\/core @emotion\/core @emotion\/styled emotion-theming<\/code><\/pre>\n\n\n\n<h2>Setup of Project Configurations<\/h2>\n\n\n\n<p>To configure the project, follow the three steps below.<\/p>\n\n\n\n<h3>1. Create a Cloudinary account<\/h3>\n\n\n\n<p><a href=\"https:\/\/bit.ly\/2v3sy4N\">Create a Cloudinary account<\/a> by filling out the form below. Cloudinary has a free tier that is more than sufficient for modest to medium-sized projects.<\/p>\n\n\n\n<p>After that, make a note of your cloud name, API key, and API secret for future reference. As shown in this example, they are displayed on your Cloudinary dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6385\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/attachment\/remote-optimized-images-with-gatsby-image-part-01-02\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-02.jpg\" data-orig-size=\"800,242\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-part-01-02\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-02-300x91.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-02.jpg\" loading=\"lazy\" width=\"800\" height=\"242\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-02.jpg\" alt=\"\" class=\"wp-image-6385\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-02.jpg 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-02-300x91.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-02-768x232.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3>2. Set up gatsby-config.js<\/h3>\n\n\n\n<p>Gatsby recommends two kinds of plugins:<\/p>\n\n\n\n<p>Source plugins pull data from a variety of sources into Gatsby projects.<\/p>\n\n\n\n<p>Transformer plugins translate sourced data into formats that can be used.<\/p>\n\n\n\n<p>To begin, gatsby-transformer-cloudinary uploads images from a local directory to Cloudinary, converts them to a format that gatsby-image can understand, and then returns them. Cloudinary is a drop-in replacement for gatsby-plugin-sharp that allows you to use gatsby-native image&#8217;s image-processing features.<\/p>\n\n\n\n<p>Finally, Gatsby includes a configuration file named &#8220;gatsby-config.js&#8221; in the project&#8217;s root directory, where you can adjust the installed plugins.<\/p>\n\n\n\n<p>Update the array of plugins in &#8220;gatsby-config.js&#8221; as follows to set up gatsby-transformer-cloudinary and gatsby-plugin-chakra-ui:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>require('dotenv').config();\n\nmodule.exports = {\n  siteMetadata: {...},\n  plugins: &#91;\n    `gatsby-plugin-react-helmet`,\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `cloudinary-images`,\n        path: `${__dirname}\/src\/cloudinary-images`,\n      }\n    },\n    {\n      resolve: 'gatsby-transformer-cloudinary',\n      options: {\n        cloudName: process.env.CLOUDINARY_CLOUD_NAME,\n        apiKey: process.env.CLOUDINARY_API_KEY,\n        apiSecret: process.env.CLOUDINARY_API_SECRET,\n        uploadFolder: 'gtc-art-gallery',\n      },\n    },\n    {\n      resolve:`gatsby-plugin-chakra-ui`,\n      options: {\n        isUsingColorMode: true,\n      }\n    },\n    &#91;...]\n  ],\n}<\/code><\/pre>\n\n\n\n<p>The source plugin gatsby-source-filesystem sources file nodes into the Gatsby data layer in the configuration file. You&#8217;ve gathered all of the photos in a folder, which will be uploaded to Cloudinary after the build is complete.<\/p>\n\n\n\n<p>To begin, run the following command in the project&#8217;s src directory to create a folder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>mkdir cloudinary-images<\/code><\/pre>\n\n\n\n<p>After that, copy and paste all of your media assets into that folder.<\/p>\n\n\n\n<p>The color mode setting option in gatsby-plugin-chakra-ui has two options: true or false.<\/p>\n\n\n\n<h3>3. Add environment variables<\/h3>\n\n\n\n<p>gatsby-transformer-cloudinary offers options for adding your Cloudinary credentials as environment variables, as well as an upload folder, in the gatsby-config.js file. That folder might already exist on Cloudinary, but if it doesn&#8217;t, the plugin creates it during the app development.<\/p>\n\n\n\n<p>To add environment variables, follow these steps:<\/p>\n\n\n\n<ul><li>For security reasons, create an environment file called &#8220;.env&#8221; in the root of your project to store all of the environment variables. Because &#8220;.env&#8221; is in the &#8220;.gitignore&#8221; file, it isn&#8217;t pushed to a remote repository with git.<\/li><li>In &#8220;.env&#8221;, add your Cloudinary credentials:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code># Find this at https:\/\/cloudinary.com\/console\/settings\/account\nCLOUDINARY_CLOUD_NAME=xxxxx\n\n# Generate an API key pair at https:\/\/cloudinary.com\/console\/settings\/security\nCLOUDINARY_API_KEY=xxxxxxxxxxxxxx\nCLOUDINARY_API_SECRET=xxxxxxxxxxxxxxxxxxx<\/code><\/pre>\n\n\n\n<p>See the <a href=\"https:\/\/www.npmjs.com\/package\/gatsby-transformer-cloudinary\">readme<\/a> for more information about &#8220;gatsby-transformer-additional&#8221; cloudinary&#8217;s options.<\/p>\n\n\n\n<p>The &#8220;gatsby-plugin-chakra-ui&#8221; is supplied with the color mode config option. &#8220;True&#8221; or &#8220;false&#8221; is the value of this config parameter.<\/p>\n\n\n\n<p>Next, set up a development environment to take advantage of Gatsby&#8217;s development features, such as hot reloading and the GraphQL query builder, as well as to view the project in the browser during runtime. Type the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gatsby develop<\/code><\/pre>\n\n\n\n<p>The development server can be found at <a href=\"http:\/\/localhost:8000\/\">http:\/\/localhost:8000\/<\/a> after it has been established.<\/p>\n\n\n\n<p>For the time being, here is how the project looks:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6386\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/attachment\/remote-optimized-images-with-gatsby-image-part-01-03\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-03.png\" data-orig-size=\"800,633\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-part-01-03\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-03-300x237.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-03.png\" loading=\"lazy\" width=\"800\" height=\"633\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-03.png\" alt=\"\" class=\"wp-image-6386\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-03.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-03-300x237.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-03-768x608.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2>Design of Page Layout<\/h2>\n\n\n\n<p>The layout.js file in the &#8220;src\/components&#8221; directory describes the page design, which is consistent throughout the site and can include headers and footers.<\/p>\n\n\n\n<p>The layout currently has a GatsbyJS &#8220;useStaticQuery&#8221; hook, which allows Gatsby components to do GraphQL queries. With &#8220;useStaticQuery&#8221;, you&#8217;ll get the site title from the &#8220;siteMetadata&#8221; defined in gatsby-config.js.<\/p>\n\n\n\n<p>Edit the layout to include a header, which serves as the website&#8217;s navigation bar and body:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\"\nimport PropTypes from \"prop-types\"\nimport {graphql, useStaticQuery} from \"gatsby\"\nimport Header from \".\/header\"\nimport {Box, Text, Link} from \"@chakra-ui\/core\/dist\";\n\nconst Layout = ({children}) =&gt; {\n\n    const data = useStaticQuery(graphql` `query SiteTitleQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }``);\n\n    return (\n        &lt;Box&gt;\n            &lt;Header siteTitle={data.site.siteMetadata.title}\/&gt;\n            &lt;Box width={&#91;'90%', '90%', '80%']} mx={'auto'}&gt;\n                &lt;main&gt;{children}&lt;\/main&gt;\n                &lt;Text mt={10}&gt;For this demo, the amazing images here by great artists were all sourced from &lt;Link href={\"https:\/\/unsplash.com\/\"} target={\"_blank\"} color=\"teal.500\"&gt;Unsplash&lt;\/Link&gt;&lt;\/Text&gt;\n            &lt;\/Box&gt;\n        &lt;\/Box&gt;\n    )\n};\n\nLayout.propTypes = {\n    children: PropTypes.node.isRequired,\n};\n\nexport default Layout<\/code><\/pre>\n\n\n\n<p>In the code above:<\/p>\n\n\n\n<ul><li>The navigation bar is represented by the custom component &#8220;&lt;Header\/&gt;&#8221;. Chakra UI styles the layout with different responsive widths and numerous breakpoints for mobile, tablet, and desktop devices, respectively: 90%, 90%, and 80%. In assigning values for various screen sizes, most properties of Chakra UI&#8217;s components follow that pattern.<\/li><li>The &#8220;mx&#8221; property sets the page&#8217;s horizontal-margin property to &#8220;auto&#8221;, which centers the content of the page regardless of its width.<\/li><\/ul>\n\n\n\n<p>Next, update the &#8220;Header&#8221; functional component in &#8220;src\/components\/header.js&#8221; to include the site title and navigation bar dimensions as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {Box, Flex, Heading} from \"@chakra-ui\/core\/dist\";\n\nconst Header = ({siteTitle}) =&gt; {\n    return (\n        &lt;Flex\n            as=\"nav\"\n            align=\"center\"\n            justify=\"space-between\"\n            wrap=\"wrap\"\n            px={&#91;\"0.5em\", \"0.5em\", \"1.5em\"]}\n            py={&#91;\"1em\", \"1em\", \"1.5em\"]}\n            bg=\"blue.900\"\n            color=\"white\"\n        &gt;\n            &lt;Flex align=\"flex-start\"&gt;\n                &lt;Heading as=\"h1\"&gt;\n                    &lt;GatsbyLink to=\"\/\"&gt;\n                        &lt;Box color={'white.800'}&gt;\n                            &lt;Text fontSize={&#91;\"md\", \"md\", \"lg\"]}&gt;{siteTitle}&lt;\/Text&gt;\n                        &lt;\/Box&gt;\n                    &lt;\/GatsbyLink&gt;\n                &lt;\/Heading&gt;\n            &lt;\/Flex&gt;\n            &lt;Flex align=\"flex-end\"&gt;\n                &lt;Button variantColor={'blue'} mr={2} size={\"xs\"}&gt;\n                    &lt;GatsbyLink to=\"\/\"&gt;Home&lt;\/GatsbyLink&gt;\n                &lt;\/Button&gt;\n            &lt;\/Flex&gt;\n        &lt;\/Flex&gt;\n    )\n};<\/code><\/pre>\n\n\n\n<p>Chakra UI components and styles can be used to create a simple navigation bar with the site title and a button to return to the homepage with a single click, as shown above.<\/p>\n\n\n\n<h2>Creation of Pages<\/h2>\n\n\n\n<p>Create two pages, one for a responsive banner image and the other for a responsive grid of many photos.<\/p>\n\n\n\n<h3>Responsive Banner Image<\/h3>\n\n\n\n<p>With these two stages, create the first page, which is the homepage:<\/p>\n\n\n\n<ul><li>Apply a Cloudinary modification to a single fluid banner picture.<\/li><li>Create a banner.<\/li><\/ul>\n\n\n\n<p>Perform the following actions:<\/p>\n\n\n\n<ul><li>Edit the file src\/pages\/index.js with the code below to import the required modules:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\"\nimport {graphql, Link, useStaticQuery} from \"gatsby\";\nimport Layout from \"..\/components\/layout\"\nimport SEO from \"..\/components\/seo\"\nimport Image from \"gatsby-image\"\nimport {Box, Button, Heading, Text} from \"@chakra-ui\/core\/dist\";<\/code><\/pre>\n\n\n\n<p>This component&#8217;s images can be queried using the &#8220;useStaticQuery&#8221; hook. You can also use a page query to allow access to variables passed in &#8220;pageContext&#8221; because this is a page component. However, none of this is necessary; StaticQuery is far more basic.<\/p>\n\n\n\n<ul><li>Make an IndexPage functional component and export it. Use the query below to get the banner image and save it to a variable named data in that component.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const IndexPage = () =&gt; {\n    \/\/ fetch images\n    const data = useStaticQuery(graphqlquery BannerImage {\n      bannerImage: file(name: { eq: \"7\" }) {\n        cloudinary: childCloudinaryAsset {\n          fluid(transformations:&#91;\"e_grayscale\"] maxWidth: 1500) {\n            ...CloudinaryAssetFluid\n          }\n        }\n      }\n    });\n    return (\n        &lt;Layout&gt;\n            &#91;...]\n        &lt;\/Layout&gt;\n    )\n};\n\nexport default IndexPage<\/code><\/pre>\n\n\n\n<ul><li>Use the following code to assign the query&#8217;s returned picture to a variable in the component:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const IndexPage = () =&gt; {\n    \/\/ fetch images\n    const data = useStaticQuery(&#91;...]);\n\n    \/\/ Assign the returned images to variables.\n    const bannerImage = data.bannerImage.cloudinary.fluid;\n\n    return (\n    &#91;...]\n    )\n};<\/code><\/pre>\n\n\n\n<p>The picture returned is a fluid image that spans the breadth of its parent container.<\/p>\n\n\n\n<p>Cloudinary transforms are supplied to the queries and applied to the output image with gatsby-transformer-cloudinary. You&#8217;re looking for a grayscale image for this.<\/p>\n\n\n\n<p>You can use the query to pass numerous transformations, including chained transformations. See Cloudinary&#8217;s image transforms reference page for <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformation_reference\">additional information<\/a>.<\/p>\n\n\n\n<p>The returned picture&#8217;s aspectRatio, base64 image, src, sizes, and srcSet are all contained in the\u2026CloudinaryAssetFluid fragment. Fragments replace GraphQL queries where such data fields must be supplied in a query.<\/p>\n\n\n\n<p>On Cloudinary, this is the original image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6387\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/attachment\/remote-optimized-images-with-gatsby-image-part-01-04\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-04.jpg\" data-orig-size=\"800,534\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-part-01-04\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-04-300x200.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-04.jpg\" loading=\"lazy\" width=\"800\" height=\"534\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-04.jpg\" alt=\"\" class=\"wp-image-6387\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-04.jpg 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-04-300x200.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-04-768x513.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Here&#8217;s the transformed grayscale image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6388\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/attachment\/remote-optimized-images-with-gatsby-image-part-01-05\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-05.jpg\" data-orig-size=\"800,534\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-part-01-05\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-05-300x200.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-05.jpg\" loading=\"lazy\" width=\"800\" height=\"534\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-05.jpg\" alt=\"\" class=\"wp-image-6388\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-05.jpg 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-05-300x200.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-05-768x513.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>By default, gatsyby-transformer-cloudinary optimizes the image quality and format<\/p><\/blockquote>\n\n\n\n<p>gatsby-image was used to render all of the photos for this project. This technique makes use of GatsbyJS&#8217;s native image processing and optimization features, such as image responsiveness and lazy loading.<\/p>\n\n\n\n<p>Chakra UI creates simple interfaces that don&#8217;t require CSS. The required Chakra UI components for building the page are &#8220;Box&#8221;, &#8220;Button&#8221;, &#8220;Heading&#8221;, and &#8220;Text&#8221;.<\/p>\n\n\n\n<p>The default starter includes an &#8220;SEO&#8221; component that adds SEO attributes to the page.<\/p>\n\n\n\n<p>After you&#8217;ve finished the queries, use the following code to render the banner picture in the component:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const IndexPage = () =&gt; {\n    &#91;...]\n    return (\n        &lt;Layout&gt;\n            &lt;SEO title=\"Home\"\/&gt;\n            &lt;Box mb={&#91;10, 20, 100]}&gt;\n                &lt;Heading size={'xl'} m={3} textAlign={\"center\"}&gt;Responsive Banner Image&lt;\/Heading&gt;\n                &lt;Box&gt;\n                    &lt;Image fluid={bannerImage}\/&gt;\n                &lt;\/Box&gt;\n            &lt;\/Box&gt;\n            &lt;Text my={5}&gt;Click any of the buttons below to see the gallery or single Image with the &lt;i&gt;getFluidImageObject&lt;\/i&gt; API&lt;\/Text&gt;\n\n            &lt;Box&gt;\n                &lt;Button variantColor={'teal'} mr={10} mb={&#91;2, 0, 0]}&gt;\n                    &lt;Link to=\"\/gallery\"&gt; Gallery Images&lt;\/Link&gt;\n                &lt;\/Button&gt;\n            &lt;\/Box&gt;\n        &lt;\/Layout&gt;\n    )\n};<\/code><\/pre>\n\n\n\n<p>To give you some context:<\/p>\n\n\n\n<ul><li>The Box component, as a supercharged div element, behaves like a regular div and accepts properties, including responsive breakpoints, for added functionality.<\/li><li>By supplying an array value to component properties in the Chakra UI, you may build responsive sizes. The sizes in that array correspond to mobile, desktop, and tablet, in that order.<\/li><li>Responsive typography is used in the &#8220;Text&#8221; and &#8220;Heading&#8221; components.<\/li><li>The &#8220;&lt;Image\/&gt;&#8221; component of gatsby-image accepts a property to render either a fixed-width image or a fluid image. This project shows a lazy-loaded fluid image with responsive variants generated.<\/li><li>Through Gatsby&#8217;s &#8220;Link&#8221; component, the &#8220;Button&#8221; component navigates to the gallery page.<\/li><\/ul>\n\n\n\n<p>Finally, restart the development server to see the homepage with the banner image and test responsiveness by dragging the browser width. Also, be sure to test the page in different mobile widths.<\/p>\n\n\n\n<p>Refresh the website or look in the network tab of your browser to see the lazy loading in action. Because repeated page refreshes returned cached image versions, you may need to perform a hard refresh to see the slow loading.<\/p>\n\n\n\n<h3>Gallery Images<\/h3>\n\n\n\n<p>Make a query for fluid pictures, just like you did for the single-banner image, and then load them into the gallery.<\/p>\n\n\n\n<ul><li>In the pages directory, create a file called &#8220;gallery.js&#8221;. Import the appropriate dependencies into the file, then use the &#8220;\u2026CloudinaryAssetFluid&#8221; fragment to do a graphQL query for the first nine photos. The code is as follows:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import Image from \"gatsby-image\"\nimport {Box, Heading, SimpleGrid} from \"@chakra-ui\/core\/dist\";\nimport {graphql, useStaticQuery} from \"gatsby\";\n\n\nconst SinglePage = () =&gt; {\n    const data = useStaticQuery(graphql`query GalleryImages{\n      listImages: allCloudinaryAsset(limit: 9) {\n        images: edges {\n          node {\n            fluid {\n              ...CloudinaryAssetFluid\n            }\n          }\n        }\n      }\n    }`);\n\n    const galleryImages = data.listImages.images;\n\n    return (\n        &#91;...]\n    )\n};\n\nexport default SinglePage<\/code><\/pre>\n\n\n\n<p>Using the Chakra UI SimpleGrid component, render the gallery in the component as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const SinglePage = () =&gt; {\n    const data = useStaticQuery(&#91;...]);\n\n    const galleryImages = data.listImages.images;\n\n    return (\n        &lt;Layout&gt;\n            &lt;SEO title={\"single\"}\/&gt;\n            &lt;Box mx={'auto'} my={10}&gt;\n                &lt;Heading textAlign={\"center\"} size={\"xl\"} mb={10}&gt;Optimized Gallery Images&lt;\/Heading&gt;\n                &lt;SimpleGrid columns={&#91;1, 2, 3]} spacing={2}&gt;\n                    {galleryImages.map((val, index) =&gt; (\n                        &lt;Box key={index} p={3} m={2} my={\"auto\"} shadow=\"md\" borderWidth=\"1px\" rounded={'lg'}&gt;\n                            &lt;Image fluid={val.node.fluid}\/&gt;\n                        &lt;\/Box&gt;\n                    ))}\n                &lt;\/SimpleGrid&gt;\n            &lt;\/Box&gt;\n        &lt;\/Layout&gt;\n    )\n};\n\nexport default SinglePage<\/code><\/pre>\n\n\n\n<p>With the gatsby-image &#8220;&lt;Image\/&gt;&#8221; component, you map across the array of returned images in the render method in a spaced grid.<\/p>\n\n\n\n<p>The finished grid gallery looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01-06.mp4\"><\/video><\/figure>\n\n\n\n<p>Take a peek at the <a href=\"https:\/\/gtc-demo.netlify.app\/\">Netlify-hosted project<\/a>. See the <a href=\"https:\/\/github.com\/Chuloo\/gtc-demo\/tree\/part-1\">GitHub source<\/a> for the whole code.<\/p>\n\n\n\n<h2>Summary<\/h2>\n\n\n\n<p>You now know how to get optimized Images from Cloudinary and render them as fluid images using gatsby-image, which includes all of GatsbyJS&#8217; native image-optimization and Cloudinary&#8217;s transformation features.<\/p>\n\n\n\n<p><a href=\"https:\/\/azoora.com\/blog\/uncategorized\/serving-remotely-optimized-images-using-gatsby-image-w-o-graphql\/\">Section 2<\/a> will show how to use the gatsby-transformer-cloudinary API to get a single fluid image without having to use graphQL queries to input Cloudinary images into gatsby-image. It&#8217;s entertaining! Keep an eye out for updates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Even though a picture is worth a thousand words, as the English proverb goes, storing and delivering photos online is expensive. As a result, many modern web-development tools have the purpose of reducing the impact of photos and other media assets on site performance. Section 1 of a three-section&nbsp;series, this post demonstrates how to use [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[145,77],"tags":[146,73],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1EW","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6382"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=6382"}],"version-history":[{"count":3,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6382\/revisions"}],"predecessor-version":[{"id":6395,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6382\/revisions\/6395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/6384"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=6382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=6382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=6382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}