1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i=(new e.Error).stack;i&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[i]="bd73a4d2-4de1-400e-8467-f277487ef95e",e._sentryDebugIdIdentifier="sentry-dbid-bd73a4d2-4de1-400e-8467-f277487ef95e")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3592],{1612:(e,i,t)=>{"use strict";t.d(i,{R:()=>o});var n=t(91668),r=t(67614),s=t(13137);function o(e){return(0,n.R)({...e,MarkdownBody:r.mQ,Table:r.XI,table:r.XI,Collapsible:s.Nt,Figure:s.Dn,FooterText:s.$b})}},13137:(e,i,t)=>{"use strict";t.d(i,{$b:()=>v,Dn:()=>R,Nt:()=>k,T_:()=>L});var n=t(37876),r=t(14232),s=t(95062),o=t.n(s),a=t(18847),d=t.n(a),l=t(18480),c=t(53951),h=t(91668),p=t(80807),m=t(55684),u=t(67614),g=t(73813);t(8312);var x=t(19250),f=t.n(x),j=t(95580);let w=d()(()=>Promise.all([t.e(2446),t.e(3427)]).then(t.bind(t,3427)).then(e=>e.CodeSnippet),{loadableGenerated:{webpack:()=>[3427]},ssr:!0}),b=e=>{let{size:i,children:t,collapsed:r,updateCollapseState:s}=e,o=f().slug(t);return(0,n.jsxs)(i,{children:[(0,n.jsx)("a",{id:o,href:"#".concat(o),onClick:e=>{(0,u.Rt)(e)},children:(0,n.jsx)(p.bss,{size:"20"})}),t,void 0!==r&&(0,n.jsxs)("span",{className:"expand-control",onClick:()=>{s&&s(r=!r)},children:[r&&(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(p.j6J,{})}),!r&&(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(p.ZsL,{})})]})]})},y=r.createContext(null);function v(e){let{children:i}=e,t=r.useContext(y);return(0,r.useEffect)(()=>{t&&i&&t(i)},[i,t]),null}let k=e=>{let{size:i,headingText:t,children:s,collapsed:o=!0}=e,[a,d]=(0,r.useState)(o);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(b,{size:i,collapsed:a,updateCollapseState:e=>{d(e)},children:t}),!a&&(0,n.jsx)(n.Fragment,{children:s})]})},R=e=>(0,n.jsxs)("figure",{style:{textAlign:"center"},children:[(0,n.jsx)(g.A,{children:(0,n.jsx)("img",{src:e.src,style:{maxWidth:"100%",outline:"none",boxShadow:"0 2px 4px 0 rgba(24,35,80,0.08), 0 4px 12px 0 rgba(66,68,80,0.15)"}})}),(0,n.jsxs)("figcaption",{children:[e.caption,e.referenceLink&&(0,n.jsx)("a",{href:e.referenceLink,target:"_blank",children:"Reference"})]})]}),_=e=>{let i=e.alt&&e.alt.includes(";video"),t=i&&e.alt.includes(";controls"),[s,o]=(0,r.useState)(!1),a=e.alt&&e.alt.replace(";video","").replace(";controls","");return((0,r.useEffect)(()=>{o(!0)},[]),i)?(0,n.jsx)(n.Fragment,{children:s&&(0,n.jsxs)("figure",{children:[(0,n.jsx)("video",{...e,controls:t,autoPlay:!t,playsInline:!t,muted:!t,loop:!t,style:{maxWidth:"100%",outline:"none",boxShadow:"0 2px 4px 0 rgba(24,35,80,0.08), 0 4px 12px 0 rgba(66,68,80,0.15)"}}),a&&(0,n.jsx)("figcaption",{children:a})]})}):(0,n.jsx)(n.Fragment,{children:s&&(0,n.jsxs)("figure",{style:{textAlign:"center"},children:[(0,n.jsx)(g.A,{children:(0,n.jsx)("img",{...e,style:{maxWidth:"100%",outline:"none",boxShadow:"0 2px 4px 0 rgba(24,35,80,0.08), 0 4px 12px 0 rgba(66,68,80,0.15)"}})}),a&&(0,n.jsx)("figcaption",{children:a})]})})},L=e=>{let{children:i}=e,[t,s]=(0,r.useState)("Free until youâre ready to upgrade to the Pro plan");return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(m.z,{}),(0,n.jsx)(j.A,{}),(0,n.jsx)(l.A,{spaceFromTop:"110px"}),(0,n.jsx)(y.Provider,{value:s,children:(0,n.jsx)(h.x,{components:{MarkdownBody:u.mQ,Collapsible:k,Figure:R,FooterText:v,h1:e=>(0,n.jsx)(b,{size:"h1",...e}),h2:e=>(0,n.jsx)(b,{size:"h2",...e}),h3:e=>(0,n.jsx)(b,{size:"h3",...e}),h4:e=>(0,n.jsx)(b,{size:"h4",...e}),h5:e=>(0,n.jsx)(b,{size:"h5",...e}),h6:e=>(0,n.jsx)(b,{size:"h6",...e}),pre:e=>{var i;return e?(e=null==(i=e.children)?void 0:i.props,(0,n.jsx)("div",{style:{marginBottom:"30px"},children:(0,n.jsx)(w,{unsetHeight:!0,items:[{language:e.className&&e.className.replace("language-","")||"",codeString:"\n"===e.children[e.children.length-1]?e.children.slice(0,-1):e.children,hideLineNumbers:!0}]})})):null},img:e=>(0,n.jsx)(_,{...e}),Table:e=>(0,n.jsx)(u.XI,{...e}),table:e=>(0,n.jsx)(u.XI,{...e})},children:(0,n.jsx)("div",{className:"main-content",children:i})})}),(0,n.jsx)(c.A,{gettingStartedText:t})]})};L.propTypes={children:o().node.isRequired}},19810:(e,i,t)=>{"use strict";t.d(i,{A:()=>s});var n=t(18847),r=t.n(n);let s=r()(()=>Promise.all([t.e(3629),t.e(1593),t.e(2446),t.e(5198),t.e(5965)]).then(t.bind(t,75965)),{loadableGenerated:{webpack:()=>[75965]},ssr:!0});r()(()=>Promise.all([t.e(3629),t.e(1593),t.e(2446),t.e(5198),t.e(5965)]).then(t.bind(t,75965)).then(e=>
1e.FeatureSpotlight),{loadableGenerated:{webpack:()=>[75965]},ssr:!0})},40537:(e,i,t)=>{"use strict";t.d(i,{m:()=>o});var n=t(37876),r=t(14232),s=t(85161);let o=e=>{let{imageUrl:i,ImageWidth:t}=e,[o,a]=(0,r.useState)(1),[d,l]=(0,r.useState)(""),[c,h]=(0,r.useState)("");return(0,r.useEffect)(()=>{a(window.devicePixelRatio),l("".concat(i,"?tr=w-").concat(t,",q-90")),1===o?h(d):h("".concat(i,"?tr=w-").concat(t,",q-50,dpr-").concat(Math.ceil(o)))}),(0,n.jsx)(s.F6,{bg:"medium",children:(0,n.jsxs)(s.mc,{children:[(0,n.jsxs)(s.R2,{children:["Both images are ",(0,n.jsxs)("strong",{children:[t,"px"]})," wide but the second image is optimized for high density display. Your current device pixel ratio is ",(0,n.jsx)("strong",{children:o}),"."]}),(0,n.jsx)(s.UC,{children:(0,n.jsxs)("div",{className:"flex flex-wrap justify-evenly [&_img]:mb-5 [&_img]:max-w-full",children:[(0,n.jsx)("div",{children:(0,n.jsx)("img",{style:{width:t},src:d,alt:""})}),(0,n.jsx)("div",{children:(0,n.jsx)("img",{style:{width:t},src:c,alt:""})})]})})]})})}},43356:(e,i,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/how-to-show-high-quality-e-commerce-product-images",function(){return t(50431)}])},50431:(e,i,t)=>{"use strict";t.r(i),t.d(i,{default:()=>g,optimization:()=>p});var n=t(37876),r=t(1612),s=t(13137),o=t(42432),a=t(85161),d=t(40537),l=t(19810),c=t(35571),h=t(43308);let p=[{title:"",items:[{title:{strong:"WebP and animated Webp support",rest:"Deliver images in WebP format on supported devices without changing image URLs."},graphic:{imageUrl:"https://ik.imgkit.net/ikmedia/WebP-and-animated-Webp-support_ujNe-i_sQ.png?tr=w-500,h-500,dpr-2,fo-left",highlight:"",width:500,hideDisplayUrl:!0,docLabel:"Learn more",docLink:"https://docs.imagekit.io/features/image-optimization/automatic-image-format-conversion",altText:"WebP and animated Webp support",imageHasShadow:!0}},{title:{strong:"Optimal Format Selection",rest:"ImageKit evaluates multiple formats to pick the smallest file based on the image content & device."},graphic:{imageUrl:"https://ik.imgkit.net/ikmedia/Optimal-Format-Selection_vCxW_0_OzP.png?tr=w-500,h-500,dpr-2,fo-left",highlight:"",hideDisplayUrl:!0,width:500,docLabel:"Learn more",docLink:"https://docs.imagekit.io/features/image-optimization/automatic-image-format-conversion",altText:"Optimal Format Selection",imageHasShadow:!0}},{title:{strong:"Explicit format conversion",rest:"Control the output format manually by adding the corresponding parameter."},graphic:{imageUrl:"https://ik.imgkit.net/ikmedia/plant.png?tr=w-500,h-500,dpr-2,fo-left,f-png",highlight:"f-png",hideDisplayUrl:!1,width:500,docLabel:"Learn more",docLink:"https://docs.imagekit.io/features/image-optimization/automatic-image-format-conversion",altText:"Explicit format conversion",imageHasShadow:!0}}]}],m=function(e){let{children:i,...t}=e;return(0,n.jsx)(s.T_,{...t,children:i})};function u(e){let i={a:"a",blockquote:"blockquote",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Figure:t,FooterText:s}=i;return t||x("Figure",!0),s||x("FooterText",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.A,{title:"How to show high-quality e-commerce product images",description:"Simple techniques you can use today to show high-quality e-commerce product images that load quickly."}),"\n",(0,n.jsx)(a.F6,{bg:"medium",children:(0,n.jsx)(a.mc,{children:(0,n.jsx)(a.OB,{as:"h1",children:(0,n.jsxs)(i.p,{children:["How to show high-quality ",(0,n.jsx)("br",{})," e-commerce product images"]})})})}),"\n",(0,n.jsx)(a.F6,{children:(0,n.jsxs)(a.mQ,{children:[(0,n.jsx)(i.p,{children:"The first thing shoppers want when they visit your website is to see the product images. It is your job to give them what they want and do it quickly. When you are able to do that, people will explore more products, click on them, and often buy."}),(0,n.jsx)(t,{src:"https://ik.imgkit.net/ikmedia/VMxIAJkw_2MMdhUDSv.jpeg",referenceLink:"https://www.bigcommerce.com/blog/optimize-images-for-web/#the-truth-about-image-optimization-speed-your-bottom-line"}),(0,n.jsx)(i.p,{children:"But showing images is not enough. We have to balance image quality and website loading speed. Here are three simple techniques to show crips & fast loading product images."}),(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Optimize for high pixel density displays"})," - On a device with DPR (device pixel ratio) 2, a 2x wide image with quality 50 will look better than a 1x wide image with quality 90. Despite being similar in terms of file-size, the DPR-optimized image will look crisp. That is
1what you want for your e-commerce."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Resize & optimize from high-resolution originals"})," - Magento, WordPress, Shopify â all of them don't provide the needed image compression controls that are essential for an e-commerce website. The compression is often very aggressive and results in low-quality product images on the website. It would be best if you always resize & optimize images using the original high-resolution version using an image CDN or an open-source tool like Thumbor."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Use optimal image format"})," - Serve images in the optimal format instead of the same format that you get from graphic designers. The optimal format will depend upon image content and browser format support. You should leverage this to your advantage and serve the best possible image."]}),"\n"]}),(0,n.jsx)(i.p,{children:"Let's understand them one by one with a few examples."}),(0,n.jsx)(i.h1,{children:"1. Optimize for high pixel density displays"}),(0,n.jsx)(i.p,{children:"Most of the mobile devices and high-end desktops have a high pixel density display. That means more pixels per inch. So these devices require high-resolution images to fill in those extra pixels."}),(0,n.jsx)(i.p,{children:"Considering you get a significant volume of users surfing your store using these devices, you must optimize images to ensure all products look at their best."}),(0,n.jsxs)(i.blockquote,{children:["\n",(0,n.jsx)(i.p,{children:"On a device with DPR (device pixel ratio) 2, a 2x wide image with quality 50 will look better than a 1x wide image with quality 90."}),"\n"]}),(0,n.jsx)(i.p,{children:"For example, consider an original image. This is 640px wide."}),(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:"https://ik.imgkit.net/ikmedia/women-dress-2.jpg\n"})}),(0,n.jsxs)(i.p,{children:["Let's get different variants by changing ",(0,n.jsx)(i.code,{children:"width"}),", ",(0,n.jsx)(i.code,{children:"dpr"}),", and ",(0,n.jsx)(i.code,{children:"quality"}),". We will be using ImageKit ",(0,n.jsx)(i.a,{href:"/features/image-transformation/",children:"URL-based image manipulation parameters"})," to achieve this."]}),(0,n.jsx)(i.h4,{children:"High-quality image with no DPR optimization"}),(0,n.jsxs)(i.p,{children:["The ",(0,n.jsx)(i.code,{children:"300px"})," wide variant with quality ",(0,n.jsx)(i.code,{children:"90"})," will be:"]}),(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:"https://ik.imgkit.net/ikmedia/women-dress-2.jpg?tr=w-300,q-90\n"})}),(0,n.jsx)(i.h4,{children:"Low-quality image with DPR optimization"}),(0,n.jsxs)(i.p,{children:["The ",(0,n.jsx)(i.code,{children:"300px"})," wide variant with ",(0,n.jsx)(i.code,{children:"dpr-2"})," and quality ",(0,n.jsx)(i.code,{children:"50"})," will be:"]}),(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:"https://ik.imgkit.net/ikmedia/women-dress-2.jpg?tr=w-300,dpr-2,q-50\n"})}),(0,n.jsx)(i.p,{children:"Now let's compare the two images based on your device's actual dpr value. If your current DPR value is above 1, the image on the right should look crisp."}),(0,n.jsxs)(i.blockquote,{children:["\n",(0,n.jsx)(i.p,{children:"Despite being similar in terms of file-size, the image on the right is looking crisp. That is
1what you want for your e-commerce."}),"\n"]})]})}),"\n",(0,n.jsx)(d.m,{ImageWidth:300,imageUrl:"https://ik.imgkit.net/ikmedia/women-dress-2.jpg"}),"\n",(0,n.jsx)(a.F6,{children:(0,n.jsxs)(a.mQ,{children:[(0,n.jsx)(i.h2,{children:"Solution"}),(0,n.jsxs)(i.p,{children:["These two techniques are commonly used when ",(0,n.jsx)(i.a,{href:"https://imagekit.io/responsive-images/",children:"implementing responsive images"}),":"]}),(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Using srcset (recommended)"}),(0,n.jsx)(i.br,{}),"\n","It is straightforward to serve different variants using responsive images dynamically. For example, we can provide multiple variants in srcset attributes and let the browser pick the most appropriate based on the actual device. You will have to change image URLs in the application for this to work."]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Using client-hints"}),(0,n.jsx)(i.br,{}),"\n","You can also use client-hints which provides an automatic way to implement responsive images. In this case, the browser will send the following headers with every image request:"]}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:"Width"}),"\n",(0,n.jsx)(i.li,{children:"DPR"}),"\n"]}),"\n",(0,n.jsx)(i.p,{children:"ImageKit will decide the final width of the image based on these headers. You don't have to change the image URL in the application for this to work."}),"\n"]}),"\n"]}),(0,n.jsx)(i.h3,{children:"Resources for further reading"}),(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://imagekit.io/responsive-images/",children:"Reference guide on responsive images"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://blog.imagekit.io/how-to-deliver-responsive-images-to-browsers-across-multiple-devices-30cfae17390e",children:"How to deliver responsive images across multiple devices"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"https://imagekit.io/blog/lighter-automatic-responsive-images-client-hints/",children:"Lighter And Automatic Responsive Images With Client Hints"})}),"\n"]})]})}),"\n",(0,n.jsx)(a.F6,{bg:"medium",children:(0,n.jsxs)(a.mc,{children:[(0,n.jsx)(a.hE,{children:(0,n.jsx)(i.p,{children:"Get free consultation for your store"})}),(0,n.jsx)(a.UC,{children:(0,n.jsx)(c.R,{})})]})}),"\n",(0,n.jsx)(a.F6,{children:(0,n.jsxs)(a.mQ,{children:[(0,n.jsx)(i.h1,{children:"2. Resize & optimize from high-resolution originals"}),(0,n.jsx)(i.p,{children:"In case your store is built using WordPress or Magento, there is a great chance that your images lose quality after uploading."}),(0,n.jsx)(i.p,{children:"There are tons of discussions in the Magento community on this topic. The same is true for WordPress and Shopify. It is tricky to get the right balance between image quality and file size."}),(0,n.jsx)(i.p,{children:(0,n.jsx)(i.img,{src:"https://ik.imgkit.net/ikmedia/magento-quality-issue_EA-cW9pWvB.png",alt:""})}),(0,n.jsx)(i.p,{children:(0,n.jsx)(i.img,{src:"https://ik.imgkit.net/ikmedia/magento-quality-issue-1_MdPdbMEAvg.png",alt:""})}),(0,n.jsx)(i.p,{children:(0,n.jsx)(i.img,{src:"https://ik.imgkit.net/ikmedia/magento-quality-issue-2_fs2VFBc7V.png",alt:""})}),(0,n.jsx)(i.p,{children:(0,n.jsx)(i.img,{src:"https://ik.imgkit.net/ikmedia/magento-quality-issue-3_T2DZKtfK9y.png",alt:""})}),(0,n.jsx)(i.h2,{children:"Solution"}),(0,n.jsxs)(i.blockquote,{children:["\n",(0,n.jsx)(i.p,{children:"The solution is to use an image CDN. For example, ImageKit.io lets you control quality, height, width & image format using URL friendly query parameters. This means you can easily control the compression settings and get the desired results in terms of image file size and visual quality."}),"\n"]}),(0,n.jsx)(i.p,{children:"For example, compare these two images. The one on the left is using the Magento platform' resizing, and the one on the right is using ImageKit.io's resizing. The image on the right looks crips."}),(0,n.jsx)(i.p,{children:(0,n.jsx)(i.img,{src:"https://ik.imgkit.net/ikmedia/in-build-vs-from-original_yRjngg3C8.png",alt:""})}),(0,n.jsx)(i.h4,{children:"Resizing images directly from the original image using ImageKit."}),(0,n.jsx)(i.p,{children:"In Magento, the original product image is accessible over the URL, as shown below."}
1),(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:"https://optimizedstore.imagekit.tech/pub/media/catalog/product/w/j/wj12-blue_main_1.jpg\n"})}),(0,n.jsxs)(i.p,{children:["Based on your website layout, let's say we need a ",(0,n.jsx)(i.code,{children:"240px"})," wide image for the product listing page. This can be done by adding a query param ",(0,n.jsx)(i.code,{children:"tr=w-240"})," in the image URL. You will need to edit the theme files to change these product images URLs."]}),(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:"https://optimizedstore.imagekit.tech/pub/media/catalog/product/w/j/wj12-blue_main_1.jpg?tr=w-240\n"})}),(0,n.jsx)(i.h1,{children:"3. Use optimal image format"}),(0,n.jsx)(i.p,{children:"The right format for a particular image can vary based on image content and user device. It could be JPG, WebP, or surprisingly PNG in few cases. A common mistake is to upload and deliver images in the same format that we get from graphic designers."}),(0,n.jsx)(i.p,{children:"To avoid this, ImageKit.io lets you use the same image URL in the application but automatically serve different image formats to different users. Here is how image optimization works in ImageKit.io:"})]})}),"\n",(0,n.jsx)(l.A,{features:p,startWithSolidBG:!0}),"\n",(0,n.jsx)(a.F6,{bg:"medium",children:(0,n.jsxs)(a.mc,{children:[(0,n.jsx)(a.hE,{children:(0,n.jsx)(i.p,{children:"Schedule a call with a media expert"})}),(0,n.jsx)(a.UC,{children:(0,n.jsx)(c.R,{})})]})}),"\n",(0,n.jsx)(a.F6,{children:(0,n.jsxs)(a.mc,{children:[(0,n.jsx)(a.hE,{children:(0,n.jsx)(i.p,{children:"Learn more from case studies"})}),(0,n.jsx)(a.R2,{children:(0,n.jsx)(i.p,{children:"How different organizations utilize ImageKit to optimize and transform images\nto deliver a great user experience"})}),(0,n.jsx)(a.UC,{children:(0,n.jsx)(a.AM,{customers:[h.Rn.SWIGGY,h.Rn.CURTSY,h.Rn.NYKAA,h.Rn.BIG_BASKET,h.Rn.BOOKMYSHOW,h.Rn.PURPLLE_COM],variant:"small"})})]})}),"\n",(0,n.jsx)(s,{children:"Integrate ImageKit with a few clicks"})]})}function g(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(m,{...e,children:(0,n.jsx)(u,{...e})})}function x(e,i){throw Error("Expected "+(i?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},78229:(e,i,t)=>{"use strict";t.d(i,{A:()=>g});var n=t(14232),r=t(95062),s=t.n(r);function o(){return(o=Object.assign||function(e){for(var i=1;i<arguments.length;i++){var t=arguments[i];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function a(e){if(void 0===e)throw ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var d=function(e){function i(){var i;return(i=e.call(this)||this).handleExpired=i.handleExpired.bind(a(i)),i.handleErrored=i.handleErrored.bind(a(i)),i.handleChange=i.handleChange.bind(a(i)),i.handleRecaptchaRef=i.handleRecaptchaRef.bind(a(i)),i}i.prototype=Object.create(e.prototype),i.prototype.constructor=i,i.__proto__=e;var t=i.prototype;return t.getValue=function(){return this.props.grecaptcha&&void 0!==this._widgetId?this.props.grecaptcha.getResponse(this._widgetId):null},t.getWidgetId=function(){return this.props.grecaptcha&&void 0!==this._widgetId?this._widgetId:null},t.execute=function(){var e=this.props.grecaptcha;if(e&&void 0!==this._widgetId)return e.execute(this._widgetId);this._executeRequested=!0},t.executeAsync=function(){var e=this;return new Promise(function(i,t){e.executionResolve=i,e.executionReject=t,e.execute()})},t.reset=function(){this.props.grecaptcha&&void 0!==this._widgetId&&this.props.grecaptcha.reset(this._widgetId)},t.handleExpired=function(){this.props.onExpired?this.props.onExpired():this.handleChange(null)},t.handleErrored=function(){this.props.onErrored&&this.props.onErrored(),this.executionReject&&(this.executionReject(),delete this.executionResolve,delete this.executionReject)},t.handleChange=function(e){this.props.onChange&&this.props.onChange(e),this.executionResolve&&(this.executionResolve(e),delete this.executionReject,delete this.executionResolve)},t.explicitRender=function(){if(this.props.grecaptcha&&this.props.grecaptcha.render&&void 0===this._widgetId){var e=document.createElement("div");this._widgetId=this.props.grecaptcha.render(e,{sitekey:this.props.sitekey,callback:this.handleChange,theme:this.props.theme,type:this.props.type,tabindex:this.props.tabindex,"expired-callback":this.handleExpired,"error-callback":this.handleErrored,size:this.props.size,stoken:this.props.stoken,hl:this.props.hl,badge:this.props.badge}),this.captcha.appendChild(e)}this._executeRequested&&this.props.grecaptcha&&void 0!==this._widgetId&&(this._executeRequested=!1,this.execute())},t.componentDidMount=function(){this.explicitRender()},t.componentDidUpdate=function(){this.explicitRender()},t.componentWillUnmount=function(){void 0!==this._widgetId&&(this.delayOfCaptchaIframeRemoving(),this.reset())},t.delayOfCaptchaIframeRemoving=function(){var e=document.createElement("div");for(document.body.appendChild(e),e.style.display="none";this.captcha.firstChild;)e.appendChild(this.captcha.firstChild);setTimeout(function(){document.body.removeChild(e)},5e3)},t.handleRecaptchaRef=function(e){this.captcha=e},t.render=function(){var e=this.props,i=(e.sitekey,e.onChange,e.theme,e.type,e.tabindex,e.onExpired,e.onErrored,e.size,e.stoken,e.grecaptcha,e.badge,e.hl,function(e,i){if(null==e)return{};var t,n,r={},s=Object.keys(e);for(n=0;n<s.length;n++)i.indexOf(t=s[n])>=0||(r[t]=e[t]);return r}(e,["sitekey","onChange","theme","type","tabindex","onExpired","onErrored","size","stoken","grecaptcha","badge","hl"]));return n.createElement("div",o({},i,{ref:this.handleRecaptchaRef}))},i}(n.Component);d.displayName="ReCAPTCHA",d.propTypes={sitekey:s().string.isRequired,onChange:s().func,grecaptcha:s().object,theme:s().oneOf(["dark","light"]),type:s().oneOf(["image","audio"]),tabindex:s().number,onExpired:s().func,onErrored:s().func,size:s().oneOf(["compact","normal","invisible"]),stoken:s().string,hl:s().string,badge:s().oneOf(["bottomright","bottomleft","inline"])}
1,d.defaultProps={onChange:function(){},theme:"light",type:"image",tabindex:0,size:"normal",badge:"bottomright"};var l=t(23520),c=t.n(l);function h(){return(h=Object.assign||function(e){for(var i=1;i<arguments.length;i++){var t=arguments[i];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var p={},m=0,u="onloadcallback";let g=(function(e,i){return i=i||{},function(t){var r=t.displayName||t.name||"Component",o=function(r){function s(e,i){var t;return(t=r.call(this,e,i)||this).state={},t.__scriptURL="",t}s.prototype=Object.create(r.prototype),s.prototype.constructor=s,s.__proto__=r;var o=s.prototype;return o.asyncScriptLoaderGetScriptLoaderID=function(){return this.__scriptLoaderID||(this.__scriptLoaderID="async-script-loader-"+m++),this.__scriptLoaderID},o.setupScriptURL=function(){return this.__scriptURL="function"==typeof e?e():e,this.__scriptURL},o.asyncScriptLoaderHandleLoad=function(e){var i=this;this.setState(e,function(){return i.props.asyncScriptOnLoad&&i.props.asyncScriptOnLoad(i.state)})},o.asyncScriptLoaderTriggerOnScriptLoaded=function(){var e=p[this.__scriptURL];if(!e||!e.loaded)throw Error("Script is not loaded.");for(var t in e.observers)e.observers[t](e);delete window[i.callbackName]},o.componentDidMount=function(){var e=this,t=this.setupScriptURL(),n=this.asyncScriptLoaderGetScriptLoaderID(),r=i,s=r.globalName,o=r.callbackName,a=r.scriptId;if(s&&void 0!==window[s]&&(p[t]={loaded:!0,observers:{}}),p[t]){var d=p[t];return d&&(d.loaded||d.errored)?void this.asyncScriptLoaderHandleLoad(d):void(d.observers[n]=function(i){return e.asyncScriptLoaderHandleLoad(i)})}var l={};l[n]=function(i){return e.asyncScriptLoaderHandleLoad(i)},p[t]={loaded:!1,observers:l};var c=document.createElement("script");for(var h in c.src=t,c.async=!0,i.attributes)c.setAttribute(h,i.attributes[h]);a&&(c.id=a);var m=function(e){if(p[t]){var i=p[t].observers;for(var n in i)e(i[n])&&delete i[n]}};o&&"undefined"!=typeof window&&(window[o]=function(){return e.asyncScriptLoaderTriggerOnScriptLoaded()}),c.onload=function(){var e=p[t];e&&(e.loaded=!0,m(function(i){return!o&&(i(e),!0)}))},c.onerror=function(){var e=p[t];e&&(e.errored=!0,m(function(i){return i(e),!0}))},document.body.appendChild(c)},o.componentWillUnmount=function(){var e=this.__scriptURL;if(!0===i.removeOnUnmount)for(var t=document.getElementsByTagName("script"),n=0;n<t.length;n+=1)t[n].src.indexOf(e)>-1&&t[n].parentNode&&t[n].parentNode.removeChild(t[n]);var r=p[e];r&&(delete r.observers[this.asyncScriptLoaderGetScriptLoaderID()],!0===i.removeOnUnmount&&delete p[e])},o.render=function(){var e=i.globalName,r=this.props,s=(r.asyncScriptOnLoad,r.forwardedRef),o=function(e,i){if(null==e)return{};var t,n,r={},s=Object.keys(e);for(n=0;n<s.length;n++)i.indexOf(t=s[n])>=0||(r[t]=e[t]);return r}(r,["asyncScriptOnLoad","forwardedRef"]);return e&&"undefined"!=typeof window&&(o[e]=void 0!==window[e]?window[e]:void 0),o.ref=s,(0,n.createElement)(t,o)},s}(n.Component),a=(0,n.forwardRef)(function(e,i){return(0,n.createElement)(o,h({},e,{forwardedRef:i}))});return a.displayName="AsyncScriptLoader("+r+")",a.propTypes={asyncScriptOnLoad:s().func},c()(a,t)}})(function(){return"https://"+(("undefined"!=typeof window&&window.recaptchaOptions||{}).useRecaptchaNet?"recaptcha.net":"www.google.com")+"/recaptcha/api.js?onload="+u+"&render=explicit"},{callbackName:u,globalName:"grecaptcha"})(d)}},e=>{e.O(0,[241,4938,3629,2517,8585,7177,9897,1163,7141,8511,2749,7654,2122,5008,7792,9091,1217,6919,5161,3308,2672,5571,636,6593,8792],()=>e(e.s=43356)),_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.