{"id":27842,"date":"2022-04-06T02:19:39","date_gmt":"2022-04-06T02:19:39","guid":{"rendered":"http:\/\/implementing-images-using-next.js-image-component"},"modified":"2025-02-25T15:51:23","modified_gmt":"2025-02-25T23:51:23","slug":"implementing-images-using-next-js-image-component","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/","title":{"rendered":"Implementing images using Next.js Image Component"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Responsive images are essential in the modern-day as this improves the appearance of websites on devices with both large and small displays. They are vital because they enable us to serve the right image for the correct screen size, improve user experience, and reduce loading time.<\/p>\n<p>This article utilizes the <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/image-optimization\">Next.js<\/a> Image component to serve responsive images. It comes with multiple built-in performance features to deliver optimal web vitals.<\/p>\n<h3>CodeSandbox and Github<\/h3>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/suspicious-thompson-og51wm?file=\/pages\/index.js\">CodeSandbox<\/a>, and you can fork it to get started quickly.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/suspicious-thompson-og51wm?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=\"Implementing responsive images with Next-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>You can also find the source code on <a href=\"https:\/\/github.com\/ugwutotheeshoes\/responsive-image-app\">Github<\/a>.<\/p>\n<h3>Prerequisites<\/h3>\n<p>To follow the steps in this article, you should have:<\/p>\n<ul>\n<li>Basic knowledge of CSS, <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\">JavaScript<\/a>, and <a href=\"https:\/\/reactjs.org\/\">React.js<\/a>.<\/li>\n<li>Installed the most recent version of <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>.<\/li>\n<li>Terminal such as Git bash(Windows) or ITerm2(MacOS).<\/li>\n<\/ul>\n<h3>Installing the project dependencies<\/h3>\n<p>We create a Next.js app in a new folder called <code>responsive-image-app<\/code> by running the following command in our terminal:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    npx create-next-app responsive-image-app\n<\/code><\/pre>\n<p>Next, we\u2019ll navigate into the project directory.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    cd responsive-image-app\n<\/code><\/pre>\n<p>Running <code>npm run dev<\/code> starts the project on the local development server at <code>localhost:3000<\/code> in our browser.<\/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_sanity\/6cd06216e5d1fe2bf377ab23275dc3063b33bc2d-1802x1260.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1802\" height=\"1260\"\/><\/p>\n<h3>What is Next.js Image Component?<\/h3>\n<p>The Next.js Image component, <a href=\"https:\/\/nextjs.org\/docs\/api-reference\/next\/image\"><code>next\/image<\/code><\/a>,  extends the HTML img element. It comes with several built-in performance enhancements to assist us in achieving good Core Web Vitals. These scores are a crucial indicator of our website\u2019s user experience, and they are taken into account by Google when determining search rankings.<\/p>\n<p>Some of the optimizations built into the Image component include:<\/p>\n<ul>\n<li>Improved Performance: Always deliver images of the correct size for each device, using updated image formats.<\/li>\n<li>Visual Stability: Prevent an unexpected shift layout as the page loads automatically<\/li>\n<li>Faster Page Loads: The images load when they enter the viewport,  with blur-up placeholders as an option.<\/li>\n<li>Asset Flexibility: Resize photos stored on remote servers on the fly<\/li>\n<\/ul>\n<h3>How to use Next.js Image Component<\/h3>\n<p>To use the Next.js Image Component, import it at the top of the home page on <code>pages\/index.js<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    import Image from 'next\/image'\n<\/code><\/pre>\n<p>Then, we\u2019ll render any two random local images from our computer. The local image files titled <code>sunset.jpg<\/code> and <code>snow.jpg<\/code> are in the project\u2019s <code>public<\/code> directory.\nSeveral attributes are similar between using the Next.js Image Component and using the img tag in HTML. There are a few required attributes:<\/p>\n<ul>\n<li>\n<code>src<\/code>: This is the path to the image.<\/li>\n<li>\n<code>alt<\/code>: This specifies the alternate text for an image.<\/li>\n<li>\n<code>width<\/code>: This specifies the width of the image in pixels.<\/li>\n<li>\n<code>height<\/code>: This specifies the height of the image in pixels.<\/li>\n<\/ul>\n<p>Let\u2019s replace the existing content of the home page with:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;div className={styles.container}&gt;\n        &lt;h1 className={styles.title}&gt;\n          Responsive images using Next JS Image Component\n        &lt;\/h1&gt;\n         \n        &lt;div className={styles.imagecontainer}&gt;\n            &lt;Image src=&quot;\/sunset.jpg&quot; alt=&quot;Sunset&quot; width={650} height={380} \/&gt;\n            &lt;Image src=&quot;\/snow.jpg&quot; alt=&quot;Sunset&quot; width={650} height={380} \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n<h3>Making our Next.js images responsive<\/h3>\n<p>One of the Image Component\u2019s vital props is the <a href=\"https:\/\/nextjs.org\/docs\/api-reference\/next\/image#layout\">layout <\/a>prop. A viewport is the user\u2019s visible area of a web page. We can tell Next.js how to display the images as the viewport changes in size. The layout prop has four options which are:<\/p>\n<ul>\n<li>\n<code>fixed<\/code>: The image is not scalable. The image\u2019s width and height are specified regardless of the device\u2019s size displayed.<\/li>\n<li>\n<code>intrinsic<\/code>: The image scales down to fit the container\u2019s width on smaller viewports. The image does not scale up beyond its actual size on a larger viewport. The container width is set to 100%.<\/li>\n<li>\n<code>responsive<\/code>: On different viewports, the image is scaled down or up depending on the container\u2019s width while retaining the aspect ratio.<\/li>\n<li>\n<code>fill<\/code>: Stretches the image\u2019s width and height to fill the parent container.<\/li>\n<\/ul>\n<p>We\u2019ll set the layout prop to responsive and add it to the Image Component:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;div className={styles.imagecontainer}&gt;\n      &lt;Image src=&quot;\/sunset.jpg&quot; alt=&quot;Sunset&quot; width={650} height={380} layout=&quot;responsive&quot;\/&gt;\n      &lt;Image src=&quot;\/snow.jpg&quot; alt=&quot;Sunset&quot; width={650} height={380} layout=&quot;responsive&quot;\/&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n<p>For a better experience, let\u2019s display the images in a grid layout by styling the images container.\nThe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">CSS Grid Layout<\/a> offers a grid-based system with rows and columns, making it easier to design web pages without having to use floats and positioning.\nIn the CSS file \u2014  <code>style\/Home.module.css<\/code>, we\u2019ll add the code snippet below.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    .imagecontainer {\n      display: grid;\n      grid-template-columns: 2fr 2fr;\n      column-gap: 2rem;\n    }\n<\/code><\/pre>\n<p>Using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid-template-columns\"><code>grid-template-columns<\/code><\/a>, the images are aligned side by side as columns with a spacing of 2rem. The Next.js app will look like this after making it responsive:<\/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_sanity\/c6469d961c5a52b5082f789d1f64e3c4e7190084-1358x654.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1358\" height=\"654\"\/><\/p>\n<p>Looking at the source page for our project, Next.js dynamically sets the <code>srcset<\/code> attribute to load different images at different sizes depending on the viewport size. Ideally, we would like to serve images adjusted to fit the user\u2019s viewport dimensions.\nWithout a way to achieve this, we\u2019ll have to supply a larger image than is required. That means the browser will be able to load different image sizes depending on the size of the browser or screen size. So, if a visitor is using a small device, they won\u2019t have to load the same large images as a desktop.<\/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_sanity\/4a47b0e452b10d661e56d0b34381de3e4ab38675-1346x532.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1346\" height=\"532\"\/><\/p>\n<p>We\u2019ll also style the image container to stack our images on one another when it is displayed on a smaller screen.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    @media (max-width: 425px) {\n      .imagecontainer {\n        display: grid;\n        grid-template-columns: 2fr;\n        row-gap: 2rem;\n      }\n    }\n<\/code><\/pre>\n<p>For example, the screen size for mobile devices (320px \u2014 480px) will look like this:<\/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_sanity\/98637bf479d5e7dce3b06fea0ad8e8ad9153e22d-384x576.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"384\" height=\"576\"\/><\/p>\n<h3>Conclusion<\/h3>\n<p>The goal is to eliminate the need for excessive resizing, scrolling, zooming, or panning of images that arise on sites that are not mobile-friendly. With the Next.js Image component, images are responsive across as many devices.<\/p>\n<h3>Resources<\/h3>\n<p>You may find these resources helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/nextjs.org\/docs\/getting-started\">Next.js Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">CSS Grid<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27843,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[75,134,370,212,246,371],"class_list":["post-27842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-guest-post","tag-image","tag-next-js","tag-react","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>Implementing images using Next.js Image Component<\/title>\n<meta name=\"description\" content=\"This is an article about using the Next.js next\/image component to produce responsive images.\" \/>\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\/implementing-images-using-next-js-image-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implementing images using Next.js Image Component\" \/>\n<meta property=\"og:description\" content=\"This is an article about using the Next.js next\/image component to produce responsive images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:19:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-25T23:51:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Implementing images using Next.js Image Component\",\"datePublished\":\"2022-04-06T02:19:39+00:00\",\"dateModified\":\"2025-02-25T23:51:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA\",\"keywords\":[\"CSS\",\"Guest Post\",\"Image\",\"Next.js\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/\",\"name\":\"Implementing images using Next.js Image Component\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA\",\"datePublished\":\"2022-04-06T02:19:39+00:00\",\"dateModified\":\"2025-02-25T23:51:23+00:00\",\"description\":\"This is an article about using the Next.js next\/image component to produce responsive images.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA\",\"width\":4896,\"height\":3264},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implementing images using Next.js Image Component\"}]},{\"@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":"Implementing images using Next.js Image Component","description":"This is an article about using the Next.js next\/image component to produce responsive images.","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\/implementing-images-using-next-js-image-component\/","og_locale":"en_US","og_type":"article","og_title":"Implementing images using Next.js Image Component","og_description":"This is an article about using the Next.js next\/image component to produce responsive images.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:19:39+00:00","article_modified_time":"2025-02-25T23:51:23+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/"},"author":{"name":"","@id":""},"headline":"Implementing images using Next.js Image Component","datePublished":"2022-04-06T02:19:39+00:00","dateModified":"2025-02-25T23:51:23+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA","keywords":["CSS","Guest Post","Image","Next.js","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/","name":"Implementing images using Next.js Image Component","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA","datePublished":"2022-04-06T02:19:39+00:00","dateModified":"2025-02-25T23:51:23+00:00","description":"This is an article about using the Next.js next\/image component to produce responsive images.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA","width":4896,"height":3264},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implementing-images-using-next-js-image-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implementing images using Next.js Image Component"}]},{"@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\/v1681926126\/Web_Assets\/blog\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062\/56ad71e833bac18743574bc36c56b0760a8a9acf-4896x3264-1_2784331062.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27842","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=27842"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27842\/revisions"}],"predecessor-version":[{"id":37023,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27842\/revisions\/37023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27843"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}