https://imagekit.io/_next/static/chunks/5161-30f6bc6cf393e0a5.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="99cb4194-2b60-4ebb-bc16-f7bea30c1866",e._sentryDebugIdIdentifier="sentry-dbid-99cb4194-2b60-4ebb-bc16-f7bea30c1866")}catch(e){}}();"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5161],{11106:(e,t,i)=>{i.d(t,{FA:()=>l,Qy:()=>s,X9:()=>a,Zw:()=>r,oZ:()=>n});let s=700,r=7,n="85",a="300K",l="3,000"},18057:(e,t,i)=>{i.d(t,{E:()=>l});var s=i(37876);i(14232);var r=i(47137),n=i(23243);let a=(0,r.F)("inline-block whitespace-nowrap rounded-sm px-1 align-middle text-xs font-bold uppercase",{variants:{variant:{outline:"shadow-[inset_0_0_0_1px_currentColor]",subtle:""},colorScheme:{green:"",blue:"",purple:"",gray:""}},compoundVariants:[{variant:"outline",colorScheme:"green",class:"text-green-500"},{variant:"outline",colorScheme:"blue",class:"text-blue-500"},{variant:"outline",colorScheme:"purple",class:"text-purple-500"},{variant:"outline",colorScheme:"gray",class:"text-gray-500"},{variant:"subtle",colorScheme:"green",class:"bg-green-100 text-green-800"},{variant:"subtle",colorScheme:"blue",class:"bg-blue-100 text-blue-800"},{variant:"subtle",colorScheme:"purple",class:"bg-purple-100 text-purple-800"},{variant:"subtle",colorScheme:"gray",class:"bg-gray-100 text-gray-800"}],defaultVariants:{variant:"outline",colorScheme:"gray"}});function l(e){let{className:t,variant:i,colorScheme:r,...l}=e;return(0,s.jsx)("span",{className:(0,n.cn)(a({variant:i,colorScheme:r}),t),...l})}},66388:(e,t,i)=>{i.d(t,{O:()=>a});var s=i(37876),r=i(14232),n=i(23243);let a=r.forwardRef(function(e,t){let{className:i,disabled:r,width:a,height:l,title:c,style:o,children:d,...m}=e,h=i||"",g=/\bsecondary\b/.test(h),u=/\bgetStartedCTA\b/.test(h),p=/\bgetStartedReverse\b/.test(h);return(0,s.jsx)("button",{ref:t,type:"button",disabled:r,title:c,className:(0,n.cn)("cursor-pointer whitespace-nowrap rounded-pill border-none px-[30px] py-2.5 text-sm font-bold tracking-wide outline-none",!g&&!p&&"bg-[#145fdd] text-white",r&&"bg-[#8e9196]","Login"===c&&"max-md:mb-2.5",!g&&!u&&!p&&"h-10",g&&"bg-[#d4e6fc] font-semibold text-[#145fdd]",(u||p)&&"h-[50px] px-10 uppercase",p&&"bg-[#f3f8ff] text-[#0450d5] hover:bg-[#f8f8f8]",i),style:{width:a||void 0,height:l||(g?"auto":void 0),...o},...m,children:d})})},67614:(e,t,i)=>{i.d(t,{F6:()=>o.F6,G6:()=>o.G6,OB:()=>o.OB,Rt:()=>g,XI:()=>d,mQ:()=>h,mc:()=>o.mc,uE:()=>m});var s=i(37876);i(14232);var r=i(72497),n=i(49038),a=i(23243),l=i(8638),c=i(55684),o=i(57134);function d(e){let{className:t,children:i,...r}=e;return(0,s.jsx)("table",{className:(0,a.cn)("ik-markdown-table",t),...r,children:i})}let m=e=>{let{title:t}=e;return(0,s.jsx)(o.F6,{heroSection:!0,bg:"medium",children:(0,s.jsxs)(o.mc,{children:[(0,s.jsx)(o.OB,{children:t}),(0,s.jsx)(o.G6,{children:(0,s.jsx)(r.N_,{style:{color:l.K.LINK_COLOR},to:"/glossary",children:(0,s.jsxs)("span",{className:"flex items-center gap-2",children:[(0,s.jsx)(n._Jj,{}),(0,s.jsx)("span",{children:"Glossary"})]})})})]})})},h=e=>{let{wideTable:t,children:i}=e;return(0,s.jsx)(c.r,{children:(0,s.jsx)("div",{className:"markdown-body ".concat(t?"wide-table":""),children:i})})},g=e=>{if(e.currentTarget){var t=e.currentTarget.getAttribute("href");t&&document.getElementById(t.slice(1))&&document.getElementById(t.slice(1)).scrollIntoView()}}},73782:(e,t,i)=>{i.d(t,{SH:()=>a,Wx:()=>o,rA:()=>c,y$:()=>l});var s=i(37876),r=i(23243);let n={pending:"border-ik-blue-600 text-ik-blue-600",processing:"border-yellow-600 text-yellow-600",completed:"border-green-500 text-green-500",error:"border-red-500 text-red-500"};function a(e){let{state:t,children:i,className:a}=e;return(0,s.jsx)("span",{className:(0,r.cn)("inline-flex items-center rounded-[3px] border bg-transparent px-3 py-0.5 text-[0.8rem] font-medium",n[t]||n.pending,a),children:i})}function l(e){let{className:t,size:i="sm"}=e;return(0,s.jsx)("span",{className:(0,r.cn)("inline-block animate-spin rounded-full border border-current border-t-transparent","sm"===i?"h-4 w-4 border-2":"h-2 w-2",t),"aria-hidden":!0})}function c(e){let{className:t,children:i,as:n="button",...a}=e;return(0,s.jsx)(n,{type:"button"===n?"button":void 0,className:(0,r.cn)("float-right flex w-max cursor-pointer items-center bg-ik-blue-500 px-7 py-4 text-ik-gray-50",t),...a,children:i})}function o(e){let{className:t,...i}=e;return(0,s.jsx)("select",{className:(0,r.cn)("h-7 rounded border border-ik-gray-300 bg-white px-2 text-xs text-ik-gray-800 outline-none focus:border-ik-blue-600",t),...i})}},85161:(e,t,i)=>{i.d(t,{$1:()=>M,AM:()=>S,Ai:()=>E,DB:()=>K,DG:()=>_,DR:()=>L,Dv:()=>T,F4:()=>U,F6:()=>g.F6,Fd:()=>R,G6:()=>g.G6,Gd:()=>J,H2:()=>N,J0:()=>g.J0,NN:()=>H,OB:()=>g.OB,R2:()=>g.R2,UC:()=>g.UC,WY:()=>ee,XI:()=>y.XI,XZ:()=>C,_b:()=>Y,au:()=>Z,cG:()=>W,e8:()=>D,gf:()=>w,hE:()=>g.hE,hM:()=>z,hp:()=>I,im:()=>

