next-export-optimize-images

This package enables the full benefits of next/image for static Next.js exports (using next export) by performing image optimization during the build process rather than at runtime.

Key features include:

• Build-time optimization: Processes images during the build to support static hosting.
• Format conversion: Automatically converts images to modern formats (e.g., png → webp).
• External image support: Downloads external images locally for optimization.
• High performance: Uses sharp for fast processing and implements caching to prevent redundant optimizations.
• Compatibility: Supports TypeScript and the Next.js App Router.

When deciding between next-export-optimize-images and next-image-export-optimizer, consider these trade-offs:

Use next-export-optimize-images if you:

• Want a simple setup.
• Need to support multiple image formats within a <Picture> component.
• Want to optimize images in advance during next build while using a Node.js server.
• Need easy remote image optimization.

next-image-export-optimizer characteristics:

• Processes images within a specified directory (e.g., public/images).
• Limitations: Settings can be complex/cumbersome, it does not support all next/image options, and it only handles one file extension.

The library provides the following capabilities for static Next.js exports:

• Build-time optimization: Images are processed during the build, making them compatible with static hosting.
• Full next/image support: All standard options available in the next/image component are supported.
• Format conversion: Automatically converts images to modern formats (e.g., png to webp).
• External image downloading: Can download images from external URLs and store them locally for optimization.
• High performance: Uses sharp for fast image processing.
• Caching: Implements a cache to prevent redundant optimization tasks.
• Modern Next.js support: Fully supports TypeScript and the App Router.

When deciding between next-export-optimize-images and next-optimized-images, consider these trade-offs:

Use next-export-optimize-images if you:

• Want to use the standard next/image component for optimization.
• Are using responsive-loader but are concerned about bloated bundle sizes caused by long srcSet strings.

next-optimized-images characteristics:

• Uses webpack's loader feature for optimization.
• Does not require the use of next/image.
• Note: This library has not been updated since August 9, 2020, and can lead to larger bundle sizes when handling srcSet.

Install the package as a development dependency in your Next.js project using npm.

npm i -D next-export-optimize-images

Once configured in export-images.config.js, you can use external images with the standard Image component.

Behavioral differences:

• In Production: The library optimizes the images at build time. The rendered <img> tag will use local paths pointing to the optimized chunks (e.g., src="/_next/static/chunks/images/...") and include a srcset for different resolutions.
• In Development: No optimization or downloading occurs. The <img> tag will point directly to the external URL with query parameters for width (e.g., src="https://example.com/image.png?width=3840").

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

Wrap your Next.js configuration with withExportImages. Note that withExportImages is an asynchronous function that returns a Promise. You must either wrap the configuration first or await the Promise before applying other plugins to ensure correct execution.

If you are using CommonJS (next.config.js), you can wrap your config directly or use an async function to handle the Promise resolution when combining with other plugins.

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

module.exports = withExportImages({
  output: 'export',
  // write your next.js configuration values.
})

To generate the static content for the documentation website, run npm run build. The resulting static files will be located in the build directory and can be hosted on any static content hosting service.

$ npm run build

To start a local development server for the documentation, use npm start. This command opens a browser window and supports live reloading, meaning most changes will be reflected immediately without a server restart.

$ npm start