Nuxt Optimized Images

Nuxt Optimized Images is a build-time module for Nuxt.js that automatically optimizes images (JPEG, PNG, SVG, WebP, and GIF) when a project is built.

What is Nuxt Optimized Images?

Nuxt Optimized Images is a Nuxt.js module published on npm under the @aceforth scope as @aceforth/nuxt-optimized-images. It takes the images referenced in a Nuxt.js project and produces optimized versions during the build, with smaller file sizes, optional WebP conversion, progressive rendering, and responsive resizing. The module is inspired by next-optimized-images, requires Node.js 10 or newer and Nuxt 2 or newer, and is currently in maintenance mode, meaning only bug fixes are being addressed.

What makes Nuxt Optimized Images stand out?

• Size reduction — Optimizes JPEG, PNG, SVG, WebP, and GIF images at build time, with the README stating file sizes can often be reduced up to 60%.
• Progressive images — Provides progressive image loading for formats that support it, which improves perceived loading speed.
• On-the-fly WebP conversion — Converts JPEG and PNG images to WebP using a ?webp resource query, as long as the webp-loader package is installed.
• Responsive resizing — Uses responsive-loader to resize images on the fly and generate multiple versions for a srcSet, requiring either jimp (slower, Node-based) or sharp (faster, binary) as an additional dependency.
• LQIP placeholders — Generates low-quality image placeholders and extracts dominant colors from images via the lqip-loader package, controlled with a resource query.
• Query parameter control — Offers query parameters for file-specific settings, such as WebP conversion, LQIP, and resize dimensions, without separate configuration.
• Caching-friendly output — Adds a content hash to filenames for long-term CDN and browser caching, inlines small images to reduce HTTP requests, and keeps identical URLs for unchanged images across multiple builds.

Who should use Nuxt Optimized Images?

• Nuxt.js developers — who want to add image optimization to their existing Nuxt 2 build pipeline can install the module and optional loaders without writing custom image-processing code.
• Performance-focused web teams — building image-heavy Nuxt 2 sites (portfolios, blogs, e-commerce) can cut page weight and improve load metrics by serving WebP, resized images, and placeholders.
• Maintainers of Nuxt 2 projects — who are not yet migrating to Nuxt 3 can adopt this module to modernize image delivery; for Nuxt 3, the README recommends the official Nuxt Image module instead.

What can you do with Nuxt Optimized Images?

• Portfolio photographers: convert large JPEG photos to WebP and generate srcSet versions for responsive galleries, automatically during each production build.
• E-commerce teams: optimize product images and extract dominant colors for placeholder backgrounds, so pages render faster and feel more responsive.
• Blog authors: compress PNG/GIF images and inline small SVG icons, cutting the number of HTTP requests without manual optimization.

How does Nuxt Optimized Images work?

Install the module with npm or yarn, add it to the buildModules section of nuxt.config.js, and set optimizedImages.optimizeImages to true. Then install the specific optimization packages you need (for example, imagemin-mozjpeg for JPEGs or webp-loader for WebP conversion); the module detects and uses any supported packages that are installed. By default, optimization runs only for production builds, but the optimizeImagesInDev configuration option enables it during development.

FAQ

Is Nuxt Optimized Images free?

Yes, it is free and released under the MIT License, so it can be used in commercial and personal projects without a license fee.

What image formats are supported?

JPEG, PNG, SVG, WebP, and GIF are supported, with optional loaders including imagemin-mozjpeg, imagemin-pngquant, imagemin-optipng, imagemin-gifsicle, imagemin-svgo, webp-loader, lqip-loader, responsive-loader, and sqip-loader.

Does Nuxt Optimized Images work with Nuxt 3?

No. The module only targets Nuxt 2 (and requires Nuxt 2 or newer) and is in maintenance mode. For Nuxt 3, the README suggests using the official Nuxt Image module at github.com/nuxt/image.

Why are my images not optimized by default?

Images are not optimized unless you install the matching optimization packages. This is intentional to avoid forcing large libraries on all users. Once you install at least one package, the module detects and applies it.

Can optimization run during development?

Yes, but it is disabled by default. Set optimizedImages.optimizeImagesInDev to true in your Nuxt configuration to enable image optimization for development builds as well.