{"id":27825,"date":"2022-04-06T02:25:51","date_gmt":"2022-04-06T02:25:51","guid":{"rendered":"http:\/\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs"},"modified":"2022-04-06T02:25:51","modified_gmt":"2022-04-06T02:25:51","slug":"optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/","title":{"rendered":"Optimize with Netlify-plugin-cloudinary in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Images are an essential part of websites and web applications. As the web becomes more visual, developers and engineers constantly build tools and applications to reduce page load time and improve the overall user experience.<\/p>\n<p>This post will discuss optimizing and delivering image assets with <a href=\"https:\/\/github.com\/colbyfayock\/netlify-plugin-cloudinary\/\">Netlify-plugin-cloudinary<\/a> in a <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> application. In a nutshell, this plugin automatically optimizes and serves your website images during deployment, using Cloudinary.<\/p>\n<p>At the end of this tutorial, we will learn how to build an image gallery using Next.js, host the source code on Github, deploy it to Netlify, and automatically serve optimized images using Cloudinary.<\/p>\n<h2>Sandbox<\/h2>\n<p>We completed this project in <a href=\"https:\/\/codesandbox.io\/s\/admiring-lamport-98yjw1\">a CodeSan<\/a><a href=\"https:\/\/codesandbox.io\/s\/admiring-lamport-98yjw1\">d<\/a><a href=\"https:\/\/codesandbox.io\/s\/admiring-lamport-98yjw1\">box<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/admiring-lamport-98yjw1?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=\"Optimize and deliver image assets using netlify-plugin-cloudinary\"\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 link <a href=\"https:\/\/github.com\/Mr-Malomz\/next_opt_image\">here<\/a>.<\/p>\n<p>View deployed version on Netlify <a href=\"https:\/\/loving-curran-84bd88.netlify.app\/\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To fully grasp the concepts presented in this tutorial, a good knowledge of JavaScript and React.js is required. Experience with Next.js isn\u2019t a requirement, but it\u2019s nice to have.<\/p>\n<p>We also need the following:<\/p>\n<ul>\n<li>A <a href=\"https:\/\/cloudinary.com\/\">Cloudinary account<\/a> for image optimization. <a href=\"https:\/\/cloudinary.com\/users\/register\/free\"><strong>Signup<\/strong><\/a> <strong>is completely free<\/strong>.<\/li>\n<li>A <a href=\"https:\/\/github.com\">Github account<\/a> for saving source code. <a href=\"https:\/\/github.com\/signup?ref_cta=Sign+up&amp;ref_loc=header+logged+out&amp;ref_page=%2F&amp;source=header-home\"><strong>Signup<\/strong><\/a> <strong>is completely free<\/strong>.<\/li>\n<li>A <a href=\"https:\/\/www.netlify.com\">Netlify account<\/a> for deploying and hosting web applications. <a href=\"https:\/\/app.netlify.com\/signup?_ga=2.194596141.1083651187.1647633137-873794739.1647633137\"><strong>Signup<\/strong><\/a> <strong>is completely free<\/strong>.<\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<p>We need to create a Next.js starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n<pre><code>npx create-next-app next_opt_image &amp;&amp; cd next_opt_image\n<\/code><\/pre>\n<p>The command creates a Next.js project called <code>next_opt_image<\/code>, and navigates to the project directory.<\/p>\n<h2>Creating an image gallery with Next.js<\/h2>\n<p>To create an image gallery, we need to navigate to the URL below and download sample images from Unsplash:<\/p>\n<ul>\n<li>Mustang &#8211; <a href=\"https:\/\/unsplash.com\/photos\/YApiWyp0lqo\">https:\/\/unsplash.com\/photos\/YApiWyp0lqo<\/a>\n<\/li>\n<li>Ferrari &#8211; <a href=\"https:\/\/unsplash.com\/photos\/eqW1MPinEV4\">https:\/\/unsplash.com\/photos\/eqW1MPinEV4<\/a>\n<\/li>\n<li>BMW &#8211; <a href=\"https:\/\/unsplash.com\/photos\/p7tai9P7H-s\">https:\/\/unsplash.com\/photos\/p7tai9P7H-s<\/a>\n<\/li>\n<li>Mercedes &#8211; <a href=\"https:\/\/unsplash.com\/photos\/8qYE6LGHW-c\">https:\/\/unsplash.com\/photos\/8qYE6LGHW-c<\/a>\n<\/li>\n<\/ul>\n<p>With that done, we need to navigate to the <code>public<\/code> folder, and in this folder, create an <code>images<\/code> folder, copy and paste all the downloaded images.<\/p>\n<p>Next, we need to create a <code>utils<\/code> folder in the project root directory. In this folder, we create an  <code>images.json<\/code> file. The file contains image data for the gallery.<\/p>\n<p><strong>images.json<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">\n&#91;\n        {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">1<\/span>,\n            <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Mustang\"<\/span>,\n            <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"\/images\/mustang.jpg\"<\/span>\n        },\n        {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">2<\/span>,\n            <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Ferrari\"<\/span>,\n            <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"\/images\/ferrari.jpg\"<\/span>\n        },\n        {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">3<\/span>,\n            <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"BMW\"<\/span>,\n            <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"\/images\/bmw.jpg\"<\/span>\n        },\n        {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">4<\/span>,\n            <span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"Mercedes\"<\/span>,\n            <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"\/images\/mercedes.jpg\"<\/span>\n        }\n]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>With that done, we can leverage Next.js <a href=\"https:\/\/github.com\/css-modules\/css-modules\">CSS Module<\/a> support to style our page by replacing the content in <code>Home.module.css<\/code> in the <code>styles<\/code> folder with the code snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.container<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.main<\/span> {\n  <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">4rem<\/span> <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n}\n\n<span class=\"hljs-selector-class\">.title<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.15<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">4rem<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.title<\/span>,\n<span class=\"hljs-selector-class\">.description<\/span> {\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n}\n\n<span class=\"hljs-selector-class\">.grid<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">flex-wrap<\/span>: wrap;\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">800px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.card<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1.5rem<\/span>;\n  <span class=\"hljs-attribute\">text-align<\/span>: left;\n  <span class=\"hljs-attribute\">color<\/span>: inherit;\n  <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#eaeaea<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n  <span class=\"hljs-attribute\">transition<\/span>: color <span class=\"hljs-number\">0.15s<\/span> ease, border-color <span class=\"hljs-number\">0.15s<\/span> ease;\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">300px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.card<\/span> <span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.card<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n}\n\n\n<span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">600px<\/span>) {\n  <span class=\"hljs-selector-class\">.grid<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n    <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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>Next, we modify the <code>index.js<\/code> file in the <code>pages<\/code> folder to the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" 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> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next\/head'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/styles\/Home.module.css'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> images <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/utils\/images.json'<\/span>; <span class=\"hljs-comment\">\/\/add this<\/span>\n    \n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/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\">className<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Next Cloudinary Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">'description'<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">'Next Cloudinary Image'<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">'icon'<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">'\/favicon.ico'<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.main}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.title}<\/span>&gt;<\/span>Optimized Image Gallery<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.grid}<\/span>&gt;<\/span>\n              {images.map((image) =&gt; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{image.id}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.card}<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{image.url}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{image.name}<\/span> \/&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{image.name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/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>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\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\">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 snippet above does the following:<\/p>\n<ul>\n<li>Imports the image collection.<\/li>\n<li>Markup shows the list of images by looping through the image collection.<\/li>\n<\/ul>\n<p>With that done, we can start a development server using the command below:<\/p>\n<pre><code>npm run dev\n<\/code><\/pre>\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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647637504530_screencapture-localhost-3000-2022-03-18-22_03_04.png\" alt=\"running project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1033\"\/><\/p>\n<h2>Pushing our source code to Github<\/h2>\n<p>We want to push our source code to GitHub to facilitate a speedy \u201cdeploy from GitHub\u201d workflow on Netlify.\nTo get started, we need to log into our <a href=\"https:\/\/github.com\/login\">Github<\/a> dashboard. Click on the <strong>plus<\/strong> icon and select <strong>New Repository<\/strong>.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647982747555_Screenshot+2022-03-18+at+22.40.43.png\" alt=\"select new repository\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"950\"\/><\/p>\n<p>Input <code>next_opt_image<\/code> as the <strong>Repository name<\/strong> and click on <strong>Create repository<\/strong>.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647642958212_screencapture-github-new-2022-03-18-22_41_49.png\" alt=\"Create repository\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1382\"\/><\/p>\n<p>Next, run the command below to add and save recent changes<\/p>\n<pre><code>git add .\ngit commit -m &quot;add image gallery&quot;\n<\/code><\/pre>\n<p>Copy and run the highlighted commands on the terminal:<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647644020299_screencapture-github-Mr-Malomz-next-opt-image-2022-03-18-23_38_26.png\" alt=\"push and commit\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1476\"\/><\/p>\n<p>We can refresh the browser to see updated changes to our repository.<\/p>\n<h2>Deploying to Netlify<\/h2>\n<p>To get started, we need to log into our <a href=\"https:\/\/app.netlify.com\/\">Netlify<\/a> dashboard. Click on <strong>Add new site<\/strong> dropdown and select  <strong>Import an existing project<\/strong>.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647645928968_Screenshot+2022-03-19+at+00.18.41+1.png\" alt=\"Create site\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"950\"\/><\/p>\n<p>Select <strong>Github<\/strong> as the Git provider and authorize Netlify.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647646116402_Screenshot+2022-03-19+at+00.27.32.png\" alt=\"select Github\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"950\"\/><\/p>\n<p>Search for <code>next_opt_image<\/code> and select the repository.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647646409308_Screenshot+2022-03-19+at+00.31.13.png\" alt=\"select repository\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"950\"\/><\/p>\n<p>Click on <strong>Deploy Site<\/strong> to start deployment. It might take a few minutes.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647646468808_screencapture-app-netlify-start-repos-Mr-Malomz-next-opt-image-2022-03-19-00_32_06.png\" alt=\"deploy site\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"2108\"\/><\/p>\n<p>We can view the deployed site by clicking on the generated URL.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647646831780_Screenshot+2022-03-19+at+00.37.09+1.png\" alt=\"Deployed url\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"950\"\/><\/p>\n<h2>Optimizing and delivering images with Netlify-plugin-cloudinary<\/h2>\n<p>Before optimizing the images in our application, let\u2019s open the developer tools, navigate to the <strong>Network<\/strong> tab, and refresh the page to see how the images are currently being served and their sizes.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647653409436_Screenshot+2022-03-19+at+02.28.24.png\" alt=\"Images and size highlighted\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"944\"\/><\/p>\n<p>We can also click on any image to see the image URL and the provider serving it.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647984083021_Screenshot+2022-03-22+at+21.38.54.png\" alt=\"image url\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"944\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647984083078_Screenshot+2022-03-22+at+21.39.02.png\" alt=\"served by netlify\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"944\"\/><\/p>\n<p><strong>Netlify-plugin-cloudinary<\/strong><\/p>\n<p>The <code>Netlify-plugin-cloudinary<\/code> is a plugin that hooks into Netlify when deploying websites and applications to serve smaller images in modern formats automatically. We don\u2019t have to upload the images manually, get the URL, and embed them into our codebase with the plugin.<\/p>\n<p>To improve the performance of our image gallery, we will be integrating the plugin into our deployment process.<\/p>\n<p>To begin, we proceed to install the <a href=\"https:\/\/github.com\/colbyfayock\/netlify-plugin-cloudinary\">netlify-plugin-cloudinary<\/a> dependency with:<\/p>\n<pre><code>npm install netlify-plugin-cloudinary\n<\/code><\/pre>\n<p>Next, we need to create a <code>netlify.toml<\/code> file in the project root directory and add the code snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">&#91;&#91;plugins]]\n   package = <span class=\"hljs-string\">\"netlify-plugin-cloudinary\"<\/span>\n    \n   &#91;plugins.inputs]\n   cloudName = <span class=\"hljs-string\">\"&lt;Your Cloud Name&gt;\"<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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 snippet above does the following:<\/p>\n<ul>\n<li>Defines <code>netlify-plugin-cloudinary<\/code> as the required plugin.<\/li>\n<li>Sets the plugin input to our <code>cloudName<\/code>. The <code>cloudName<\/code> helps Cloudinary know the account to which the images should be attached.<\/li>\n<\/ul>\n<p>Finally, we need to commit our changes and push them to the repository by running the command below in the terminal:<\/p>\n<pre><code>git add .\ngit commit -m &quot;add support for optimization&quot;\ngit push origin main\n<\/code><\/pre>\n<p>On doing this, Netlify will redeploy the latest changes.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647652083756_Screenshot+2022-03-19+at+02.07.19.png\" alt=\"redeploying\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"944\"\/><\/p>\n<p>We can inspect the deployed version to see image format, size, and how the images are being served.<\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647984986021_Screenshot+2022-03-22+at+21.42.40.png\" alt=\"Optimized image size and format\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1042\"\/><\/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_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647985104274_Screenshot+2022-03-22+at+21.29.00.png\" alt=\"image url\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"944\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_8D31A8FC979E5F8A04C65B533C8604145C4DC40C7A1F1BAA5C7B6711437D62F0_1647985104353_Screenshot+2022-03-22+at+21.29.13.png\" alt=\"served by Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"944\"\/><\/p>\n<h1>Conclusion<\/h1>\n<p>This post discussed how to automatically optimize and deliver image assets with <a href=\"https:\/\/github.com\/colbyfayock\/netlify-plugin-cloudinary\/\">Netlify-plugin-cloudinary<\/a> in a <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> application.<\/p>\n<p>These resources might be helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/github.com\/colbyfayock\/netlify-plugin-cloudinary\/\">Netlify-plugin-cloudinary<\/a>.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/fetch_remote_images\">Cloudinary support for remote image fetching<\/a>.<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27826,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[384,134,370,385,212,388,371],"class_list":["post-27825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-delivery","tag-guest-post","tag-image","tag-netlify","tag-next-js","tag-optimize","tag-under-review"],"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>Optimize with Netlify-plugin-cloudinary in Next.js<\/title>\n<meta name=\"description\" content=\"This post will discuss optimizing and delivering image assets with Netlify-plugin-cloudinary in a Next.js application.\" \/>\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\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize with Netlify-plugin-cloudinary in Next.js\" \/>\n<meta property=\"og:description\" content=\"This post will discuss optimizing and delivering image assets with Netlify-plugin-cloudinary in a Next.js application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:25:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2024\" \/>\n\t<meta property=\"og:image:height\" content=\"1012\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Optimize with Netlify-plugin-cloudinary in Next.js\",\"datePublished\":\"2022-04-06T02:25:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA\",\"keywords\":[\"Delivery\",\"Guest Post\",\"Image\",\"Netlify\",\"Next.js\",\"Optimize\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/\",\"name\":\"Optimize with Netlify-plugin-cloudinary in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA\",\"datePublished\":\"2022-04-06T02:25:51+00:00\",\"description\":\"This post will discuss optimizing and delivering image assets with Netlify-plugin-cloudinary in a Next.js application.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA\",\"width\":2024,\"height\":1012},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimize with Netlify-plugin-cloudinary in Next.js\"}]},{\"@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":"Optimize with Netlify-plugin-cloudinary in Next.js","description":"This post will discuss optimizing and delivering image assets with Netlify-plugin-cloudinary in a Next.js application.","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\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Optimize with Netlify-plugin-cloudinary in Next.js","og_description":"This post will discuss optimizing and delivering image assets with Netlify-plugin-cloudinary in a Next.js application.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:25:51+00:00","og_image":[{"width":2024,"height":1012,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Optimize with Netlify-plugin-cloudinary in Next.js","datePublished":"2022-04-06T02:25:51+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA","keywords":["Delivery","Guest Post","Image","Netlify","Next.js","Optimize","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/","name":"Optimize with Netlify-plugin-cloudinary in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA","datePublished":"2022-04-06T02:25:51+00:00","description":"This post will discuss optimizing and delivering image assets with Netlify-plugin-cloudinary in a Next.js application.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA","width":2024,"height":1012},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-image-assets-with-netlify-plugin-cloudinary-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimize with Netlify-plugin-cloudinary in Next.js"}]},{"@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\/v1681926161\/Web_Assets\/blog\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b\/06557b09f6dccf4e711c6533b15b0522f301e655-2024x1012-1_27826d7e8b.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27825","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=27825"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27825\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27826"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}