Introduction

The benefit of using mdx is it allows being able to add react components directly into an .mdx refer to Next.js's built-in image component. What this essentially means is that it will automatically swaps out default image tags in markdown or mdx documents to use the Image component provided.

Examples

To use in a new page route / javascript file, simply import the image component and call it e.g.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src="/me.png" alt="Picture of the author" width={500} height={500} />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

For a markdown file, the default image tag can be used and the default img tag gets replaced by the Image component in the build process.

Assuming we have a file called ocean.jpg in data/img/ocean.jpg, the following line of code would generate the optimized image.

![ocean](/static/images/ocean.jpg)

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 img tag method parses the dimension automatically.

<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />

Note: If you try to save the image, it is in webp format, if your browser supports it!

Photo by YUCAR FotoGrafik on Unsplash

Benefits

• Smaller image size with Webp (~30% smaller than jpeg)
• Responsive images - the correct image size is served based on the user's viewport
• Lazy loading - images load as they are scrolled to the viewport
• Avoids Cumulative Layout Shift
• Optimization on demand instead of build-time - no increase in build time!

Limitations

• Due to the reliance on 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.

  If you do not want to be tied to Vercel, you can remove imgToJsx in remarkPlugins in lib/mdx.js. This would avoid substituting the default img tag.

  Alternatively, one could wait for image optimization at build time to be supported. A different library, next-optimized-images does that, although it requires transforming the images through webpack which is not done here.

• Images from external links are not passed through next/image

• All images have to be stored in the public folder e.g /static/images/ocean.jpeg