{"pageProps":{"post":{"mdxSource":"var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var l=a=>t(a,\"__esModule\",{value:!0});var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),N=(a,e)=>{l(a);for(var i in e)t(a,i,{get:e[i],enumerable:!0})},k=(a,e,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!u.call(a,s)&&s!==\"default\"&&t(a,s,{get:()=>e[s],enumerable:!(i=h(e,s))||i.enumerable});return a},f=a=>k(l(t(a!=null?d(p(a)):{},\"default\",a&&a.__esModule&&\"default\"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var r=g((v,o)=>{o.exports=_jsx_runtime});var x={};N(x,{default:()=>w,frontmatter:()=>b});var n=f(r()),b={title:\"Images in Next.js\",date:\"2020-11-11\",tags:[\"next js\",\"guide\"],draft:!1,summary:\"In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.\",authors:[\"sparrowhawk\"]};function y(a){let e=Object.assign({h1:\"h1\",a:\"a\",span:\"span\",p:\"p\",pre:\"pre\",code:\"code\",em:\"em\",div:\"div\",ul:\"ul\",li:\"li\"},a.components),{Image:i,wrapper:s}=e,c=(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:\"introduction\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#introduction\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Introduction\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The tailwind starter blog has out of the box support for \",(0,n.jsx)(e.a,{href:\"https://nextjs.org/docs/api-reference/next/image\",children:\"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.\"]}),`\n`,(0,n.jsxs)(e.h1,{id:\"usage\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#usage\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Usage\"]}),`\n`,(0,n.jsx)(e.p,{children:\"To use in a new page route / javascript file, simply import the image component and call it e.g.\"}),`\n`,(0,n.jsx)(e.pre,{className:\"language-js\",children:(0,n.jsxs)(e.code,{className:\"language-js code-highlight\",children:[(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"import\"}),\" \",(0,n.jsx)(e.span,{className:\"token imports\",children:(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Image\"})}),\" \",(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"from\"}),\" \",(0,n.jsx)(e.span,{className:\"token string\",children:\"'next/image'\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token keyword\",children:\"function\"}),\" \",(0,n.jsx)(e.span,{className:\"token function\",children:(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Home\"})}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token keyword control-flow\",children:\"return\"}),\" \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),\"h1\",(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"My\"}),\" \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Homepage\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\"/\"}),\"h1\",(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Image\"}),\" src\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token string\",children:'\"/me.png\"'}),\" alt\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token string\",children:'\"Picture of the author\"'}),\" width\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"500\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),\" height\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"500\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"/\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"      \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),\"p\",(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Welcome\"}),\" to my homepage\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"!\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\"/\"}),\"p\",(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"    \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\"/\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[\"  \",(0,n.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"code-line\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"export\"}),\" \",(0,n.jsx)(e.span,{className:\"token keyword module\",children:\"default\"}),\" \",(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Home\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"For a markdown file, the default image tag can be used and the default \",(0,n.jsx)(e.code,{children:\"img\"}),\" tag gets replaced by the \",(0,n.jsx)(e.code,{children:\"Image\"}),\" component in the build process.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Assuming we have a file called \",(0,n.jsx)(e.code,{children:\"ocean.jpg\"}),\" in \",(0,n.jsx)(e.code,{children:\"data/img/ocean.jpg\"}),\", the following line of code would generate the optimized image.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"code-highlight\",children:(0,n.jsx)(e.span,{className:\"code-line\",children:`![ocean](/static/images/ocean.jpg)\n`})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"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 \",(0,n.jsx)(e.code,{children:\"img\"}),\" tag method parses the dimension automatically.\"]}),`\n`,(0,n.jsx)(e.pre,{className:\"language-js\",children:(0,n.jsx)(e.code,{className:\"language-js code-highlight\",children:(0,n.jsxs)(e.span,{className:\"code-line\",children:[(0,n.jsx)(e.span,{className:\"token operator\",children:\"<\"}),(0,n.jsx)(e.span,{className:\"token maybe-class-name\",children:\"Image\"}),\" alt\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token string\",children:'\"ocean\"'}),\" src\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token string\",children:'\"/static/images/ocean.jpg\"'}),\" width\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"256\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),\" height\",(0,n.jsx)(e.span,{className:\"token operator\",children:\"=\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),(0,n.jsx)(e.span,{className:\"token number\",children:\"128\"}),(0,n.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),\" \",(0,n.jsx)(e.span,{className:\"token operator\",children:\"/\"}),(0,n.jsx)(e.span,{className:\"token operator\",children:\">\"}),`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.em,{children:\"Note\"}),\": If you try to save the image, it is in webp format, if your browser supports it!\"]}),`\n`,(0,n.jsx)(e.div,{children:(0,n.jsx)(i,{alt:\"ocean\",src:\"/static/images/ocean.jpeg\",width:\"1920\",height:\"1280\"})}),`\n`,(0,n.jsx)(\"p\",{children:(0,n.jsxs)(e.p,{children:[\"Photo by \",(0,n.jsx)(e.a,{href:\"https://unsplash.com/@yucar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\",children:`YUCAR\nFotoGrafik`}),`\non\n`,(0,n.jsx)(e.a,{href:\"https://unsplash.com/s/photos/sea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\",children:\"Unsplash\"})]})}),`\n`,(0,n.jsxs)(e.h1,{id:\"benefits\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#benefits\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Benefits\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Smaller image size with Webp (~30% smaller than jpeg)\"}),`\n`,(0,n.jsx)(e.li,{children:\"Responsive images - the correct image size is served based on the user's viewport\"}),`\n`,(0,n.jsx)(e.li,{children:\"Lazy loading - images load as they are scrolled to the viewport\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Avoids \",(0,n.jsx)(e.a,{href:\"https://web.dev/cls/\",children:\"Cumulative Layout Shift\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"Optimization on demand instead of build-time - no increase in build time!\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h1,{id:\"limitations\",children:[(0,n.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#limitations\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Limitations\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"Due to the reliance of \",(0,n.jsx)(e.code,{children:\"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.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you do not want to be tied to Vercel, you can remove \",(0,n.jsx)(e.code,{children:\"imgToJsx\"}),\" in \",(0,n.jsx)(e.code,{children:\"remarkPlugins\"}),\" in \",(0,n.jsx)(e.code,{children:\"lib/mdx.js\"}),\". This would avoid substituting the default \",(0,n.jsx)(e.code,{children:\"img\"}),\" tag.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Alternatively, one could wait for image optimization at build time to be supported. A different library, \",(0,n.jsx)(e.a,{href:\"https://github.com/cyrilwanner/next-optimized-images\",children:\"next-optimized-images\"}),\" does that, although it requires transforming the images through webpack which is not done here.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"Images from external links are not passed through \",(0,n.jsx)(e.code,{children:\"next/image\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"All images have to be stored in the \",(0,n.jsx)(e.code,{children:\"public\"}),\" folder e.g \",(0,n.jsx)(e.code,{children:\"/static/images/ocean.jpeg\"})]}),`\n`]}),`\n`]})]});return s?(0,n.jsx)(s,Object.assign({},a,{children:c})):c}var w=y;return x;})();\n;return Component.default;","toc":[{"value":"Introduction","url":"#introduction","depth":1},{"value":"Usage","url":"#usage","depth":1},{"value":"Benefits","url":"#benefits","depth":1},{"value":"Limitations","url":"#limitations","depth":1}],"frontMatter":{"readingTime":{"text":"3 min read","minutes":2.625,"time":157500,"words":525},"slug":"guide-to-using-images-in-nextjs","fileName":"guide-to-using-images-in-nextjs.mdx","title":"Images in Next.js","date":"2020-11-11T00:00:00.000Z","tags":["next js","guide"],"draft":false,"summary":"In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.","authors":["sparrowhawk"]}},"authorDetails":[{"readingTime":{"text":"1 min read","minutes":0.77,"time":46200,"words":154},"slug":["sparrowhawk"],"fileName":"sparrowhawk.md","name":"Sparrow Hawk","avatar":"/static/images/sparrowhawk-avatar.jpg","occupation":"Wizard of Earthsea","company":"Earthsea","twitter":"https://twitter.com/sparrowhawk","linkedin":"https://www.linkedin.com/sparrowhawk","date":null}],"prev":{"title":"Deriving the OLS Estimator","date":"2019-11-16T00:00:00.000Z","tags":["next js","math","ols"],"draft":false,"summary":"How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.","slug":"deriving-ols-estimator"},"next":{"title":"Introducing Tailwind Nextjs Starter Blog","date":"2021-01-12T00:00:00.000Z","lastmod":"2021-09-08","tags":["next-js","tailwind","guide"],"draft":false,"summary":"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.","images":["/static/images/canada/mountains.jpg","/static/images/canada/toronto.jpg"],"authors":["default","sparrowhawk"],"slug":"introducing-tailwind-nextjs-starter-blog"}},"__N_SSG":true}