Images in Next.js

Images in Next.js

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](/images/blog/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

Share:

Related Posts

Release of Tailwind Nextjs Starter Blog v2.0

Release of Tailwind Nextjs Starter Blog v2.0

Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.Discover the new featur...

read more
New features in v1

New features in v1

An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more

read more
Introducing Tailwind Nextjs Starter Blog

Introducing Tailwind Nextjs Starter Blog

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

read more
Deriving the OLS Estimator

Deriving the OLS Estimator

How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.

read more
Markdown Guide

Markdown Guide

Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on GitHub Flavored Markdown.

read more
O Canada

O Canada

The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhib...

read more
Sample .md file

Sample .md file

Example of a markdown file with code blocks and syntax highlighting

read more