1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[99968],{18885:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/next-image",function(){return i(98975)}])},20481:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>x});var r=i(1873),s=i(53520),n=i(93682),l=i(38536),a=i(54791),o=i(39895),c=i(61620),p=i(28270),u=i(64341),h=i(40561),d=i(9954),g=i(71055);let m=["config","image","sx","__themeKey","priority"];function f(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,r)}return i}function Y(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?f(Object(i),!0).forEach(function(t){(0,n.A)(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):f(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}let w=(0,l.A)("picture",{target:"e1i0vlu30"})((0,p.Ay)(),"");function x(e){let{config:t=u.PV,image:i,sx:n,__themeKey:l,priority:p}=e,f=Y({style:{width:"100%",height:"auto"},sizes:"100vw",imgRef:{current:null}},(0,s.A)(e,m));if(!t||!t.breakpoints)throw Error("Picture config must have a config with a list of breakpoints");let{breakpoints:x}=t,y=x.map(({image:e,params:t,spec:r})=>{let s=(0,o.V)(e||i,t),n={mediaPrefix:""};return{media:"string"==typeof r||Array.isArray(r)?(0,c.mq)(Y(Y({},n),{},{size:r})):(0,c.mq)(Y(Y({},n),r)),sourceUrl:s}}),b=y[x.length-1].sourceUrl,v=!0===p||"high"===p;return(0,d.Y)(g.Fragment,null,v?(0,d.Y)(h.A,null,y.map(({media:e,sourceUrl:t})=>(0,d.Y)("link",{key:`pic-${i?.id}-preload-${e}`,rel:"preload",as:"image",href:t,media:e}))):null,(0,d.Y)(w,{sx:n,__themeKey:l},y.map(({media:e,sourceUrl:t})=>(0,d.Y)("source",{key:`pic-${i?.id}-src-${e}`,srcSet:t,media:e})),(0,d.Y)(a.default,(0,r.A)({key:`pic-${i?.id}-img`,image:i,src:b,priority:p},f))))}},40561:(e,t,i)=>{"use strict";i.d(t,{A:()=>s});var r=i(45111);let s=i.n(r)()},45111:(e,t,i)=>{e.exports=i(80049)},98975:(e,t,i)=>{"use strict";i.r(t),i.d(t,{__N_SSP:()=>A,default:()=>C});var r=i(38536),s=i(40561),n=i(54791),l=i(20481),a=i(80166),o=i(79292),c=i(9954),p=i(71055);let{RUNTIME_MEDIA_GATEWAY_URL:u}=a.Ay,h={pathname:"/images/screen-shot-2022-04-28-at-8-08-26-am-1651158590.png",hips_pathname:"/hmg-prod/images/screen-shot-2022-04-28-at-8-08-26-am-1651158590.png",hips_url:"https://hips.hearstapps.net/hmg-prod/images/screen-shot-2022-04-28-at-8-08-26-am-1651158590.png",created_at:"2022-04-28T15:09:52.439280Z",updated_at:"2022-04-28T15:09:52.439311Z",edited_at:"2022-04-28T15:09:52.411523Z",display_id:0x26011f3,filename:"screen-shot-2022-04-28-at-8-08-26-am-1651158590.png",path:"images",hips_prefix:"hmg-prod",default_title:"Screen Shot 2022-04-28 at 8.08.26 AM.png",width:1202,height:1200,metadata:{crops:{"1x1":"0.9983361064891847xw:1xh;center,top","2x1":"1xw:0.5008333333333334xh;center,top","3x1":"1xw:0.3338888888888889xh;center,top","4x3":"1xw:0.75125xh;center,top","4x6":"0.6655574043261231xw:1xh;center,top","5x1":"1xw:0.20033333333333334xh;center,top","6x4":"1xw:0.6677777777777778xh;center,top","8x1":"1xw:0.12520833333333334xh;center,top","10x2":"1xw:0.20033333333333334xh;center,top","10x3":"1xw:0.30050000000000004xh;center,top","10x5":"1xw:0.5008333333333334xh;center,top","16x9":"1xw:0.5634375xh;center,top","8x10":"0.7986688851913477xw:1xh;center,top","9x16":"0.5615640599001663xw:1xh;center,top","18x11":"1xw:0.6121296296296296xh;center,top"},domain:"hmg-prod.s3.amazonaws.com",file_type:"image/png",is_animated:!1},rights:null},d=(0,r.A)("h1",{target:"ent48ki2"})({name:"bxqzz5",styles:"margin:auto;text-align:center"}),g=(0,r.A)("section",{target:"ent48ki1"})({name:"1csl0m1",styles:"border-style:solid;border-width:1px 0 1px 0;margin:1rem"}),m=(0,r.A)("h2",{target:"ent48ki0"})({name:"xivzek",styles:"margin-left:1px"});function f({children:e}){return(0,c.Y)(p.Fragment,null,(0,c.Y)("hr",null),(0,c.Y)("div",null,(0,c.Y)("p",null,"Example Code Snippet:"),(0,c.Y)("pre",{className:"language-jsx"}
1,(0,c.Y)("code",{className:"language-jsx"},e))),(0,c.Y)("hr",null))}function Y(){return(0,c.Y)(g,null,(0,c.Y)(m,null,"Introduction"),(0,c.Y)("p",null,"The Next/Image is using ",(0,c.Y)("code",null,"img")," tag with ",(0,c.Y)("code",null,"srcset")," and ",(0,c.Y)("code",null,"sizes")," ","to help do the responsive image rendering. On top of it, Next/Image provide additional optimization of image rendering, including ",(0,c.Y)("b",null,"preload priority image"),", ",(0,c.Y)("b",null,"placeholder"),", ",(0,c.Y)("b",null,"lazyload"),",",(0,c.Y)("b",null,"optimized image format"),", ",(0,c.Y)("b",null,"caching")," etc."),(0,c.Y)("h3",null,"References"),(0,c.Y)("ul",null,(0,c.Y)("li",null,(0,c.Y)("a",{href:"https://nextjs.org/docs/api-reference/next/future/image"},"Next Future Image"))))}function w(){let{default_title:e,metadata:t}=h;return(0,c.Y)(g,null,(0,c.Y)(m,null,"Next/Image Required Props: src, width, height"),(0,c.Y)("p",null,"Next/Image requires src, width, height, alt to render a basic img tag."," ",(0,c.Y)("a",{href:"https://nextjs.org/docs/api-reference/next/future/image#required-props"},"ref")),(0,c.Y)("p",null,"Please note the following props will not be passed to the Next image:"," ",(0,c.Y)("a",{href:"https://nextjs.org/docs/api-reference/next/image#other-props"},"ref"),(0,c.Y)("ul",null,(0,c.Y)("li",null,"srcSet. Use Device Sizes instead."),(0,c.Y)("li",null,"ref. Use ",(0,c.Y)("code",null,"onLoadingComplete")," instead."),(0,c.Y)("li",null," ","decoding. It is always ",(0,c.Y)("code",null,"async")))),(0,c.Y)("p",null,"Please also note the sizes property configures how next/image automatically generates an image source set. If no sizes value is present, a small source set is generated, the srcset will be dpr only (1x, 2x). If sizes is defined, a large source set is generated, suitable for a responsive image. If the sizes property includes sizes such as 50vw, which represent a percentage of the viewport width, then the source set is trimmed to not include any values which are too small to ever be necessary.",(0,c.Y)("a",{href:"https://nextjs.org/docs/api-reference/next/image#sizes"},"ref")),(0,c.Y)(f,null,` 2<Image 3 height="320" // image height 4 src="https://hips.hearstapps.net/hmg-prod/images/kitchen-gear-awards-lead-image-1637619320.png" // image path 5 width="640" // image width 6 alt="sample test image" // alt 7 ... 8/> 9 `),(0,c.Y)(n.default,{alt:e,cropInfo:t?.crops,height:"320",src:"https://hips.hearstapps.net/hmg-prod/images/kitchen-gear-awards-lead-image-1637619320.png",title:e,width:"640"}))}function x({src:e,width:t}){let i={resize:`${Math.floor(t/2)}:*`},r=(0,o.R)(e,i,{baseDomain:u});try{return decodeURIComponent(r)}catch{return r}}let y={default:{crop:"2x1",resize:"980:*"}};function b(){let{width:e,height:t,default_title:i,hips_pathname:r,metadata:s}=h;return(0,c.Y)(g,null,(0,c.Y)(m,null,"Next/Image Option: Customized Loader (",(0,c.Y)("a",{href:"https://nextjs.org/docs/api-reference/next/future/image#loader"},"Link"),")"),(0,c.Y)("p",null,"Loader is a custom function used to resolve URLs. A loader function should returns a URL string for the image, given parameters ",(0,c.Y)("code",null,"src"),", ",(0,c.Y)("code",null,"width")," and"," ",(0,c.Y)("code",null,"quality"),"."),(0,c.Y)("p",null,"By default, we provide a custom loader to our wrapper component that returns the image source url with the requested crops/size and quality"),(0,c.Y)(f,null,` 10// customized loader 11function customLoader({ src, width }) { 12 const resize = Math.floor(width / 2) + ':*'; 13 const queries = { resize }; 14 15 const imageUrl = generateURL(src, queries, { baseDomain: RUNTIME_MEDIA_GATEWAY_URL }); 16 17 try { 18 return decodeURIComponent(imageUrl); 19 } catch { 20 return imageUrl; 21 } 22} 23<Image 24 loader={customLoader} 25 ... 26/> 27 `),(0,c.Y)(n.default,{alt:i,config:y,cropInfo:s?.crops,loader:x,height:t,src:r,sizes:"50vw",title:i,width:e}))}function v(){let{width:e,height:t,default_title:i,hips_pathname:r,metadata:s}=h,[l,a]=(y?.default?.crop||"1x1").split("x");return(0,c.Y)(g,null,(0,c.Y)(m,null,"Use width/height `auto` for responsive layout"),(0,c.Y)(f,null,` 28const [width, height] = (croppedConfig?.default?.crop || '1x1').split('x'); 29const ratio = width / height; 30 <Image 31 alt={title} 32 cropInfo={metadata?.crops} // cropping information
33 height={imgHeight / ratio} // divide ratio to get the correct placeholder size 34 sizes="50vw" 35 src={path} 36 title={title} 37 width={imgWidth} 38 style={{ width: '50%', height: 'auto' }} 39 /> 40 `),(0,c.Y)(n.default,{alt:i,cropInfo:s?.crops,height:t/(l/a),sizes:"50vw",src:r,title:i,width:e,style:{width:"50%",height:"auto"}}))}function _(){let{default_title:e,metadata:t}=h;return(0,c.Y)(g,null,(0,c.Y)(m,null,"Use Case: Image from Direct Image URL with Cropping Info"),(0,c.Y)(f,null,` 41 <Image 42 alt={title} 43 config={croppedConfig} 44 cropInfo={metadata?.crops} 45 height="320" 46 src="https://hips.hearstapps.net/hmg-prod/images/kitchen-gear-awards-lead-image-1637619320.png" 47 title={title} 48 width="640" 49 /> 50 `),(0,c.Y)(n.default,{alt:e,config:y,sizes:"100vw",cropInfo:t?.crops,height:"320",src:"https://hips.hearstapps.net/hmg-prod/images/kitchen-gear-awards-lead-image-1637619320.png",title:e,width:"640"}))}let z={default:{crop:"2x1",resize:"980:*"},480:{crop:"1x1"},640:{crop:"1x1"},980:{crop:"16x9"}};function I(){let{width:e,height:t,default_title:i,hips_pathname:r,metadata:s}=h;return(0,c.Y)(g,null,(0,c.Y)(m,null,"Use Case: Different Crop According to Viewport"),(0,c.Y)(f,null,` 51// config with art direction info 52const differentCropConfig = { 53 default: { crop: '2x1', resize: '180:*' }, 54 480: { crop: '1x1' }, 55 640: { crop: '1x1' }, 56 980: { crop: '16x9' }, 57}; 58<Image 59 alt={title} 60 config={differentCropConfig} 61 cropInfo={metadata?.crops} 62 height={imgHeight} 63 sizes="100vw" // sizes attr is need to build correct srcset. w/o it, the srcset will be dpr only (1x, 2x) 64 src={path} 65 title={title} 66 width={imgWidth} 67 style={{ height: 'auto' }} 68/> 69 `),(0,c.Y)(n.default,{alt:i,config:z,cropInfo:s?.crops,height:t,sizes:"100vw",src:r,title:i,width:e,style:{height:"auto"}}))}function k(){let{default_title:e}=h;return(0,c.Y)(g,null,(0,c.Y)(m,null,"Use Case: Picture Use Case: Complex Art Direction"),(0,c.Y)("details",null,(0,c.Y)("summary",null,"Cases picture tag need to be used"),(0,c.Y)("p",null,(0,c.Y)("ul",null,(0,c.Y)("li",null,"when art direction is needed, i.e, different crop for same viewport width with different orientation, picture tag is the only way to do it."),(0,c.Y)("li",null,"with the predefined min-width in media query of source, we can also make dpr per viewport possible."),(0,c.Y)("li",null,"We can also define different crop in lieu of using a `picture`.")))),(0,c.Y)(f,null,` 70<Picture 71 alt={title} 72 config={config} 73 height="573" 74 src="https://hips.hearstapps.net/hmg-prod/images/kitchen-gear-awards-lead-image-1637619320.png" 75 title={title} 76 width="1146" 77/> 78 `),(0,c.Y)(l.default,{config:{breakpoints:[{spec:"xlg",params:{resize:"2048:*",crop:"16x9"}},{spec:["md:lg"],params:{resize:"1200:*",crop:"16x9"}},{spec:"sm",params:{resize:"768:*",crop:"4x3"}}]},alt:e,height:"573",src:"https://hips.hearstapps.net/hmg-prod/images/kitchen-gear-awards-lead-image-1637619320.png",title:e,width:"1146"}))}function j(){return(0,c.Y)(g,null,(0,c.Y)(m,null,"Responsive Image Reference"),(0,c.Y)("p",null,"Responsive Image is part of the responsive design -- allow web pages to alter their layout and appearance to suit different screen width, resolutions, etc."," ",(0,c.Y)("blockquote",null,"Responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction). -- from"," ",(0,c.Y)("a",{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"},"Responsive images"))),(0,c.Y)("p",null,"There are a few ways to render image in HTML, including CSS ",(0,c.Y)("code",null,"background-image"),",",(0,c.Y)("code",null,"img")," tag with ",(0,c.Y)("code",null,"src")," or ",(0,c.Y)("code",null,"srcset"),", ",(0,c.Y)("code",null,"picture")," tag with ",(0,c.Y)("code",null,"source")," tags, etc. To do responsive image, we normally use",(0,c.Y)("code",null,"img")," tag with ",(0,c.Y)("c
78ode",null,"srcset")," and ",(0,c.Y)("code",null,"sizes")," or ",(0,c.Y)("code",null,"picture"),"tag with ",(0,c.Y)("code",null,"source")," tags."),(0,c.Y)("p",null,"An example of using ",(0,c.Y)("code",null,"img")," tag with ",(0,c.Y)("code",null,"srcset")," and ",(0,c.Y)("code",null,"sizes")," for responsive image.",(0,c.Y)("pre",{className:"language-jsx"},(0,c.Y)("code",{className:"language-html"},` 79<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1000w" 80 sizes="(min-width: 600px) 50vw, 100vw" 81/> 82<img srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"/> 83 `)),"The ",(0,c.Y)("code",null,"w")," is a âwidth descriptorâ, which let the browser know how wide each resource is. The ",(0,c.Y)("code",null,"srcset")," can also take ",(0,c.Y)("code",null,"x"),", pixel density descriptor, to specifies the condition in which the correspoinding images resource should be used. The browsers will then load the resource that best matches the current context.",(0,c.Y)("code",null,"sizes")," takes a optional media query with a CSS length to tell the browser which lengths to use."),(0,c.Y)("p",null,"An example of using ",(0,c.Y)("code",null,"picture")," tag with ",(0,c.Y)("code",null,"source")," for responsive image.",(0,c.Y)("pre",{className:"language-jsx"}
83,(0,c.Y)("code",{className:"language-html"},` 84<picture> 85 <source srcset="small.jpg 1x, medium.jpg 2x" media="(min-width: 600px)" /> 86 <source srcset="large.jpg" media="(max-width: 600px)" /> 87 <img src="large.jpg"/> 88</picture> 89 `)),"The browser will go over the ",(0,c.Y)("code",null,"source")," and pick the first ",(0,c.Y)("code",null,"soruce")," tag with matched media query. Then render it. If no ",(0,c.Y)("code",null,"source")," tag is matched, the default ",(0,c.Y)("code",null,"img")," would be used."),(0,c.Y)("p",null,"The Next/Image is using ",(0,c.Y)("code",null,"img")," tag with ",(0,c.Y)("code",null,"srcset")," and ",(0,c.Y)("code",null,"sizes")," ","to help do the responsive image rendering. On top of it, Next/Image provide additional optimization of image rendering, including ",(0,c.Y)("b",null,"preload priority image"),", ",(0,c.Y)("b",null,"placeholder"),", ",(0,c.Y)("b",null,"lazyload"),",",(0,c.Y)("b",null,"optimized image format"),", ",(0,c.Y)("b",null,"caching")," etc."),(0,c.Y)("h3",null,"References"),(0,c.Y)("ul",null,(0,c.Y)("li",null,(0,c.Y)("a",{href:"https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary"},"Responsive images with 'srcset', 'sizes'")),(0,c.Y)("li",null,(0,c.Y)("a",{href:"https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/"},"A Guide to the Responsive Images Syntax in HTML")),(0,c.Y)("li",null,(0,c.Y)("a",{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"},"Responsive images")),(0,c.Y)("li",null,(0,c.Y)("a",{href:"https://cloudfour.com/thinks/responsive-images-101-definitions/"},"Responsive images 101")),(0,c.Y)("li",null,(0,c.Y)("a",{href:"https://observablehq.com/@eeeps/w-descriptors-and-sizes-under-the-hood"},"w descriptors and sizes: Under the hood"))))}var A=!0,R={name:"1v03bf2",styles:"padding:2rem"};function C(){return(0,c.Y)("main",{css:R},(0,c.Y)(s.A,null,(0,c.Y)("link",{href:"https://unpkg.com/[email protected]/build/style.css",rel:"stylesheet"}),(0,c.Y)("script",{defer:!0,src:"https://unpkg.com/[email protected]/components/prism-core.min.js"}),(0,c.Y)("script",{defer:!0,src:"https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js"})),(0,c.Y)(d,null,"Next Image Demo"),(0,c.Y)(Y,null),(0,c.Y)(w,null),(0,c.Y)(b,null),(0,c.Y)(v,null),(0,c.Y)(_,null),(0,c.Y)(I,null),(0,c.Y)(k,null),(0,c.Y)(j,null))}}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=18885)),_N_E=e.O()}]);
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.