1"use strict";(self.webpackChunkpixelpoint_website=self.webpackChunkpixelpoint_website||[]).push([[7813],{7702:function(e,t,o){o.r(t),o.d(t,{Head:function(){return w},default:function(){return f}});var n=o(8453),r=o(6540),s=o(4754);const i={annotations:s.hk,Code:s.Cy},a={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"dark-plus"};function l(e){const t=Object.assign({p:"p",h2:"h2",a:"a",span:"span",code:"code",ul:"ul",li:"li",h3:"h3",strong:"strong",blockquote:"blockquote",ol:"ol"},(0,n.RP)(),e.components);return i||p("CH",!1),i.Code||p("CH.Code",!0),r.createElement(r.Fragment,null,r.createElement("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="dark-plus"] { --ch-t-colorScheme: var(--ch-0);--ch-t-foreground: var(--shiki-token-embed);--ch-t-background: var(--shiki-background-editor);--ch-t-editor-background: var(--shiki-background-editor);--ch-t-editor-foreground: var(--shiki-token-embed);--ch-t-tab-activeBackground: var(--shiki-background-editor);--ch-t-tab-inactiveBackground: var(--shiki-background-editor);--ch-t-tab-border: var(--shiki-menu-background);--ch-t-tab-activeBorder: var(--shiki-background-editor);--ch-t-editorGroupHeader-tabsBackground: var(--shiki-background-header);--ch-t-input-foreground: var(--shiki-token-embed);--ch-t-sideBar-foreground: var(--shiki-token-embed); }'}}),"\n",r.createElement(t.p,null,"If you've worked with Next.js, it's likely that you've come across Next Image component. This hassle-free image optimization solution not only provides support for modern formats such as webp and avif but also generates multiple versions tailored to different screen sizes."),"\n",r.createElement(t.p,null,"To leverage this magic, simply add the following code to your page:"),"\n","\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Image ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'next/image'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" ",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"export default function ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Page",props:{style:{color:"var(--shiki-token-function)"}}},{content:"() {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"Image",props:{style:{color:"var(--shiki-token-constant)"}}}]},{tokens:[{content:" src",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"/profile.png"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" width",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{",props:{style:{color:"var(--shiki-color-text)"}}},{content:"500",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"}",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" height",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{",props:{style:{color:"var(--shiki-color-text)"}}},{content:"500",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"}",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" alt",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"Picture of the author"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" />",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" );",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"}",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"javascript"},annotations:[]}]}),"\n","\n",r.createElement(t.p,null,"However, as is the case with any magic, there's a solid foundation of hard work that enables it to function seamlessly. In this article, we're going to explore how Next Image works and clear up some common misconceptions surrounding it."),"\n",r.createElement(t.h2,{id:"core-architecture"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#core-architecture"},r.createElement(t.span,{className:"icon icon-link"})),"Core Architecture"),"\n",r.createElement(t.p,null,"The underlying architecture of ",r.createElement(t.code,null,"next/image")," is primarily made up of three components:"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"React Next Image Component"),"\n",r.createElement(t.li,null,"Image API"),"\n",r.createElement(t.li,null,"Image Optimizer"),"\n"),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 77.01149425287358%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/69d87d0bcb41efd1133fb16b490bd827/09400/image-1.webp 174w,\n/static/69d87d0bcb41efd1133fb16b490bd827/3266f/image-1.webp 348w,\n/static/69d87d0bcb41efd1133fb16b490bd827/657d2/image-1.webp 696w,\n/static/69d87d0bcb41efd1133fb16b490bd827/e644e/image-1.webp 1044w,\n/static/69d87d0bcb41efd1133fb16b490bd827/8daba/image-1.webp 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/69d87d0bcb41efd1133fb16b490bd827/88093/image-1.png 174w,\n/static/69d87d0bcb41efd1133fb16b490bd827/91d18/image-1.png 348w,\n/static/69d87d0bcb41efd1133fb16b490bd827/871fd/image-1.png 696w,\n/static/69d87d0bcb41efd1133fb16b490bd827/4e07d/image-1.png 1044w,\n/static/69d87d0bcb41efd1133fb16b490bd827/aeb15/image-1.png 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/69d87d0bcb41efd1133fb16b490bd827/871fd/image-1.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.h3,{id:"react-component"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#react-component"},r.createElement(t.span,{className:"icon icon-link"})),"React Component"),"\n",r.createElement(t.p,null,"The primary function of the component is to generate the correct HTML image output based on the provided properties and to construct multiple URLs to be populated in the ",r.createElement(t.code,null,"srcset")," and ",r.createElement(t.code,null,"src")," attributes. Here is an example output from the Next Image component:"),"\n","\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"var(--shiki-color-text)"}}},{content:"img ",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" alt",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"Example"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" loading",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"lazy" ',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" width",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"500" ',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" height",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"500" ',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" decoding",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"async" ',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" data-nimg",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"1" ',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" style",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"color:transparent" ',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" srcset",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"/_next/image?url=%2Fimages%2Fexample.jpg',props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=640",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 1x, ",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2Fimages%2Fexample.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=1080",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:'q=75 2x" ',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" src",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"/_next/image?url=%2Fimages%2Fexample.jpg',props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=1080",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:'q=75"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]}],lang:"html"},annotations:[]}]}),"\n","\n",r.createElement(t.p,null,"Let's take a closer look at the generated URL:"),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/_next/image?url=/images/example.jpg&w=640&q=75",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"css"},annotations:[]}]}),"\n",r.createElement(t.p,null,"This encoded URL accepts two parameters: ",r.createElement(t.code,null,"w")," (width) and ",r.createElement(t.code,null,"q")," (quality), which are more visible in the decoded version. You can spot that there is no ",r.createElement(t.code,null,"h")," (height) attribute, but about that we will talk later in the article."),"\n",r.createElement(t.h3,{id:"image-api"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#image-api"},r.createElement(t.span,{className:"icon icon-link"})),"Image API"),"\n",r.createElement(t.p,null,"The Next Image API serves as an image proxy, similar to ",r.createElement("a",{href:"https://github.com/unjs/ipx",target:"_blank"},"IPX"),". It performs the following tasks:"),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,"Accepts an ",r.createElement(t.strong,null,"image URL"),", ",r.createElement(t.strong,null,"width"),", and ",r.createElement(t.strong,null,"quality")),"\n",r.createElement(t.li,null,"Validates parameters"),"\n",r.createElement(t.li,null,"Determines cache
1control policies"),"\n",r.createElement(t.li,null,"Processes the image"),"\n",r.createElement(t.li,null,"Serves the image in a format supported by the user's browser"),"\n"),"\n",r.createElement(t.p,null,"As things begin to make more sense, let's briefly discuss the final piece of the puzzle before we draw some conclusions from this arrangement."),"\n",r.createElement(t.h3,{id:"image-optimizer"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#image-optimizer"},r.createElement(t.span,{className:"icon icon-link"})),"Image Optimizer"),"\n",r.createElement(t.p,null,"Next Image utilizes different image optimization libraries - Sharp or Squoosh - depending on certain conditions:"),"\n",r.createElement(t.p,null,"Sharp is a fast and efficient image optimization Node.js module that makes use of the native ",r.createElement("a",{href:"https://github.com/libvips/libvips",target:"_blank"},"libvips")," library."),"\n",r.createElement(t.p,null,"Squoosh is a fully node-based image optimization solution. It's slower, but it doesn't require any additional libraries to be installed on a machine. For this reason, Sharp is recommended for production use, whereas Squoosh is used by default in local environments."),"\n",r.createElement(t.blockquote,null,"\n",r.createElement(t.p,null,"I advise using Sharp in local environments as well. While both Sharp and Squoosh optimize images quite similarly, Sharp's compression algorithms can lead to color degradation compared to Squoosh. This can result in visually different behavior between production and local environments, particularly when trying to match the background color of an image with the page background."),"\n"),"\n",r.createElement(t.h2,{id:"outcomes"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#outcomes"},r.createElement(t.span,{className:"icon icon-link"})),"Outcomes"),"\n",r.createElement(t.p,null,"Having understood the primary architecture behind ",r.createElement(t.code,null,"next/image"),", we can debunk common misconceptions and glean more insights on how to utilize it more effectively."),"\n",r.createElement(t.h3,{id:"nextimage-does-not-crop"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#nextimage-does-not-crop"},r.createElement(t.span,{className:"icon icon-link"})),"next/image does not crop"),"\n",r.createElement(t.p,null,"A common misconception among developers is that ",r.createElement(t.code,null,"next/image")," can crop their images. This confusion arises because you can pass width, height, and fill properties to the component, creating an impression that the image has been cropped. In reality, this isn't the case. The Next Image component primarily requires width and height for assigning to the img tag to prevent layout shifts."),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 74.71264367816093%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/ca64d0f08a34d70f17c52e2f8ae42dae/09400/image-2.webp 174w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/3266f/image-2.webp 348w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/657d2/image-2.webp 696w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/e644e/image-2.webp 1044w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/8daba/image-2.webp 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/ca64d0f08a34d70f17c52e2f8ae42dae/88093/image-2.png 174w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/91d18/image-2.png 348w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/871fd/image-2.png 696w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/4e07d/image-2.png 1044w,\n/static/ca64d0f08a34d70f17c52e2f8ae42dae/aeb15/image-2.png 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/ca64d0f08a34d70f17c52e2f8ae42dae/871fd/image-2.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.p,null,"As we've already discussed, the Image API does not accept a height parameter, meaning it currently isn't possible to change the original image's aspect ratio. If you don't use the fill property, the image will merely stretch or shrink in the event of width-height mismatches."),"\n",r.createElement(t.p,null,"However, if you're using TailwindCSS, it behaves differently due to its default global CSS rule:"),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"img",props:{style:{color:"var(--shiki-token-string)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"video",props:{style:{color:"var(--shiki-token-string)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" max-width",props:{style:{color:"var(--shiki-token-constant)"}}},{content:": ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"100",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"%",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height",props:{style:{color:"var(--shiki-token-constant)"}}},{content:": ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"auto",props:{style:{color:"var(--shiki-token-regex)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"}",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"css"},annotations:[]}]}),"\n",r.createElement(t.p,null,"This makes layout shift issues harder to detect."),"\n",r.createElement(t.h3,{id:"displayed-image-width--loaded-image-width"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#displayed-image-width--loaded-image-width"},r.createElement(t.span,{className:"icon icon-link"})),"Displayed image width â loaded image width"),"\n",r.createElement(t.p,null,"Another potential point of confusion is that the width property passed to ",r.createElement(t.code,null,"next/image")," doesn't represent the actual width to which the image will be resized. As we noted from the example at the start of the article, passing ",r.createElement(t.code,null,"width={500}")," to a component will result in the image being resized to a width of 640px, as evident in the generated URL:"),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/_next/image?url=/images/example.jpg&",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"w",props:{style:{color:"var(--shiki-color-text)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"640",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"&",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"q",props:{style:{color:"var(--shiki-color-text)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"75",props:{style:{color:"var(--shiki-token-constant)"}}}]}],lang:"bash"},annotations:[]}]}),"\n",r.createElement(t.p,null,"If you expect the x2 retina version to utilize an image width of 1000px or 1280px, you're in for a surprise. The actual width used will be 1080px. Naturally, you might wonder where these numbers are coming from."),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 75.28735632183908%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/f1e20b9b08c20928790ddd07b16176f3/09400/image-3.webp 174w,\n/static/f1e20b9b08c20928790ddd07b16176f3/3266f/image-3.webp 348w,\n/static/f1e20b9b08c20928790ddd07b16176f3/657d2/image-3.webp 696w,\n/static/f1e20b9b08c20928790ddd07b16176f3/e644e/image-3.webp 1044w,\n/static/f1e20b9b08c20928790ddd07b16176f3/8daba/image-3.webp 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/f1e20b9b08c20928790ddd07b16176f3/88093/image-3.png 174w,\n/static/f1e20b9b08c20928790ddd07b16176f3/91d18/image-3.png 348w,\n/static/f1e20b9b08c20928790ddd07b16176f3/871fd/image-3.png 696w,\n/static/f1e20b9b08c20928790ddd07b16176f3/4e07d/image-3.png 1044w,\n/static/f1e20b9b08c20928790ddd07b16176f3/aeb15/image-3.png 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/f1e20b9b08c20928790ddd07b16176f3/871fd/image-3.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.p,null,"Next.js resizes images to the closest size from an array of",r.createElement(t.code,null,"deviceSizes")," and ",r.createElement(t.code,null,"imageSizes")," that you can define in ",r.createElement(t.code,null,"next.config.js"),". By default, these are:"),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"module",props:{style:{color:"var(--shiki-token-constant)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"exports ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" images:",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" deviceSizes:",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" [",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"640",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"750",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"828",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"1080",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"1200",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"1920",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"2048",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"3840",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"],",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" imageSizes:",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" [",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"16",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"32",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"48",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"64",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"96",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"128",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"256",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"384",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"],",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" },",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"};",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",r.createElement(t.p,null,"What's crucial to note here is that using the default configuration can negatively impact performance, leading to a reduced score in Lighthouse's Page Speed Insights. This becomes particularly evident when you attempt to display large images on a page. For instance, if you want to render an image with a width of 1250px, the actual loaded image width will be 1920px. The discrepancy between the required size and the actual loaded size becomes even greater for x2 retina versions, as these will be resized to 3840px. However, you can remedy this by adding more sizes to the ",r.createElement(t.code,null,"deviceSizes")," or ",r.createElement(t.code,null,"imageSizes")," arrays(",r.createElement("a",{href:"https://nextjs.org/docs/app/api-reference/components/image#devicesizes",target:"blank"},"docs"),")."),"\n",r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 74.71264367816093%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/8a620b22623a4585c46b4340fc4b2ab8/09400/image-4.webp 174w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/3266f/image-4.webp 348w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/657d2/image-4.webp 696w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/e644e/image-4.webp 1044w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/8daba/image-4.webp 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/8a620b22623a4585c46b4340fc4b2ab8/88093/image-4.png 174w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/91d18/image-4.png 348w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/871fd/image-4.png 696w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/4e07d/image-4.png 1044w,\n/static/8a620b22623a4585c46b4340fc4b2ab8/aeb15/image-4.png 1392w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/8a620b22623a4585c46b4340fc4b2ab8/871fd/image-4.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",r.createElement(t.h3,{id:"image-optimization-can-be-used-without-the-nextimage-component"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#image-optimization-can-be-used-without-the-nextimage-component"},r.createElement(t.span,{className:"icon icon-link"})),"Image optimization can be used without the next/image component"),"\n",r.createElement(t.p,null,"With an understanding of the core architecture, it's easy to see that you can use the Image API without necessarily using ",r.createElement(t.code,null,"next/image"),". There are several scenarios in which this can be beneficial."),"\n",r.createElement(t.p,null,"First, you can render optimized images inside a canvas. Regardless of whether you're loading images onto a canvas from external sources or from local storage, you can pass the correct URL to the API and have it work seamlessly."),"\n",r.createElement(t.p,null,"Additionally, you can use it to optimize OG images or create your own ",r.createElement(t.code,null,"<picture>")," tag-based component for better ",r.createElement("a",{href:"https://web.dev/codelab-art-direction/",target:"_blank"},"art direction"),"."),"\n",r.createElement(t.p,null,"The Image API is located under the ",r.createElement(t.code,null,"/_next/image")," route and accepts just three additional parameters: URL, width (w), and quality (q)."),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"/",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"_next",props:{style:{color:"var(--shiki-color-text)"}}},{content:"/",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"image",props:{style:{color:"var(--shiki-color-text)"}}},{content:"?",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"url",props:{style:{color:"var(--shiki-color-text)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"https",props:{style:{color:"var(--shiki-color-text)"}}},{content:":",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"//example.com/test.jpg&w=640&q=75",props:{style:{color:"var(--shiki-token-comment)"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",r.createElement(t.p,null,"Remember, the width parameter is checked by the API and can only be a number sourced from either the deviceSizes or imageSizes configuration."),"\n",r.createElement(t.h3,{id:"use-import-for-local-images"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#use-import-for-local-images"},r.createElement(t.span,{className:"icon icon-link"})),"Use import for local images"),"\n",r.createElement(t.p,null,"With ",r.createElement(t.code,null,"next/image"),", there are two methods you can use to load local images:"),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Image ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'next/image'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"import ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"profileImg ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'./profile.jpg'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"export default function ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Page",props:{style:{color:"var(--shiki-token-function)"}}},{content:"() {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" <>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" {",props:{style:{color:"var(--shiki-color-text)"}}},{content:"/* Using absolute path */",props:{style:{color:"var(--shiki-token-comment)"}}},{content:"}",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"Image ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"src",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"/profile.png" ',props:{style:{color:"var(--shiki-token-string)"}}},{content:"width",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{",props:{style:{color:"var(--shiki-color-text)"}}},{content:"500",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"} ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"height",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{",props:{style:{color:"var(--shiki-color-text)"}}},{content:"500",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"} ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"alt",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"Picture of the author" ',props:{style:{color:"var(--shiki-token-string)"}}},{content:"/>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" {",props:{style:{color:"var(--shiki-color-text)"}}},{content:"/* Using imported image via relative path */",props:{style:{color:"var(--shiki-token-comment)"}}},{content:"}",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"Image ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"src",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{profileImg} ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"alt",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"Picture of the author" ',props:{style:{color:"var(--shiki-token-string)"}}},{content:"/>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" );",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"}",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",r.createElement(t.p,null,"Using an absolute path is common when dealing with local images in examples, tutorials, or even open-source projects. It's easy to assume that there's no significant difference aside from the automatic width/height assignment. However, there is a difference. When you access images by an absolute path from a public folder, Next.js adheres to the cache policies of the destination server, which by default results in a 30-day cache policy rather than ",r.createElement(t.code,null,"public,max-age=31536000,immutable"),". Using a 30-day cache policy for image assets can significantly lower your Lighthouse score."),"\n",r.createElement(t.h3,{id:"understanding-sizes-and-the-100vw-technique"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#understanding-sizes-and-the-100vw-technique"},r.createElement(t.span,{className:"icon icon-link"})),"Understanding Sizes and the 100vw Technique"),"\n",r.createElement(t.p,null,"The ",r.createElement(t.code,null,"next/image")," component accepts a property known as 'sizes', akin to the html img sizes attribute. However, in line with other aspects we've discussed, it performs s
1ome unique operations too. The 'sizes' attribute works in concert with 'srcset' and accepts a list of browser conditions and image widths for which they should be activated. If you're unfamiliar with this, I recommend taking a look at ",r.createElement("a",{href:"https://www.dofactory.com/html/img/sizes",target:"_blank"},"these docs"),", and this ",r.createElement("a",{href:"https://codesandbox.io/s/hungry-brattain-vw78xf?file=/index.html:1653-1685",target:"_blank"},"codesandbox example"),". Here's an example of an image using 'sizes':"),"\n","\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"var(--shiki-color-text)"}}},{content:"img ",props:{style:{color:"var(--shiki-token-string)"}}},{content:"srcset",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"/img/html/vangogh-sm.jpg 120w,',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /img/html/vangogh.jpg 193w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:' /img/html/vangogh-lg.jpg 278w"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" sizes",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"(max-width: 710px) 120px,',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" (max-width: 991px) 193px,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:' 278px"',props:{style:{color:"var(--shiki-token-string)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]}],lang:"html"},annotations:[]}]}),"\n","\n",r.createElement(t.p,null,"Let's dive into the details for better understanding. When you utilize Next Image without specifying the 'sizes' property, your 'srcset' will include two URLs: one for the standard version (x1) and another for the Retina version (x2). With this setup, the browser will invariably opt for the Retina version when used on a Retina device. This preference arises due to the use of 1x and 2x syntax within the 'srcset'."),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"var(--shiki-color-text)"}}},{content:"img",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" srcset",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2Fimages%2Fexample.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=640",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 1x,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2Fimages%2Fexample.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=1080",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 2x",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:' "',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:"/>",props:{style:{color:"var(--shiki-color-text)"}}}]}],lang:"html"},annotations:[]}]}),"\n",r.createElement(t.p,null,'The browser essentially interprets this as: "Loa
1d this URL for 2x pixel density, and this other one for 1x pixel density." Thus, if you have a design where the image version on desktop is smaller than on mobile or tablet, the browser will consistently load the larger version with the default Next Image syntax. Unfortunately, this could result in suboptimal performance and a lower Lighthouse score.'),"\n",r.createElement(t.p,null,"There is, however, a method to instruct the browser to load images based on suitable width. Instead of providing 1x, 2x parameters to the 'srcset' URL, you specify the width of the image. For example, check these instructions to the browser:"),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"var(--shiki-color-text)"}}},{content:"img",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" srcset",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2Fimages%2Fexample.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=640",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 640w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2Fimages%2Fexample.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=1080",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 1080w",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:' "',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:"/>",props:{style:{color:"var(--shiki-color-text)"}}}]}],lang:"html"},annotations:[]}]}),"\n",r.createElement(t.p,null,"In this case, the browser selects the most appropriate image for the current size used on the page. If a mobile image has a width of 600px (1200px for Retina), it will choose the ",r.createElement(t.code,null,"1080w")," version. Meanwhile, if a desktop image only uses 300px (600px for Retina), the browser opts for ",r.createElement(t.code,null,"640w"),"."),"\n",r.createElement(t.p,null,"The advantage of this approach lies in loading the most fitting images for the current screen size, thereby enhancing performance due to reduced image size. Now that we understand the benefits, we can apply this strategy with Next Image using the ",r.createElement(t.code,null,"100vw")," trick. While you cannot directly instruct Next Image to use the width (",r.createElement(t.code,null,"w"),") parameters near the URL instead of pixel-density (",r.createElement(t.code,null,"1x"),"**) options, you can apply a workaround arising from how Next Image is coded:"),"\n",r.createElement(t.ol,null,"\n",r.createElement(t.li,null,"If your 'sizes' attribute contains ",r.createElement(t.code,null,"vw")," numbers, it will only keep those sizes larger than the smallest ",r.createElement(t.code,null,"deviceSize")," (640 by default) multiplied by the percentage(",r.createElement(t.code,null,"100vw")," = 1, ",r.createElement(t.code,null,"50vw")," = 0.5). Specifying ",r.createElement(t.code,null,"100vw"),", you will end up with 8 URLs."),"\n",r.createElement(t.li,null,"If your 'sizes' property has non-",r.createElement(t.code,null,"vw")," numbers, your 'srcset' will contain ALL SIZES (i.e., all possible combinations of ",r.createElement(t.code,null,"deviceSizes")," and ",r.createElement(t.code,null,"imageSizes"),"), yielding a total of 16 URLs."),"\n"),"\n",r.createElement(t.p,null,"To illustrate, let's examine the generated code for ",r.createElement(t.code,null,"100vw"),":"),"\n",r.createElement(i.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"var(--shiki-color-text)"}}},{content:"img",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" sizes",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}}
1,{content:'"100vw"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" srcset",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=640",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 640w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=750",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 750w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=828",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 828w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=1080",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 1080w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=1200",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 1200w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=1920",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 1920w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=2048",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 2048w,",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=3840",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"q=75 3840w",props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:' "',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:" src",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-embed)"}}},{content:'"/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg',props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"w=3840",props:{style:{color:"var(--shiki-token-string)"}}},{content:"&",props:{style:{color:"var(--shiki-token-operator)"}}},{content:'q=75"',props:{style:{color:"var(--shiki-token-string)"}}}]},{tokens:[{content:"/>",props:{style:{color:"var(--shiki-color-text)"}}}]}],lang:"html"},annotations:[]}]}),"\n",r.createElement(t.p,null,"If you include a ",r.createElement(t.code,null,"px")," value within 'sizes'(eg. ",r.createElement(t.code,null,"(max-width: 1024px) 800px, 300px"),"), the list of URLs expands even further, reaching 16 in a default configuration. Ideally, I would prefer to generate 4 URLs for a specific image, similar to other frameworks, rather than bloating the HTML with many unnecessary options, none of which may be perfectly sized for my needs."),"\n",r.createElement(t.p,null,"This discu
1ssion underscores a key point: to populate 'srcset' with more versions for better performance across a variety of resolutions, you can simply set 'sizes' to ",r.createElement(t.code,null,"100vw"),". This trick forces the creation of URLs for 8 sizes, starting from 640px."),"\n",r.createElement(t.p,null,"However, because this method can easily inflate your HTML size - especially if you've added extra ",r.createElement(t.code,null,"imageSizes")," or ",r.createElement(t.code,null,"deviceSizes")," - it's recommended to apply this approach carefully."),"\n",r.createElement(t.p,null,"While I can only speculate about the exact reasoning behind this architecture, I assume that for large-scale projects with various image ratios used in many different places, this approach of generating average-sized versions might prove beneficial. These versions could cater to most scenarios and potentially hit the cache more frequently, all the while maintaining ease of use."),"\n",r.createElement(t.h2,{id:"conclusions"},r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusions"},r.createElement(t.span,{className:"icon icon-link"})),"Conclusions"),"\n",r.createElement(t.p,null,"Though Next Image simplifies image management and provides significant advantages, it could benefit from additional features like advanced cropping and precise resizing, similar to third-party solutions. Incorporating a specialized ",r.createElement(t.code,null,"<picture>")," component for fine-tuned art direction would also be advantageous. I'd particularly appreciate an automated method for generating four image versions at 0.25x, 0.5x, 1x, and 2x the supplied width."),"\n",r.createElement(t.p,null,"Nevertheless, for most use cases, the developer experience and efficiency of Next Image will more than enough."),"\n",r.createElement(t.p,null,"If you enjoyed the article and want to see more web tips, ",r.createElement(t.a,{href:"https://twitter.com/alex_barashkov"},"follow me on Twitter"),"."))}var c=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.RP)(),e.components);return t?r.createElement(t,e,r.createElement(l,e)):l(e)};function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var h=o(2532),m=o(1021),d=o(545),k=o(9072),g=o(3669),y=o(9063),u=o(352),v=o(84);const b=e=>{let{data:{mdx:{author:t,frontmatter:o,fields:{slug:n}},allMdx:{nodes:s}},location:i,pageContext:{videoCovers:a},children:l}=e;return r.createElement(y.A,{headerTheme:"black",headerShowThemeButton:!0},r.createElement("article",{className:"safe-paddings pt-32 sm:pt-24"},r.createElement("div",{className:"container"},r.createElement("div",{className:"relative mx-auto max-w-[696px] xl:mx-0 xl:flex xl:max-w-none xl:justify-center xl:space-x-20 lg:space-x-8 md:block md:space-x-0"},r.createElement("div",{className:"xl:max-w-[696px] lg:max-w-[626px] md:max-w-none"},r.createElement(d.A,Object.assign({},o,{slug:n})),r.createElement(m.A,{content:l,videoCovers:a})),r.createElement(k.A,{author:t,readMorePosts:s,socialShareUrl:i.href})))),r.createElement(g.A,{withTopMargin:!0}))};function f(e){return r.createElement(b,e,r.createElement(c,e))}const w=e=>{let{data:{mdx:{frontmatter:{title:t,summary:o,ogImage:n}}}}=e;const s=(0,h.d)(n);return r.createElement(u.A,v.A.blogPost({title:t,description:o,ogImage:s}))}}}]); 2//# sourceMappingURL=component---src-templates-blog-post-jsx-content-file-path-content-posts-2023-06-22-next-image-index-md-8931e05bb194574fbc41.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.