How to optimize images at build (export) time using next/image
Tags: nextjs, performance, webdev, react
Published: 2022-06-13 10:34:09

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

{% embed https://github.com/dc7290/next-export-optimize-images %}


- Document site

{% embed https://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.

```bash
yarn add -D next-export-optimize-images
```

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

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

module.exports = withExportImages({
  // write your next.js configuration values.
})
```

3 - Change the build command in `package.json`.

```diff
{
-  "export": "next build && next export",
+  "export": "next build && next export && next-export-optimize-images",
}
```

4 - Use `next/image` as usual.

```jsx
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="" />
```

## Configuration

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

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

module.exports = config
```
For more information, please visit [this document site](https://next-export-optimize-images.vercel.app/docs/configuration).

## 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](https://nextjs.org/docs/api-reference/next/image) for details.

### Set the `placeholder`

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

### Set `layout` to `fill`

```jsx
<Image layout="fill" objectFit="cover" src="/images/img.png" width={1920} height={1280} alt="" />
```

### Download external images locally

This feature is a unique behavior of this library.

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

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

```jsx
<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"
/>
```

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

```jsx
<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"
/>
```

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