{"id":28261,"date":"2021-04-07T20:22:42","date_gmt":"2021-04-07T20:22:42","guid":{"rendered":"http:\/\/Using-Cloud-Providers-with-nextimage"},"modified":"2025-02-24T15:34:21","modified_gmt":"2025-02-24T23:34:21","slug":"using-cloud-providers-with-nextimage","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/","title":{"rendered":"Options For Next.js Image Providers"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h2>Page Load Times Matter<\/h2>\n<p>As developers, we can all agree that page speed is important. The less time that your pages take to load, the more opportunities you have to get users to your page. Pinterest an American image sharing, and social media service designed to enable saving and discovery of information on the internet, <a href=\"https:\/\/medium.com\/pinterest-engineering\/driving-user-growth-with-performance-improvements-cfc50dafadd7\">drove user growth with performance improvements<\/a>. To increase their load times, Pinterest looked at items \u201cabove the fold\u201d, and only loaded those items to improve page speed performance. After doing this, they were able to speed up the main page by 40 percent. This led to a 15 percent increase in SEO, and a 15 percent increase in conversion to signup.<\/p>\n<p>When considering most web page\u2019s asset breakdowns, there are 4 major considerations: HTML, JavaScript, CSS and Images.<\/p>\n<ul>\n<li>\n<p>HTML: According to Web Almanac, HTML is typically the smallest resource that allows you to focus on the other three asset types.<\/p>\n<\/li>\n<li>\n<p>JS\/CSS: We will put hard limits on both of these items so that neither exceeds 5MB. If it does, we would start thinking of more ways to reduce this by lazy loading content, breaking that code up into chunks, or tree shaking comoponents.<\/p>\n<\/li>\n<li>\n<p>Images: So, that huge Javascript payload you were worried about, that might be 2MB, is dwarfed by the first image that was loaded becuase it is 5MB. Since images comprise almost 75% of the total page weight, this is where we need to focus more of our time, especially if your images are above the fold.<\/p>\n<\/li>\n<\/ul>\n<h2>Image Optimization<\/h2>\n<p>Now that we know how important page load times is to our application, we can start to look at more modern approaches to loading images on the web. You would never want to load a 10MB image that someone took on there amazing new iPhone. You also wouldn\u2019t want to load 12 versions of a given image just so that someone can pick the correct type.<\/p>\n<ul>\n<li>\n<p>Reduce size: You can do this on upload of your images take a 15,360 x 8,640 pixel image down to something more reasonable like 1,920 x 1,080 pixels to start.<\/p>\n<\/li>\n<li>\n<p>Optimize: Ideally, you would generate several different sizes, and depending on either the device that is loading them, such as a mobile phone. Or, you can load each image based on the dimensions of the browser width that is being used.<\/p>\n<\/li>\n<li>\n<p>Compression: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#avif\">AV1 Image File Format (AVIF)<\/a> or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Media\/Formats\/Image_types#webp\">WebP<\/a>. These modern compressions can reduce image sizes between 25 to 50 percent without losing the amount of detail that is required on small devices, such as mobile phones. The great part about using something like AVIF or WebP is that you can also get lossless compression while still reducing size.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>Please note that Next.js Image by default uses Sharp for image optimization<\/p>\n<\/blockquote>\n<h2>Image Management<\/h2>\n<p>In order to apply the image optimizations from above, it can be a pretty daunting task. You would first need to decide on all of the different sizes that you want to create when you upload and image. Then you would also have to decide what image formats you will support. After deciding all of those things, you would write several server functions, and create storage locations backed by Content Delivery Networks.<\/p>\n<p>Luckily, we live in the amazing time of Jamstack (JavaScript and Mark Up). We can use services like <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a>, <a href=\"https:\/\/www.imgix.com\/\">Imgix<\/a>, or <a href=\"https:\/\/www.akamai.com\/\">Akamai<\/a> to take care of all of this labor intensive work. That way, you don\u2019t have to worry about losing any of your photos, and they will take care of all of those important transformations for you. This is often as simple as applying <code>q_auto<\/code> as part of the url string so that a service like Cloudinary can apply the best image compression. You can also pass <code>w_100<\/code> to apply a width when you only want to load a thumbnail sized image.<\/p>\n<h2>Next.js next\/image<\/h2>\n<p>Now that you have a place to store and manipulate for your images, it is time to make using those services easier. This is where tools like <a href=\"https:\/\/nextjs.org\/docs\/api-reference\/next\/image\">next\/image<\/a> make a tremendous impact for Developer Experience (DX). The <code>Image<\/code> component provided by <code>next\/image<\/code> is a wrapper for the HTML <code>&lt;img&gt;<\/code> element.<\/p>\n<p>A typical <code>&lt;img srcset<\/code> looks like the below. You can see that it specifies that up until a max width of 600px, it will use an image of 480px. But if its larger than that, it will use an image that is 800px. This allows us to use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images#resolution_switching_different_sizes\">resolution switching<\/a> for different sizes.<\/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\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"elva-fairy-480w.jpg 480w,\n             elva-fairy-800w.jpg 800w\"<\/span><span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"(max-width: 600px) 480px,\n            800px\"<\/span><span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"elva-fairy-800w.jpg\"<\/span><span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Elva dressed as a fairy\"<\/span>&gt;<\/span>\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>This can quickly get very complicated for a developer to remember exactly how this specification works, and all of the different breakpoints that you might want to maintain. Below is an example of a production version of images on <a href=\"https:\/\/codingcat.dev\">https:\/\/codingcat.dev<\/a>.<\/p>\n<iframe src=\"https:\/\/codesandbox.io\/embed\/media-jam-image-example-73wif?fontsize=14&#038;hidenavigation=1&#038;theme=dark\"\n     style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n     title=\"media-jam-image-example\"\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<p>That is a lot of code to remember and get correct. If any of those different links are off by one letter, it will fail to load that image on any given size. This means that you must also test all of the different sizes to check, and make sure your images are working correctly.<\/p>\n<p>This is where <code>next\/image<\/code> shines as it simplifies this process, and makes it a lot easier to remember a simple syntax like below.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span>\n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/ccd-cloudinary\/nepnvay0yphf0dgg8ci6.png\"<\/span>\n  <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"amplify image\"<\/span>\n  <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"480\"<\/span>\n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"270\"<\/span>\n  <span class=\"hljs-attr\">layout<\/span>=<span class=\"hljs-string\">\"responsive\"<\/span>\n\/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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<h2>Domain configuration for next\/image<\/h2>\n<p>Typically, you would need to provide a <code>next\/image<\/code> loader function in order to provide the correct url as seen in the example below.<\/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\">const<\/span> myLoader = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ src, width, quality }<\/span>) =&gt;<\/span> {\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">`https:\/\/example.com\/<span class=\"hljs-subst\">${src}<\/span>?w=<span class=\"hljs-subst\">${width}<\/span>&amp;q=<span class=\"hljs-subst\">${quality || <span class=\"hljs-number\">75<\/span>}<\/span>`<\/span>\n}\n<span class=\"hljs-keyword\">const<\/span> MyImage = <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\">Image<\/span>\n      <span class=\"hljs-attr\">loader<\/span>=<span class=\"hljs-string\">{myLoader}<\/span>\n      <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/me.png\"<\/span>\n      <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Picture of the author\"<\/span>\n      <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{500}<\/span>\n      <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{500}<\/span>\n    \/&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>Instead of writing this function repeatedly in your Next.js application, you can instead use several pre-built configurations for the cloud providers: Imgix, Cloudinary, and Akamai. In your <code>next.config.js<\/code> file, this will look like below.<\/p>\n<p>Imgix Example<\/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\"><span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">images<\/span>: {\n    <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'imgix'<\/span>,\n    <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'https:\/\/example.com\/myaccount\/'<\/span>,\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\">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>Cloudinary Example<\/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-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">images<\/span>: {\n    <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'cloudinary'<\/span>,\n    <span class=\"hljs-attr\">path<\/span>: <span class=\"hljs-string\">'https:\/\/res.cloudinary.com\/demo\/'<\/span>,\n  },\n}\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<h2>Working example<\/h2>\n<iframe src=\"https:\/\/codesandbox.io\/embed\/nextjs-image-cloud-provider-osikp?fontsize=14&#038;hidenavigation=1&#038;theme=dark\"\n     style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n     title=\"nextjs-image-cloud-provider\"\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<h2>Next.js Links<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/nextjs.org\/docs\/basic-features\/image-optimization\">https:\/\/nextjs.org\/docs\/basic-features\/image-optimization<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/nextjs.org\/docs\/basic-features\/image-optimization#loader\">https:\/\/nextjs.org\/docs\/basic-features\/image-optimization#loader<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/nextjs.org\/docs\/api-reference\/next\/image\">https:\/\/nextjs.org\/docs\/api-reference\/next\/image<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28262,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,212,371,396],"class_list":["post-28261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-next-js","tag-under-review","tag-vercel"],"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>Options For Next.js Image Providers<\/title>\n<meta name=\"description\" content=\"The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.\" \/>\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-cloud-providers-with-nextimage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Options For Next.js Image Providers\" \/>\n<meta property=\"og:description\" content=\"The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-07T20:22:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-24T23:34:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\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\/using-cloud-providers-with-nextimage\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Options For Next.js Image Providers\",\"datePublished\":\"2021-04-07T20:22:42+00:00\",\"dateModified\":\"2025-02-24T23:34:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Next.js\",\"Under Review\",\"Vercel\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/\",\"name\":\"Options For Next.js Image Providers\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA\",\"datePublished\":\"2021-04-07T20:22:42+00:00\",\"dateModified\":\"2025-02-24T23:34:21+00:00\",\"description\":\"The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Options For Next.js Image Providers\"}]},{\"@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":"Options For Next.js Image Providers","description":"The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.","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-cloud-providers-with-nextimage\/","og_locale":"en_US","og_type":"article","og_title":"Options For Next.js Image Providers","og_description":"The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/","og_site_name":"Cloudinary Blog","article_published_time":"2021-04-07T20:22:42+00:00","article_modified_time":"2025-02-24T23:34:21+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e-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\/using-cloud-providers-with-nextimage\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/"},"author":{"name":"","@id":""},"headline":"Options For Next.js Image Providers","datePublished":"2021-04-07T20:22:42+00:00","dateModified":"2025-02-24T23:34:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA","keywords":["Guest Post","Image","Next.js","Under Review","Vercel"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/","name":"Options For Next.js Image Providers","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA","datePublished":"2021-04-07T20:22:42+00:00","dateModified":"2025-02-24T23:34:21+00:00","description":"The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-cloud-providers-with-nextimage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Options For Next.js Image Providers"}]},{"@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\/v1681924996\/Web_Assets\/blog\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e\/77871fb34ca6cb9600d3d03abaec83f68531dbbc-1920x1080-1_282622ea5e.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28261","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=28261"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28261\/revisions"}],"predecessor-version":[{"id":37004,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28261\/revisions\/37004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28262"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}