{"id":28106,"date":"2022-03-24T20:42:50","date_gmt":"2022-03-24T20:42:50","guid":{"rendered":"http:\/\/using-dynamic-image-in-gatsby-plugin-image"},"modified":"2025-02-22T16:09:55","modified_gmt":"2025-02-23T00:09:55","slug":"using-dynamic-image-in-gatsby-plugin-image","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/","title":{"rendered":"Using dynamic image in gatsby-plugin-image"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>It can be time-consuming to ensure that users have an excellent experience with images on the web.<\/p>\n<p>With Gatsby, we can take advantage of the capabilities of <code>gatsby-plugin-image<\/code> to achieve the best performance with little setup and a complete toolkit. Gatsby Image plugin handles the challenging aspects of creating images in various sizes and formats.<\/p>\n<p>This article will teach us how to dynamically access local images in Gatsby applications by using the <code>GatsbyImage<\/code> component of the <code>gatsby-plugin-image<\/code> module and GraphQL. <code>GatsbyImage<\/code> differing from <code>StaticImage<\/code> (in the same gatsby-plugin-image module) is used when the image source is variable or computed.<\/p>\n<h1>Sandbox<\/h1>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/s\/using-dynamic-image-in-gatsby-plugin-image-hguxi7?file=\/src\/pages\/index.js\">Codesandbox<\/a>. To get started quickly, fork the <a href=\"https:\/\/codesandbox.io\/s\/using-dynamic-image-in-gatsby-plugin-image-hguxi7?file=\/src\/pages\/index.js\">Codesandbox<\/a> or run the project.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/using-dynamic-image-in-gatsby-plugin-image-hguxi7?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Using dynamic image in gatsby-plugin-image\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>GitHub Repository:<\/p>\n<p><a href=\"https:\/\/github.com\/Olanetsoft\/dynamic-image-with-gatsby-plugin-image\">https:\/\/github.com\/Olanetsoft\/dynamic-image-with-gatsby-plugin-image<\/a><\/p>\n<h1>Prerequisite<\/h1>\n<p>The following are required to complete this post for a better understanding:<\/p>\n<ul>\n<li>Knowledge of JavaScript and React.js<\/li>\n<li>Knowledge of Gatsby.js is not required but preferred<\/li>\n<li>Gatsby CLI should be installed globally. Learn how to install it <a href=\"https:\/\/www.gatsbyjs.com\/docs\/reference\/gatsby-cli\/\">here<\/a>\n<\/li>\n<\/ul>\n<h1>Getting Started with Gatsby<\/h1>\n<p><a href=\"https:\/\/www.gatsbyjs.com\/docs\/quick-start\/\">Gatsby<\/a> is an open-source static site generator (SSG). Gatsby uses efficient pre-configuration for rapid page loads, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.<\/p>\n<p>Gatsby uses <a href=\"https:\/\/webpack.js.org\/\">webpack<\/a>, <a href=\"https:\/\/graphql.org\/\">G<\/a><a href=\"https:\/\/graphql.org\/\">raphQL<\/a> and <a href=\"https:\/\/reactjs.org\/\">React.js<\/a> to build and render high-performance web apps. Gatsby can also be used to create progressive web apps that adhere to current web standards and are designed for speed and security.<\/p>\n<h1>Creating a new project and Installing Dependencies<\/h1>\n<p>To create a new project, use the <code>gatsby new &lt;project name&gt;<\/code> command to scaffold a new project.<\/p>\n<p>This command creates a new Gatsby project for us.<\/p>\n<p>To start our application, we run the following command.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project<\/span> <span class=\"hljs-attr\">name<\/span>&gt;<\/span>\n    npm run devevelop\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Once the app is initialized, and the dependencies are installed, we will see a message with instructions for navigating to our site and running it locally.<\/p>\n<p>Gatsby will start a hot-reloading development environment accessible by default at <a href=\"http:\/\/localhost:4000\">http:\/\/localhost:<\/a>8000<\/p>\n<h1>Building our project<\/h1>\n<p>In the previous step, we installed and started our application, and now we can use the <code>GatsbyImage<\/code> component in our Gatsby site like we would use an <code>&lt;img&gt;<\/code> element in HTML. <code>gatsby-plugin-image<\/code> ships with the default Gatsby starter we installed.<\/p>\n<p>We download sample images to our computer and save it inside <code>src\/images<\/code> in our project folder as shown below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_272D77F6899992A3AE44138A462E7C3CEA93572332F93E92293A22860C840F21_1645827540820_Screenshot+2022-02-25+at+23.17.31.png\" alt=\"Gatsby - Dynamic Image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"492\" height=\"334\"\/><\/p>\n<p>Next, to create a blank home page with a title, we update <code>pages\/index.js<\/code> file with the following code snippet:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">import<\/span> * <span class=\"hljs-keyword\">as<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { GatsbyImage, getImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby-plugin-image\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { graphql } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby\"<\/span>;\n    \n    <span class=\"hljs-comment\">\/\/ styles<\/span>\n    <span class=\"hljs-keyword\">const<\/span> pageStyles = {\n      <span class=\"hljs-attr\">display<\/span>: <span class=\"hljs-string\">\"flex\"<\/span>,\n      <span class=\"hljs-attr\">flexDirection<\/span>: <span class=\"hljs-string\">\"column\"<\/span>,\n      <span class=\"hljs-attr\">alignItems<\/span>: <span class=\"hljs-string\">\"center\"<\/span>,\n      <span class=\"hljs-attr\">justifyContent<\/span>: <span class=\"hljs-string\">\"center\"<\/span>,\n    };\n    \n    <span class=\"hljs-comment\">\/\/ title<\/span>\n    <span class=\"hljs-keyword\">const<\/span> titleStyles = {\n      <span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">\"2rem\"<\/span>,\n      <span class=\"hljs-attr\">fontWeight<\/span>: <span class=\"hljs-string\">\"bold\"<\/span>,\n      <span class=\"hljs-attr\">marginBottom<\/span>: <span class=\"hljs-string\">\"1rem\"<\/span>,\n    };\n    \n    <span class=\"hljs-comment\">\/\/ name<\/span>\n    <span class=\"hljs-keyword\">const<\/span> nameStyle = {\n      <span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">\"1.5rem\"<\/span>,\n      <span class=\"hljs-attr\">fontWeight<\/span>: <span class=\"hljs-string\">\"bold\"<\/span>,\n      <span class=\"hljs-attr\">marginBottom<\/span>: <span class=\"hljs-string\">\"1rem\"<\/span>,\n    };\n    \n    <span class=\"hljs-comment\">\/\/ markup<\/span>\n    <span class=\"hljs-keyword\">const<\/span> IndexPage = <span class=\"hljs-function\">(<span class=\"hljs-params\">props<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{pageStyles}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{titleStyles}<\/span>&gt;<\/span>Using dynamic image in gatsby-plugin-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n         \/\/...\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    };\n    \n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> IndexPage;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We should have something similar to this below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_272D77F6899992A3AE44138A462E7C3CEA93572332F93E92293A22860C840F21_1645827867418_Screenshot+2022-02-25+at+23.22.21.png\" alt=\"Gatsby - Dynamic Image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1116\"\/><\/p>\n<p>When we rebuild our application, the images we added locally are included in Gatsby\u2019s data layer and we can retrieve them using Graphql. Subsequently, we will use the <code>GatsbyImage<\/code> component to dynamically render these images.<\/p>\n<h2>Adding images to our page query<\/h2>\n<p>Using <code>sharp<\/code>, Gatsby creates a <code>childImageSharp<\/code> node in it\u2019s Graphql data layer for all local image. We will query the image data from this node and depending on our data source, the actual file node structure may differ. In the page query of <code>src\/pages\/index.js<\/code> we have:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-tag\">query<\/span> {\n        <span class=\"hljs-attribute\">photos<\/span>: <span class=\"hljs-built_in\">allFile<\/span>(\n          sort: { fields: base, order: ASC }\n          filter: { extension: { regex: <span class=\"hljs-string\">\"\/(jpeg)\/\"<\/span> } }\n        ) {\n          edges {\n            node {\n              id\n              base\n              childImageSharp {\n                <span class=\"hljs-built_in\">gatsbyImageData<\/span>(\n                  width: <span class=\"hljs-number\">600<\/span>\n                )\n                fluid {\n                  ...GatsbyImageSharpFluid_withWebp\n                }\n              }\n            }\n          }\n        }\n      }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Configuring our Images<\/h2>\n<p>By providing arguments to the <code>gatsbyImageData<\/code> resolver, we can customize the image. When lazy loading, we can additionally adjust the size, layout, and placeholder type used.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-tag\">query<\/span> {\n        <span class=\"hljs-attribute\">photos<\/span>: <span class=\"hljs-built_in\">allFile<\/span>(\n          sort: { fields: base, order: ASC }\n          filter: { extension: { regex: <span class=\"hljs-string\">\"\/(jpeg)\/\"<\/span> } }\n        ) {\n          edges {\n            node {\n              id\n              base\n              childImageSharp {\n                <span class=\"hljs-built_in\">gatsbyImageData<\/span>(\n                  placeholder: DOMINANT_COLOR\n                  height: <span class=\"hljs-number\">400<\/span>\n                  formats: AUTO\n                  width: <span class=\"hljs-number\">600<\/span>\n                )\n                fluid {\n                  ...GatsbyImageSharpFluid_withWebp\n                }\n              }\n            }\n          }\n        }\n      }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Advanced image processing techniques are also available. The API documentation contains a complete <a href=\"https:\/\/www.gatsbyjs.com\/docs\/reference\/built-in-components\/gatsby-plugin-image\">list of options<\/a>.<\/p>\n<h2>Displaying our Images<\/h2>\n<p>We will update <code>src\/pages\/index.js<\/code> with the following code snippet:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">import<\/span> * <span class=\"hljs-keyword\">as<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { GatsbyImage, getImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby-plugin-image\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { graphql } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby\"<\/span>;\n    \n    <span class=\"hljs-comment\">\/\/...<\/span>\n    \n    <span class=\"hljs-comment\">\/\/ markup<\/span>\n    <span class=\"hljs-keyword\">const<\/span> IndexPage = <span class=\"hljs-function\">(<span class=\"hljs-params\">props<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{pageStyles}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{titleStyles}<\/span>&gt;<\/span>Using dynamic image in gatsby-plugin-image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          {props.data.photos.edges.map((img) =&gt; (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{img.node.id}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">GatsbyImage<\/span>\n                <span class=\"hljs-attr\">fluid<\/span>=<span class=\"hljs-string\">{img.node.childImageSharp.fluid}<\/span>\n                <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{img.node.base.split(<\/span>\"<span class=\"hljs-attr\">-<\/span>\")<span class=\"hljs-attr\">.join<\/span>(\" \")<span class=\"hljs-attr\">.split<\/span>(\"<span class=\"hljs-attr\">.<\/span>\")&#91;<span class=\"hljs-attr\">0<\/span>]}\n                <span class=\"hljs-attr\">image<\/span>=<span class=\"hljs-string\">{getImage(img.node)}<\/span>\n              \/&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{nameStyle}<\/span>&gt;<\/span>\n                {img.node.base.charAt(0).toUpperCase() +\n                  img.node.base.substr(1).split(\"-\").join(\" \").split(\".\")&#91;0]}\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ))}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    };\n    \n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> pageQuery = graphql<span class=\"hljs-string\">`\n      query {\n        photos: allFile(\n          sort: { fields: base, order: ASC }\n          filter: { extension: { regex: \"\/(jpeg)\/\" } }\n        ) {\n          edges {\n            node {\n              id\n              base\n              childImageSharp {\n                gatsbyImageData(\n                  placeholder: DOMINANT_COLOR\n                  height: 400\n                  formats: AUTO\n                  width: 600\n                )\n                fluid {\n                  ...GatsbyImageSharpFluid_withWebp\n                }\n              }\n            }\n          }\n        }\n      }\n    `<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> IndexPage;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code snippet above,<\/p>\n<ul>\n<li>To display the image on the page, we utilize the <code>GatsbyImage<\/code> component.<\/li>\n<li>We used the getImage() function as an optional utility to make the code cleaner.<\/li>\n<li>The <code>GatsbyImage<\/code> component accepts a File provided via <code>getImage()<\/code> and outputs <code>file.childImageSharp.gatsbyImageData<\/code>.<\/li>\n<\/ul>\n<p>Testing our application we should have something similar to what is shown in the screenshot below:<\/p>\n<p><a href=\"https:\/\/www.loom.com\/share\/8ce45062f15c44ad9ae0f89d66bf0724\">https:\/\/www.loom.com\/share\/8ce45062f15c44ad9ae0f89d66bf0724<\/a><\/p>\n<h2>Customizing <code>gatsbyImageData<\/code><\/h2>\n<p>With our GatsbyImage instance, we can customize placeholders, formats, transformations, quality, height etc.<\/p>\n<p>Let us update the page query in <code>src\/pages\/index.js<\/code> to the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/...<\/span>\n    \n    <span class=\"hljs-comment\">\/\/ markup<\/span>\n    <span class=\"hljs-keyword\">const<\/span> IndexPage = <span class=\"hljs-function\">(<span class=\"hljs-params\">props<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{pageStyles}<\/span>&gt;<\/span>\n         \/\/ ...\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    };\n    \n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> pageQuery = graphql<span class=\"hljs-string\">`\n      query {\n        photos: allFile(\n          sort: { fields: base, order: ASC }\n          filter: { extension: { regex: \"\/(jpeg)\/\" } }\n        ) {\n          edges {\n            node {\n              id\n              base\n              childImageSharp {\n                gatsbyImageData(\n                  placeholder: BLURRED\n                  height: 400\n                  formats: AUTO\n                  width: 600\n                  quality: 70 # 50 by default\n                  transformOptions: { grayscale: true }\n                )\n                fluid {\n                  ...GatsbyImageSharpFluid_withWebp\n                }\n              }\n            }\n          }\n        }\n      }\n    `<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> IndexPage;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The following is an example of what our application should look like:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_272D77F6899992A3AE44138A462E7C3CEA93572332F93E92293A22860C840F21_1645831684271_Screenshot+2022-02-26+at+00.26.29.png\" alt=\"Gatsby - Dynamic Image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1117\"\/><\/p>\n<p><a href=\"https:\/\/www.loom.com\/share\/b1967767a22e4189bf5288b644dcca35\">https:\/\/www.loom.com\/share\/b1967767a22e4189bf5288b644dcca35<\/a><\/p>\n<h1>Conclusion<\/h1>\n<p>In this article, we learned how to use the <code>GatsbyImage<\/code> component of the <code>gatsby-plugin-image<\/code> module. We also learned how to apply optimizations and transformations to the rendered image.<\/p>\n<h1>Resources<\/h1>\n<ul>\n<li>\n<a href=\"https:\/\/www.gatsbyjs.com\/docs\/reference\/built-in-components\/gatsby-plugin-image\/#transformoptions\">Dynamic<\/a> <code>[GatsbyImage](https:\/\/www.gatsbyjs.com\/docs\/reference\/built-in-components\/gatsby-plugin-image\/#transformoptions)<\/code> <a href=\"https:\/\/www.gatsbyjs.com\/docs\/reference\/built-in-components\/gatsby-plugin-image\/#transformoptions\">API Docs<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/gatsbyjs.com\/\">Gatsby.js<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28107,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[378,134,370,246,371,373],"class_list":["post-28106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-gatsbyjs","tag-guest-post","tag-image","tag-react","tag-under-review","tag-upload"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Using dynamic image in gatsby-plugin-image<\/title>\n<meta name=\"description\" content=\"In this article, we learned how to use the `GatsbyImage` component of the `gatsby-plugin-image` module. We also learned how to apply optimizations and transformations to the rendered image.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using dynamic image in gatsby-plugin-image\" \/>\n<meta property=\"og:description\" content=\"In this article, we learned how to use the `GatsbyImage` component of the `gatsby-plugin-image` module. We also learned how to apply optimizations and transformations to the rendered image.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T20:42:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-23T00:09:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"7748\" \/>\n\t<meta property=\"og:image:height\" content=\"4356\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Using dynamic image in gatsby-plugin-image\",\"datePublished\":\"2022-03-24T20:42:50+00:00\",\"dateModified\":\"2025-02-23T00:09:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA\",\"keywords\":[\"GatsbyJS\",\"Guest Post\",\"Image\",\"React\",\"Under Review\",\"Upload\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/\",\"name\":\"Using dynamic image in gatsby-plugin-image\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA\",\"datePublished\":\"2022-03-24T20:42:50+00:00\",\"dateModified\":\"2025-02-23T00:09:55+00:00\",\"description\":\"In this article, we learned how to use the `GatsbyImage` component of the `gatsby-plugin-image` module. We also learned how to apply optimizations and transformations to the rendered image.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA\",\"width\":7748,\"height\":4356},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using dynamic image in gatsby-plugin-image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using dynamic image in gatsby-plugin-image","description":"In this article, we learned how to use the `GatsbyImage` component of the `gatsby-plugin-image` module. We also learned how to apply optimizations and transformations to the rendered image.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/","og_locale":"en_US","og_type":"article","og_title":"Using dynamic image in gatsby-plugin-image","og_description":"In this article, we learned how to use the `GatsbyImage` component of the `gatsby-plugin-image` module. We also learned how to apply optimizations and transformations to the rendered image.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T20:42:50+00:00","article_modified_time":"2025-02-23T00:09:55+00:00","og_image":[{"width":7748,"height":4356,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/"},"author":{"name":"","@id":""},"headline":"Using dynamic image in gatsby-plugin-image","datePublished":"2022-03-24T20:42:50+00:00","dateModified":"2025-02-23T00:09:55+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA","keywords":["GatsbyJS","Guest Post","Image","React","Under Review","Upload"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/","name":"Using dynamic image in gatsby-plugin-image","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA","datePublished":"2022-03-24T20:42:50+00:00","dateModified":"2025-02-23T00:09:55+00:00","description":"In this article, we learned how to use the `GatsbyImage` component of the `gatsby-plugin-image` module. We also learned how to apply optimizations and transformations to the rendered image.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA","width":7748,"height":4356},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-dynamic-image-in-gatsby-plugin-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using dynamic image in gatsby-plugin-image"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925375\/Web_Assets\/blog\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3\/4db59e7e839a1b107ad40b99a3f807964c677cdc-7748x4356-1_28107fd4e3.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28106"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28106\/revisions"}],"predecessor-version":[{"id":36971,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28106\/revisions\/36971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28107"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}