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
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.
- Document site
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
Top comments (0)