Next.js Image Optimization for Static Exports

Hello everyone! In today’s tutorial, we’ll setup image optimization with Next.js static exports. I’ll walk you through a simple image gallery project to show how we can make images load faster, especially on mobile networks, using Next.js's next-image-export-optimizer.

Setting Up the Project

I’ve created a simple image gallery project in VS Code with a local development server. Initially, it’s configured with the default Next.js settings. You can find a source code here.

But when I switch to static export mode (using output: "export" in next.config.js), an error appears: “Image optimization is not supported with export mode.”

There are two ways to handle this:

1. Disable export mode – if you don’t need static files.
2. Use unoptimized images – if static files are necessary.

To use unoptimized images, set images.unoptimized to true in next.config.js. This allows images to load but at the cost of larger file sizes, which is inefficient, especially for mobile users.

Introducing next-image-export-optimizer

To optimize images without compromising static export capabilities, we can use the next-image-export-optimizer library. This tool converts images during the build process, generating multiple resolutions for different viewport sizes and saving bandwidth.

Here are the library’s main features:

• Converts images to WebP format by default.
• Generates low-res placeholder images for smoother loading.
• Supports TypeScript and remote/animated images.
• Allows quality adjustments for optimized image output.

Installation and Configuration

1. Install the Optimizer: Run this command in your terminal:
2. Configure next.config.js:
3. Add an Export Command: Add a new export script to package.json to automate the optimization on build:
4. Replace Image Components: Import the optimized image component into your pages. Replace native <Image> components with <OptimizedImage> provided by the library.

Testing the Optimizations

After setting up, build the project by running:

npm run export

The optimizer will generate multiple image resolutions in the output folder. When you serve the project locally, inspect the images in the network tab of your browser’s developer tools. You’ll see that different resolutions are loaded based on the device size, improving performance on slower networks.

Additional Settings

• Quality: Adjust the quality setting in next.config.js (e.g., 80) to balance quality and performance.
• WebP Support: Enable WebP format by setting formats: ['webp'].
• Blur Placeholder: To enable blur placeholders, set blur: true. This loads low-res versions of images initially, enhancing user experience on slower networks.

Conclusion

With next-image-export-optimizer, you can enjoy optimized images in your Next.js static exports without compromising performance. This setup helps deliver a responsive, efficient user experience on various devices. Thanks for reading!

Useful resources

https://www.npmjs.com/package/next-image-export-optimizer

https://nextjs.org/docs/pages/building-your-application/deploying/static-exports