Introduction

The tailwind starter blog has out of the box support for 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.

Usage

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!

ocean

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 of 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

DEV Images in Next.js

Introduction

Usage

Benefits

Limitations