Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).
This module is inspired by the work of Cyril Wanner in next-optimized-images.
Read this in other languages: English, Español
Image sizes can often get reduced up to 60%, but this is not the only thing @bazzite/nuxt-optimized-images does:
- Reduces image size by optimizing images during build.
- Improves loading speed by providing progressive images (for formats that support it).
- JPEG/PNG images can be converted to
WebPon the fly for an even smaller size. - Can resize images or generate low-quality image placeholders (lqip) and extract the dominant colors of it.
- Provides query params for file-specific handling/settings.
- And supports these features already included in Nuxt.js:
- Content hash to the file name so images can get cached on CDN level and in the browser for a long time.
- Inlined small images to save HTTP requests and additional roundtrips.
- Same URLs fo unchanged images over multiple builds for long time caching.
node >= 8 and nuxt >= 2 are required.
npm install @bazzite/nuxt-optimized-imagesor
yarn add @bazzite/nuxt-optimized-imagesAdd @bazzite/nuxt-optimized-images to modules section of nuxt.config.js:
{
modules: [
'@bazzite/nuxt-optimized-images',
],
optimizedImages: {
optimizeImages: true
}
}See the configuration section for all available options.
You have to install the optimization packages you need in your project in addition to this module. Then, @bazzite/nuxt-optimized-images detects all the supported packages and uses them.
So you only have to install these packages with npm, there is no additional step needed after that.
The following optimization packages are available and supported:
| Optimization Package | Description | Project Link |
|---|---|---|
imagemin-mozjpeg |
Optimizes JPEG images | Link |
imagemin-pngquant |
Optimizes PNG images | Link |
imagemin-optipng |
Alternative for optimizing PNG images | Link |
imagemin-gifsicle |
Optimizes GIF images | Link |
imagemin-svgo |
Optimizes SVG images and icons | Link |
webp-loader |
Optimizes WebP images and can convert JPEG/PNG images to WebP on the fly (WebP resource query) | Link |
lqip-loader |
Generates low quality image placeholders and can extract the dominant colors of an image (lqip resource query) | Link |
responsive-loader |
Can resize images on the fly and create multiple versions of it for a srcset. Important: You need to additionally install either jimp (node implementation, slower) or sharp (binary, faster) |
Link |
sqip-loader |
Loads images and exports tiny SQIP previews as image/svg+xml URL-encoded data |
Link |
Example: If you have JPG, PNG, and SVG images in your project, you would then need to run
npm install imagemin-mozjpeg imagemin-pngquant imagemin-svgo
# or
yarn add imagemin-mozjpeg imagemin-pngquant imagemin-svgoTo install all optional packages, run:
npm install imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimp
# or
yarn add imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimpoptimizeImagesInDev config.
- 📄 If you want extra details of how to configure and use this project, the full documentation is available at https://www.bazzite.com/docs/nuxt-optimized-images/.
- 🐞 For Bug reports or Feature requests, use the Issues section.
- 💬 For questions, go to https://spectrum.chat/bazzite/open-source.
- 🚀 You may also want to follow the company supporting this project on Twitter.
This project is sponsored by Bazzite. If you require Professional Assistance on your project(s), please contact us at https://www.bazzite.com/contact.
Everyone participating in this project is expected to agree to abide by the Code of Conduct.
Code released under the MIT License.