A Next.js plugin for build-time image optimization with persistent caching, supporting static exports and art direction.
next-img is a Next.js plugin that provides build-time image optimization, allowing developers to embed responsive images with multiple sizes, densities, and formats like WebP. It solves the problem of manually configuring image optimization or relying on external CDNs by processing images during the build and caching results for fast deployments.
Next.js developers building static or server-rendered applications who need efficient, optimized images without runtime overhead or external dependencies.
Developers choose next-img for its seamless integration with Next.js, support for static exports, and persistent caching that speeds up builds. It offers a streamlined approach to responsive images and art direction, making it easier to achieve high performance without complex configuration.
A Next.js plugin for embedding optimized images.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Processes images at build time using Sharp, eliminating runtime overhead and CDN dependencies, with results cached in your repository for faster deployments.
Fully supports Next.js static exports (output: 'export'), making it ideal for static sites without a server, as highlighted in the README.
Generates multiple image sizes and densities (e.g., 1x, 2x) automatically, providing responsive images optimized for different screen sizes and high-density displays.
Outputs images in WebP format with optimized JPEG/PNG fallbacks, ensuring broader browser compatibility and better performance with minimal configuration.
Automatically adds width and height attributes to images, preventing layout shifts and improving Core Web Vitals without manual intervention.
Requires webpack mode in Next.js 16+ due to Turbopack's lack of support for the emitFile API, forcing developers to opt into webpack for development and builds.
The persistent cache can accumulate unused images if import parameters change, requiring manual cleanup with npx next-img to avoid repository bloat.
Currently does not support GIF or WebP as source images, restricting flexibility for projects using these formats, as noted in the Ideas section.
Setting up advanced options like custom breakpoints or quality settings involves query parameters and plugin configs, which can be error-prone for less experienced developers.