1O,jD:()=>A,kr:()=>Q,lX:()=>q,mQ:()=>y.mQ,mc:()=>g.mc,nB:()=>et,py:()=>$,qs:()=>ei,tE:()=>G,tt:()=>k,wy:()=>F,yg:()=>P});var s=i(37876),r=i(72497),n=i(19250),a=i.n(n),l=i(14232),c=i(18847),o=i.n(c),d=i(29374),m=i(80420),h=i(23243),g=i(57134),u=i(49038),p=i(24146),x=i(74227),b=i(18057),f=i(11106),v=i(8638),j=i(73782),y=i(67614);i(66388);let w=o()(()=>Promise.all([i.e(4196),i.e(713),i.e(7504),i.e(3308),i.e(3142)]).then(i.bind(i,93142)).then(e=>e.ImageCarousel),{loadableGenerated:{webpack:()=>[93142]},ssr:!1}),k=o()(()=>Promise.all([i.e(4196),i.e(713),i.e(7504),i.e(3308),i.e(3142)]).then(i.bind(i,93142)).then(e=>e.TestimonialCarouselWithCaseStudies),{loadableGenerated:{webpack:()=>[93142]},ssr:!1}),N=o()(()=>Promise.all([i.e(713),i.e(3308),i.e(4020)]).then(i.bind(i,54020)).then(e=>e.CustomerLogos),{loadableGenerated:{webpack:()=>[54020]}}),S=o()(()=>Promise.all([i.e(713),i.e(3308),i.e(4020)]).then(i.bind(i,54020)).then(e=>e.CaseSudies),{loadableGenerated:{webpack:()=>[54020]}}),I=o()(()=>Promise.all([i.e(9942),i.e(2710),i.e(3302),i.e(7143),i.e(1004)]).then(i.bind(i,31004)).then(e=>e.SDK),{loadableGenerated:{webpack:()=>[31004]}}),E=o()(()=>i.e(2764).then(i.bind(i,32764)).then(e=>e.GuideLastUpdateDate),{loadableGenerated:{webpack:()=>[32764]}}),C=(0,s.jsx)(p.G3G,{style:{width:18,height:18,color:"#0450D5"}}),F=(0,s.jsx)(p.LyW,{style:{width:18,height:18,color:"#f44336"}}),_=(0,s.jsx)(x.uLf,{style:{width:18,height:18,color:"#e27e0a"}});function A(e){let{className:t,children:i,...r}=e;return(0,s.jsx)("div",{className:(0,h.cn)("hidden md:block",t),...r,children:i})}function z(e){let{className:t,children:i,...r}=e;return(0,s.jsx)("div",{className:(0,h.cn)("md:hidden",t),...r,children:i})}function G(e){let{className:t,color:i,children:r,...n}=e;return(0,s.jsx)("h5",{className:(0,h.cn)("text-[20px] uppercase leading-3 tracking-[1.2px]","yellow"===i?"text-ik-yellow":"text-ik-blue-600",t),...n,children:r})}function L(e){let{className:t,children:i,...r}=e;return(0,s.jsx)("div",{className:(0,h.cn)("mb-3.5 text-center font-heading text-base font-medium leading-[1.5] text-ik-gray-700 md:text-2xl",t),...r,children:i})}let D=e=>{let{initialValue:t="",disabled:i=!1,placeHolder:r="Enter the value",CTALabel:n="Submit",onSubmit:a,errorMsg:c,onInputChange:o}=e,[d,h]=(0,l.useState)(t);return(0,l.useEffect)(()=>{h(t)},[t]),(0,s.jsxs)("form",{onSubmit:e=>{e.preventDefault(),a&&a(d)},children:[(0,s.jsxs)("div",{className:"flex flex-col items-stretch gap-4 md:flex-row md:items-center",children:[(0,s.jsx)("input",{className:"ik-input",placeholder:r,value:d,onChange:e=>{h(e.target.value),o&&"function"==typeof o&&o(e.target.value)}}),(0,s.jsxs)(m.$,{type:"submit",size:"default",disabled:i,className:"relative rounded",children:[i&&(0,s.jsx)(j.y$,{className:"absolute"}),(0,s.jsx)("span",{className:i?"invisible":void 0,children:n})]})]}),c&&(0,s.jsx)("div",{className:"py-2.5 text-sm text-red-600",children:c})]})},M=()=>(0,s.jsxs)("div",{className:"hidden",children:[(0,s.jsx)("img",{style:{position:"absolute",top:100,right:-250,zIndex:-1},src:"https://ik.imgkit.net/ikmedia/website-assets/oval-bg_dnn8jSHS7h.svg"}),(0,s.jsx)("img",{style:{position:"absolute",top:417,left:-291,zIndex:-1},src:"https://ik.imgkit.net/ikmedia/website-assets/oval-bg_dnn8jSHS7h.svg"})]});function B(e){let{className:t,children:i,...r}=e;return(0,s.jsx)("div",{className:(0,h.cn)("text-center font-secondary text-lg leading-[1.6] text-ik-gray-700",t),...r,children:i})}let q=e=>{let{title:t="",variation:i=""}=e;return t?(0,s.jsx)(B,{children:t}):"with_countries"===i?(0,s.jsxs)(B,{children:["Trusted by ",f.X9," developers and ",f.FA,"+ high-growth businesses in ",f.oZ," countries"]}):"media_processing"===i?(0,s.jsxs)(B,{children:[f.FA,"+ companies process billions of media assets with ImageKit daily"]}):"developers"===i?(0,s.jsxs)(B,{children:[f.X9," developers and ",f.FA,"+ high-growth businesses trust ImageKit for their media processing needs"]}):(0,s.jsxs)(B,{children:[f.FA,"+ companies process billions of media assets every day with ImageKit"]})},O=e=>{let{showTitle:t=!0,customersPage:i=!1}=e;return(0,s.jsx)(B,{customersPage:i,children:!0===t&&(0,s.jsxs)("div",{className:"title",children:["Over ",(0,s.jsxs)("span",{className:"brandColor",children:[f.FA," businesses"]})," ","and ",(0,s.jsxs)("span",{className:"brandColor",children:[f.X9,"+ users"]})," trust ImageKit with their media assets on the web"]})})},R=e=>{let{theme:t="light"}=e;return(0,s.jsx)(r.N_,{to:"https://www.g2.com/products/imagekit/reviews",target:"_blank",rel:"noopener noreferrer",children:(0,s.jsxs)("div",{className:(0,h.cn)("ik-g2-rating","dark"===t?"theme-dark":"theme-light"),children:[(0,s.jsxs)("div",{className:"g2-logo-container",children:[(0,s.jsx)("img",{className:"g2-logo",src:"https://ik.imagekit.io/ikmedia/website-2024/g2/[email protected]?updatedAt=1714196459754"}),(0,s.jsxs)("div",{className:"rating",children:[(0,s.jsx)(V,{rating:4.6}),(0,s.jsx)(A,{children:(0,s.jsxs)("div",{className:"rating-number",children:[4.6,"/5"]})})]})]}),(0,s.jsxs)("div",{className:"badges",children:[(0,s.jsx)("img",{src:"https://ik.imagekit.io/ikmedia/website-2024/g2/Leader1.svg?updatedAt=17141960700226"}),(0,s.jsx)("img",{src:"https://ik.imagekit.io/ikmedia/website-2024/g2/MostImplementable.svg?updatedAt=17141960270252"}),(0,s.jsx)("img",{src:"https://ik.imagekit.io/ikmedia/website-2024/g2/BestUsability.svg?updatedAt=17141960702393"})]})]})})},H=()=>(0,s.jsx)(A,{children:(0,s.jsx)(g.F6,{children:(0,s.jsx)(g.mc,{children:(0,s.jsxs)("div",{className:"ik-dam-lp-rating",children:[(0,s.jsxs)("div",{className:"text",children:[(0,s.jsxs)("div",{className:"item",children:[(0,s.jsx)("div",{className:"heading",children:"93%"}),(0,s.jsx)("div",{className:"sub-heading",children:"Users rate us as the easiest DAM to use"})]}),(0,s.jsxs)("div",{className:"item",children:[(0,s.jsx)("div",{className:"heading",children:"6"}),(0,s.jsx)("div",{className:"sub-heading",children:"Months or less to ROI"})]}),(0,s.jsxs)("div",{className:"item",children:[(0,s.jsx)("div",{className:"heading",children:"4.7"}),(0,s.jsx)("div",{className:"sub-heading",children:"Rated high on G2 DAM grid"})]})]}),(0,s.jsx)("div",{className:"g2-logo",children:(0,s.jsx)("img",{src:"https://ik.imagekit.io/ikmedia/website-2024/g2/Leader_summer2026.svg",alt:"G2 Leader badge"})})]})})})}),V=e=>{let{rating:t}=e;for(var i=[],r=1;r<=5;r++)t>=r?i.push((0,s.jsx)(u.gt3,{style:{width:16,color:"#ffc700"}},r)):t>=r-.5&&i.push((0,s.jsx)(u.gVl,{style:{width:16,color:"#ffc700"}},r));return(0,s.jsx)("div",{style:{display:"flex"},children:i})},P=e=>{let{children:t}=e;var i={"hero-section":!1,content:!1,"content-end":!1,"hide-toc":!1};let[r,n]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{var e=[];for(let t=0;t<=1;t+=.01)e.push(t);var t=new IntersectionObserver(function(e){(e=e.reverse()).forEac

1h(e=>{i[""!=e.target.id?e.target.id:e.target.className]=e.isIntersecting}),i["hero-section"]||!i.content||i["content-end"]||i["hide-toc"]?n(!1):n(!0)},{root:null,threshold:e});t.observe(document.getElementById("hero-section")),t.observe(document.getElementById("content")),t.observe(document.getElementById("content-end")),document.querySelectorAll(".hide-toc").forEach(e=>{t.observe(e)})},[]),(0,s.jsx)("div",{className:(0,h.cn)("ik-right-floating",r&&"visible"),children:t})},K=e=>{let{items:t}=e;var i={"hero-section":!1,content:!1,"content-end":!1,"hide-toc":!1};let[r,n]=(0,l.useState)(!1),[c,o]=(0,l.useState)("");return(0,l.useEffect)(()=>{var e=[];for(let t=0;t<=1;t+=.01)e.push(t);var t=new IntersectionObserver(function(e){(e=e.reverse()).forEach(e=>{i[""!=e.target.id?e.target.id:e.target.className]=e.isIntersecting;var t=e.target.getAttribute("data-title");t&&e.isIntersecting&&o(a().slug(t))}),i["hero-section"]||!i.content||i["content-end"]||i["hide-toc"]?n(!1):n(!0)},{root:null,threshold:e});t.observe(document.getElementById("hero-section")),t.observe(document.getElementById("content")),t.observe(document.getElementById("content-end")),document.querySelectorAll(".hide-toc").forEach(e=>{t.observe(e)}),document.querySelectorAll("section[data-title]").forEach(e=>{t.observe(e)})},[]),(0,s.jsxs)("div",{className:(0,h.cn)("ik-toc",r&&"visible"),children:[(0,s.jsx)("div",{className:"title",children:"Table of Contents"}),(0,s.jsx)("ul",{children:t.map((e,t)=>(0,s.jsx)("li",{children:(0,s.jsx)("a",{href:"#".concat(a().slug(e.title)),onClick:e=>{scrollIntoView(e)},className:"".concat(c===a().slug(e.title)?"highlighted":""),children:e.label})},t))})]})},W=e=>(0,s.jsx)("div",{children:(0,s.jsx)("hr",{style:{border:"0.5px solid ".concat("black"!==e.type&&e.type?v.K.WHITE_DIVIDER:"#617597")}})});function T(e){let{className:t,homePage:i,children:r,...n}=e;return(0,s.jsx)("span",{className:(0,h.cn)("inline p-[3px]",i?"rounded-[5px] bg-[#D2E7FD] text-sm text-[#2c93fa] md:text-[length:inherit]":"rounded-[3px] bg-[rgba(245,80,105,0.2)] text-ik-red",t),...n,children:r})}let X=e=>{let{importance:t}=e;return"High"===t?(0,s.jsx)(b.E,{variant:"subtle",colorScheme:"green",className:"ml-5 leading-[2]",children:"High Importance"}):"Medium"===t?(0,s.jsx)(b.E,{variant:"subtle",colorScheme:"purple",className:"ml-5 leading-[2]",children:"Medium Importance"}):"Low"===t?(0,s.jsx)(b.E,{variant:"subtle",colorScheme:"gray",className:"ml-5 leading-[2]",children:"Low Importance"}):null},U=()=>{let e=[{title:"Compress images",difficulty:"Medium",importance:"High",description:(0,s.jsxs)(s.Fragment,{children:["Choosing the correct compression settings allows for a balance between image quality and file size, which speeds up image loading without compromising visual clarity. ",(0,s.jsx)("a",{href:"#chapter-5---compress-images",children:"Learn how to compress images"}),"."]}),completed:!1},{title:"Adopt WebP/AVIF",difficulty:"Medium",importance:"High",description:(0,s.jsxs)(s.Fragment,{children:["Modern image formats like WebP or AVIF can significantly reduce file size while maintaining high-quality visuals, leading to faster loading times.",(0,s.jsx)("br",{}),"Learn ",(0,s.jsx)("a",{href:"#chapter-6---optimizing-image-format",children:"how to deliver an image in the best possible format"}),"."]}),completed:!1},{title:"Correctly resize images on server-side",difficulty:"Medium",importance:"High",description:(0,s.jsxs)(s.Fragment,{children:["Serving images at the correct dimensions reduces unnecessary data overhead, enhancing speed and efficiency in image delivery.",(0,s.jsx)("br",{}),(0,s.jsx)("a",{href:"#chapter-7---resizing-images-to-fit-the-layout",children:"Resizing images on server-side"})," • ",(0,s.jsx)("a",{href:"#how-to-resize-images-on-the-fly",children:"On the fly resizing"})]}),completed:!1},{title:"Utilize a CDN",difficulty:"Medium",importance:"High",description:(0,s.jsxs)(s.Fragment,{children:["A ",(0,s.jsx)("a",{href:"#chapter-9---using-cdn-for-fast-download",children:"Content Delivery Network (CDN)"})," enhances image delivery by serving them from a server closest to the user. This proximity significantly reduces load times and improves response rates, optimizing the user experience across different global locations."]}),completed:!1},{title:"Implement responsive images",difficulty:"High",importance:"Medium",description:(0,s.jsxs)(s.Fragment,{children:["Ensure that your application ",(0,s.jsx)("a",{href:"#how-to-load-the-correct-image-in-your-application",children:"loads the right image"}),". Consider implementing responsive images using srcset and size attributes."]}),completed:!1},{title:"Replace GIFs with video",difficulty:"Medium",importance:"Medium",description:(0,s.jsxs)(s.Fragment,{children:["Replacing ",(0,s.jsx)("a",{href:"#how-to-convert-gif-to-video-or-animated-webp",children:"GIFs with videos"})," or animated WebP reduces file size and load times while saving bandwidth costs."]}),completed:!1},{title:"Set image dimensions",difficulty:"Low",importance:"Medium",description:"Specifying width and height on images prevents layout shifts during loading, improving user experience and Cumulative Layout Shift scores.",completed:!1},{title:"Use SVGs for icons",difficulty:"Low",importance:"Medium",description:"Vector images like SVGs are ideal for logos and icons as they scale without losing quality, are smaller in file size, and render sharply on all screen resolutions.",completed:!1},{title:"Implement lazy loading",difficulty:"Low",importance:"Medium",description:(0,s.jsxs)(s.Fragment,{children:["Lazy loading defers loading of images until they are in or near the viewport, reducing initial load time and saving bandwidth costs. ",(0,s.jsx)("a",{href:"#chapter-8---lazy-loading-images",children:"Learn more."})]}),completed:!1},{title:"Use preconnect and priority hints",difficulty:"Low",importance:"Low",description:(0,s.jsxs)(s.Fragment,{children:["Pre

1connect hints enable the browser to establish early connections to domains hosting images, which accelerates image loading when accessed by users. Additionally, using ",(0,s.jsx)("a",{href:"https://web.dev/articles/fetch-priority",target:"_blank",children:"priority hint"})," to prioritize images at the top of the page can enhance the Largest Contentful Paint (LCP), significantly improving the perceived load speed of the page."]}),completed:!1},{title:"Monitor relevant Core Web Vitals",difficulty:"Medium",importance:"High",description:(0,s.jsxs)(s.Fragment,{children:["Tracking relevant ",(0,s.jsx)("a",{href:"#chapter-3---core-web-vitals-for-image-performance",children:"Core Web Vitals"})," helps identify areas for improvement, ensuring optimal user experience and SEO rankings."]}),completed:!1}],[t,i]=(0,l.useState)(e);return(0,l.useEffect)(()=>{{let e=localStorage.getItem("taskCompletionStatus"),t=e?JSON.parse(e):{};i(e=>e.map(e=>({...e,completed:!!t[e.title]})))}},[]),(0,l.useEffect)(()=>{let e=t.reduce((e,t)=>(e[t.title]=t.completed,e),{});localStorage.setItem("taskCompletionStatus",JSON.stringify(e))},[t]),(0,s.jsx)(s.Fragment,{children:t.map((e,r)=>(0,s.jsxs)("div",{className:"ik-image-optimization-checklist",children:[(0,s.jsx)("div",{className:"checkbox",children:(0,s.jsx)("input",{type:"checkbox",id:"checkbox-".concat(r),checked:e.completed,className:"h-5 w-5 cursor-pointer accent-ik-blue-600",onChange:()=>{var s;return s=e.title,void i(t.map(e=>e.title===s?{...e,completed:!e.completed}:e))}})}),(0,s.jsxs)("div",{className:"content",children:[(0,s.jsx)("div",{className:"title",children:(0,s.jsx)("label",{htmlFor:"checkbox-".concat(r),children:(0,s.jsxs)("h3",{children:[e.title,(0,s.jsx)(X,{importance:e.importance})]})})}),e.description&&(0,s.jsx)("div",{className:"description",children:e.description})]})]},r))})},J=()=>(0,s.jsx)("div",{children:(0,s.jsx)("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:"20px",fontSize:14,textAlign:"center"},children:[{url:"https://ik.imagekit.io/ikmedia/example_image.jpg?tr=f-jpg,q-100",quality:100,size:"1.2 MB"},{url:"https://ik.imagekit.io/ikmedia/example_image.jpg?tr=f-jpg,q-80",quality:80,size:"162KB"},{url:"https://ik.imagekit.io/ikmedia/example_image.jpg?tr=f-jpg,q-60",quality:60,size:"93KB"}].map(e=>{let{url:t,quality:i,size:r}=e;return(0,s.jsxs)("div",{children:[(0,s.jsx)("img",{src:t,alt:"Image with quality ".concat(i),style:{width:"100%"}}),(0,s.jsxs)("p",{children:["Quality: ",i,", File Size: ",r,(0,s.jsx)("br",{}),(0,s.jsx)("a",{href:t,target:"_blank",children:"Open Image"})]})]},i)})})});function Q(e){let{className:t,children:i,...n}=e;return(0,s.jsx)(r.N_,{className:(0,h.cn)("mt-2 inline-flex items-center gap-1.5 whitespace-nowrap text-base font-medium text-ik-blue-600 no-underline hover:underline after:content-['→']",t),...n,children:i})}let $=e=>{let{url:t}=e;return(0,s.jsxs)("div",{style:{width:"100%",maxWidth:"100%"},children:[(0,s.jsx)(r.eF,{src:"https://js.storylane.io/js/v1/storylane.js"}),(0,s.jsx)("div",{className:"sl-embed",style:{position:"relative",paddingBottom:"calc(56.46% + 27px)",width:"100%",height:"0",transform:"scale(1)"},children:(0,s.jsx)("iframe",{className:"sl-demo",src:t,name:"sl-embed",allow:"fullscreen; camera; microphone",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",border:"1px solid rgba(63, 95, 172, 0.35)",boxShadow:"0px 0px 18px rgba(26, 19, 72, 0.15)",borderRadius:"10px",boxSizing:"border-box"}})})]})},Z=e=>{var t,i;let{faqItems:r,faqCategories:n,answerMargin:a="16px 0 0"}=e,[c,o]=(0,l.useState)(null!=(i=null==n||null==(t=n[0])?void 0:t.category)?i:"");return(0,s.jsxs)("div",{className:"ik-faq-section",children:[c&&(0,s.jsx)("div",{className:"category-container",children:n.map((e,t)=>(0,s.jsx)("div",{className:"item ".concat(c===e.category?"active":""),onClick:()=>{o(e.category)},children:e.label},t))}),(0,s.jsx)("div",{className:"faqs",children:(0,s.jsx)(d.nD,{type:"multiple",className:"w-full",children:r.filter(e=>!c||e.category===c).map((e,t)=>(0,s.jsxs)(d.As,{value:"item-".concat(t),children:[(0,s.jsx)(d.$m,{className:"px-4 py-2 hover:bg-black/[0.04]",children:(0,s.jsx)("div",{className:"question flex-1 text-left",children:(0,s.jsx)("b",{children:e.question})})}),(0,s.jsx)(d.ub,{children:(0,s.jsx)("div",{className:"answer",style:{margin:a},children:e.answer})})]},"".concat(e.question,"-").concat(t)))})})]})},Y=async e=>{try{e.current&&e.current.paused&&await e.current.play()}catch(e){}},ee=e=>{try{e.current&&e.current.pause()}catch(e){}};function et(e){let{className:t,children:i,...r}=e;return(0,s.jsx)("div",{className:(0,h.cn)("ik-product-card-wrapper",t),...r,children:i})}function ei(e){let{className:t,children:i,...r}=e;return(0,s.jsx)("div",{className:(0,h.cn)("ik-program-features",t),...r,children:i})}}}]);