DEV Community

Cover image for How to optimize images at build (export) time using next/image
d-suke
d-suke

Posted on

How to optimize images at build (export) time using next/image

As of May 2022, the only way to use next/image with next export is to use an external URL with an The only way to use next/image with next export is to use an external URL with an image provider.
(since next/image uses the Nodejs server-based image optimization API by default)

However, this is inconvenient if you are building a simple website or want to build one without a Node.js server.

Therefore, we have developed a library to solve this problem.
If you are looking for a solution to optimize your images at build time using next/image, this one is for you!

  • GitHub

GitHub logo dc7290 / next-export-optimize-images

Optimize images at build time with Next.js.

npm downloads License Node.js CI GitHub Repo stars

Next Export Optimize Images

Using this repository, you can get the full benefits of next/image even when using next export by doing image optimization at build time.

This makes it possible to build a high performance website with this solution, whether you want to build a simple website or a completely static output.

Feature

  • Optimize images at build time.
  • All options for next/image available
  • Convert formats (png → webp, etc.)
  • Download external images locally.
  • Using sharp, so it's fast.
  • Cache prevents repeating the same optimization
  • Support TypeScript

Installation

yarn add -D next-export-optimize-images
Enter fullscreen mode Exit fullscreen mode

Document Site

https://next-export-optimize-images.vercel.app

License

Next Export Optimize Images is available under the MIT License.




  • Document site

Next Export Optimize Images

Documentation site for next-export-optimize-images.

next-export-optimize-images.vercel.app

Features

The main features include

  • Optimize images at build time.
  • All options for next/image available
  • Convert formats (png → webp, etc.)
  • Download external images locally.
  • Using sharp, so it's fast.
  • Cache prevents repeating the same optimization

Usage

1 - Install the package.

yarn add -D next-export-optimize-images
Enter fullscreen mode Exit fullscreen mode

2 - Add the plugin to next.config.js.

const withExportImages = require('next-export-optimize-images')

module.exports = withExportImages({
  // write your next.js configuration values.
})
Enter fullscreen mode Exit fullscreen mode

3 - Change the build command in package.json.

{
-  "export": "next build && next export",
+  "export": "next build && next export && next-export-optimize-images",
}
Enter fullscreen mode Exit fullscreen mode

4 - Use next/image as usual.

import Image from 'next/image'

<Image src="/images/img.png" width={1920} height={1280} alt="" />
// Or import as follows
<Image src={require('./img.png')} alt="" />
Enter fullscreen mode Exit fullscreen mode

Configuration

Default behavior can be changed as needed.
Create export-images.config.js in the root.

/**
 * @type {import('next-export-optimize-images').Config}
 */
const config = {
  // your configuration values.
}

module.exports = config
Enter fullscreen mode Exit fullscreen mode

For more information, please visit this document site.

Usage examples

Here are some examples of usage.
However, they are basically the same as the usage of next/image, so please refer to the official documentation here for details.

Set the placeholder

<Image placeholder="blur" src="/images/img.png" width={1920} height={1280} alt="" />
// Or import as follows
<Image placeholder="blur" src={require('./img.png')} alt="" />
Enter fullscreen mode Exit fullscreen mode

Set layout to fill

<Image layout="fill" objectFit="cover" src="/images/img.png" width={1920} height={1280} alt="" />
Enter fullscreen mode Exit fullscreen mode

Download external images locally

This feature is a unique behavior of this library.

<Image src="https://next-export-optimize-images.vercel.app/og.png" width="1280" height="640" alt="" />
Enter fullscreen mode Exit fullscreen mode

When in production, it will be rendered as follows. (Only important parts are shown.)

<img
  srcset="/_next/static/chunks/images/og_1920_75.png 1x, /_next/static/chunks/images/og_3840_75.png 2x"
  src="/_next/static/chunks/images/og_3840_75.png"
/>
Enter fullscreen mode Exit fullscreen mode

During development, as with local images, no optimization is performed.
Also, no downloading to local is performed.

<img
  srcset="https://next-export-optimize-images.vercel.app/og.png?width=1920 1x, https://next-export-optimize-images.vercel.app/og.png?width=3840 2x"
  src="https://next-export-optimize-images.vercel.app/og.png?width=3840"
/>
Enter fullscreen mode Exit fullscreen mode

Comparison

next-image-export-optimizer

https://github.com/Niels-IO/next-image-export-optimizer

Since this library is very similar to ours, it would be very good for you to try this one as well.

A brief comparison with our library reveals the following characteristics for your reference.

next-export-optimize-images next-image-export-optimizer
All options for next/image are available △ *1
Specify the image folder None in particular (free) Only in the specified directory
Optimize only the images you use × *2
next/dymamic support ×

*1: Only strings can be specified in the src attribute.
*2: images of various widths with layout="intrinsic" (since 1x and 2x images are sufficient at this time).

Conclusion

Next.js is a very easy-to-use tool that can be used not only for web application development, but also for static sites.
Next.js is so easy to use that I think you will want to use it for static sites as well.
If you have any problems with image optimization, please use this library!

If you have any problems with this library or suggestions for features, please do not hesitate to contact me through
Issue or my Twitter!

https://github.com/dc7290/next-export-optimize-images/issues
https://twitter.com/d_suke_09

Top comments (0)