var l=Object.defineProperty,d=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var o=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var i=(a,n,s)=>n in a?l(a,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[n]=s,e=(a,n)=>{for(var s in n||(n={}))o.call(n,s)&&i(a,s,n[s]);if(p)for(var s of p(n))m.call(n,s)&&i(a,s,n[s]);return a},c=(a,n)=>d(a,N(n));var r=(a,n)=>{var s={};for(var t in a)o.call(a,t)&&n.indexOf(t)<0&&(s[t]=a[t]);if(a!=null&&p)for(var t of p(a))n.indexOf(t)<0&&m.call(a,t)&&(s[t]=a[t]);return s};const makeShortcode=a=>function(s){return console.warn("Component "+a+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",e({},s))},Image=makeShortcode("Image"),layoutProps={},MDXLayout="wrapper";function MDXContent(s){var t=s,{components:a}=t,n=r(t,["components"]);return mdx(MDXLayout,c(e(e({},layoutProps),n),{components:a,mdxType:"MDXLayout"}),mdx("h1",e({},{id:"introduction"}),mdx("a",e({parentName:"h1"},{href:"#introduction","aria-hidden":"true",tabIndex:-1}),mdx("span",e({parentName:"a"},{className:"icon icon-link"}))),"Introduction"),mdx("p",null,"The tailwind starter blog has out of the box support for ",mdx("a",e({parentName:"p"},{href:"https://nextjs.org/docs/api-reference/next/image"}),"Next.js's built-in image component")," and automatically swaps out default image tags in markdown or mdx documents to use the Image component provided."),mdx("h1",e({},{id:"usage"}),mdx("a",e({parentName:"h1"},{href:"#usage","aria-hidden":"true",tabIndex:-1}),mdx("span",e({parentName:"a"},{className:"icon icon-link"}))),"Usage"),mdx("p",null,"To use in a new page route / javascript file, simply import the image component and call it e.g."),mdx("pre",e({},{className:"language-js"}),mdx("code",e({parentName:"pre"},{className:"language-js"}),mdx("span",e({parentName:"code"},{className:"text-code-purple"}),"import")," ",mdx("span",e({parentName:"code"},{className:""}),mdx("span",e({parentName:"span"},{className:""}),"Image"))," ",mdx("span",e({parentName:"code"},{className:"text-code-purple"}),"from")," ",mdx("span",e({parentName:"code"},{className:"text-code-green"}),"'next/image'"),` `,mdx("span",e({parentName:"code"},{className:"text-code-purple"}),"function")," ",mdx("span",e({parentName:"code"},{className:"text-code-blue"}),mdx("span",e({parentName:"span"},{className:""}),"Home")),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"("),mdx("span",e({parentName:"code"},{className:"text-code-white"}),")")," ",mdx("span",e({parentName:"code"},{className:"text-code-white"}),"{"),` `,mdx("span",e({parentName:"code"},{className:"text-code-purple"}),"return")," ",mdx("span",e({parentName:"code"},{className:"text-code-white"}),"("),` `,mdx("span",e({parentName:"code"},{className:""}),"<"),mdx("span",e({parentName:"code"},{className:""}),">"),` `,mdx("span",e({parentName:"code"},{className:""}),"<"),"h1",mdx("span",e({parentName:"code"},{className:""}),">"),mdx("span",e({parentName:"code"},{className:""}),"My")," ",mdx("span",e({parentName:"code"},{className:""}),"Homepage"),mdx("span",e({parentName:"code"},{className:""}),"<"),mdx("span",e({parentName:"code"},{className:""}),"/"),"h1",mdx("span",e({parentName:"code"},{className:""}),">"),` `,mdx("span",e({parentName:"code"},{className:""}),"<"),mdx("span",e({parentName:"code"},{className:""}),"Image")," src",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-green"}),'"/me.png"')," alt",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-green"}),'"Picture of the author"')," width",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"{"),mdx("span",e({parentName:"code"},{className:""}),"500"),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"}")," height",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"{"),mdx("span",e({parentName:"code"},{className:""}),"500"),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"}")," ",mdx("span",e({parentName:"code"},{className:""}),"/"),mdx("span",e({parentName:"code"},{className:""}),">"),` `,mdx("span",e({parentName:"code"},{className:""}),"<"),"p",mdx("span",e({parentName:"code"},{className:""}),">"),mdx("span",e({parentName:"code"},{className:""}),"Welcome")," to my homepage",mdx("span",e({parentName:"code"},{className:""}),"!"),mdx("span",e({parentName:"code"},{className:""}),"<"),mdx("span",e({parentName:"code"},{className:""}),"/"),"p",mdx("span",e({parentName:"code"},{className:""}),">"),` `,mdx("span",e({parentName:"code"},{className:""}),"<"),mdx("span",e({parentName:"code"},{className:""}),"/"),mdx("span",e({parentName:"code"},{className:""}),">"),` `,mdx("span",e({parentName:"code"},{className:"text-code-white"}),")"),` `,mdx("span",e({parentName:"code"},{className:"text-code-white"}),"}"),` `,mdx("span",e({parentName:"code"},{className:"text-code-purple"}),"export")," ",mdx("span",e({parentName:"code"},{className:"text-code-purple"}),"default")," ",mdx("span",e({parentName:"code"},{className:""}),"Home"),` `)),mdx("p",null,"For a markdown file, the default image tag can be used and the default ",mdx("inlineCode",{parentName:"p"},"img")," tag gets replaced by the ",mdx("inlineCode",{parentName:"p"},"Image")," component in the build process."),mdx("p",null,"Assuming we have a file called ",mdx("inlineCode",{parentName:"p"},"ocean.jpg")," in ",mdx("inlineCode",{parentName:"p"},"data/img/ocean.jpg"),", the following line of code would generate the optimized image."),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`![ocean](/static/images/ocean.jpg) `)),mdx("p",null,"Alternatively, since we are using mdx, we can just use the image component directly! Note, that you would have to provide a fixed width and height. The ",mdx("inlineCode",{parentName:"p"},"img")," tag method parses the dimension automatically."),mdx("pre",e({},{className:"language-js"}),mdx("code",e({parentName:"pre"},{className:"language-js"}),mdx("span",e({parentName:"code"},{className:""}),"<"),mdx("span",e({parentName:"code"},{className:""}),"Image")," alt",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-green"}),'"ocean"')," src",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-green"}),'"/static/images/ocean.jpg"')," width",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"{"),mdx("span",e({parentName:"code"},{className:""}),"256"),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"}")," height",mdx("span",e({parentName:"code"},{className:""}),"="),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"{"),mdx("span",e({parentName:"code"},{className:""}),"128"),mdx("span",e({parentName:"code"},{className:"text-code-white"}),"}")," ",mdx("span",e({parentName:"code"},{className:""}),"/"),mdx("span",e({parentName:"code"},{className:""}),">"),` `)),mdx("p",null,mdx("em",{parentName:"p"},"Note"),": If you try to save the image, it is in webp format, if your browser supports it!"),mdx("div",null,mdx(Image,{alt:"ocean",src:"/static/images/ocean.jpeg",width:1920,height:1280,mdxType:"Image"})),mdx("p",null,"Photo by"," ",mdx("a",{href:"https://unsplash.com/@yucar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"},"YUCAR FotoGrafik")," ","on"," ",mdx("a",{href:"https://unsplash.com/s/photos/sea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"},"Unsplash")),mdx("h1",e({},{id:"benefits"}),mdx("a",e({parentName:"h1"},{href:"#benefits","aria-hidden":"true",tabIndex:-1}),mdx("span",e({parentName:"a"},{className:"icon icon-link"}))),"Benefits"),mdx("ul",null,mdx("li",{parentName:"ul"},"Smaller image size with Webp (~30% smaller than jpeg)"),mdx("li",{parentName:"ul"},"Responsive images - the correct image size is served based on the user's viewport"),mdx("li",{parentName:"ul"},"Lazy loading - images load as they are scrolled to the viewport"),mdx("li",{parentName:"ul"},"Avoids ",mdx("a",e({parentName:"li"},{href:"https://web.dev/cls/"}),"Cumulative Layout Shift")),mdx("li",{parentName:"ul"},"Optimization on demand instead of build-time - no increase in build time!")),mdx("h1",e({},{id:"limitations"}),mdx("a",e({parentName:"h1"},{href:"#limitations","aria-hidden":"true",tabIndex:-1}),mdx("span",e({parentName:"a"},{className:"icon icon-link"}))),"Limitations"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("p",{parentName:"li"},"Due to the reliance of ",mdx("inlineCode",{parentName:"p"},"next/image"),", unless you are using an external image CDN like Cloudinary or Imgix, it is practically required to use Vercel for hosting. This is because the component acts like a serverless function that calls a highly optimized image CDN."),mdx("p",{parentName:"li"},"If you do not want to be tied to Vercel, you can remove ",mdx("inlineCode",{parentName:"p"},"imgToJsx")," in ",mdx("inlineCode",{parentName:"p"},"remarkPlugins")," in ",mdx("inlineCode",{parentName:"p"},"lib/mdx.js"),". This would avoid substituting the default ",mdx("inlineCode",{parentName:"p"},"img")," tag."),mdx("p",{parentName:"li"},"Alternatively, one could wait for image optimization at build time to be supported. A different library, ",mdx("a",e({parentName:"p"},{href:"https://github.com/cyrilwanner/next-optimized-images"}),"next-optimized-images")," does that, although it requires transforming the images through webpack which is not done here.")),mdx("li",{parentName:"ul"},mdx("p",{parentName:"li"},"Images from external links are not passed through ",mdx("inlineCode",{parentName:"p"},"next/image"))),mdx("li",{parentName:"ul"},mdx("p",{parentName:"li"},"All images have to be stored in the ",mdx("inlineCode",{parentName:"p"},"public")," folder e.g ",mdx("inlineCode",{parentName:"p"},"/static/images/ocean.jpeg")))))}MDXContent.isMDXComponent=!0;

Under Construction 🚧