∨∧

Images in Next.js

Authors
  • avatar
    Name
    Tyler Andor
  • Published on

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