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

d-suke — Mon, 13 Jun 2022 10:34:09 +0000

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

dc7290 / next-export-optimize-images

Optimize images at build time with Next.js.

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

Installation

yarn add -D next-export-optimize-images

Document Site

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

License

Next Export Optimize Images is available under the MIT License.

View on GitHub

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

2 - Add the plugin to next.config.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.

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

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

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

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

Set `layout` to `fill`

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

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

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

<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

DEV Community: d-suke

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

dc7290 / next-export-optimize-images

Optimize images at build time with Next.js.

Next Export Optimize Images

Feature

Installation

Document Site

License

Next Export Optimize Images

Features

Usage

Configuration

Usage examples

Set the placeholder

Set layout to fill

Download external images locally

Comparison

next-image-export-optimizer

Conclusion

Set the `placeholder`

Set `layout` to `fill`