Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @bazzite/nuxt-optimized-images with all npm packages installed. Try it out:

var nuxtOptimizedImages = require("@bazzite/nuxt-optimized-images")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@bazzite/nuxt-optimized-images v0.4.0

Automatically optimizes images used in Nuxt.js projects (jpeg, png, svg, webp and gif).

Bazzite Project Codacy Badge Travis David David version License

:sunrise: :rocket: Nuxt Optimized Images

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

Features

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 WebP on 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.

Installation

:warning: node >= 10 and nuxt >= 2 are required.

npm install --save-dev @bazzite/nuxt-optimized-images

or

yarn add --dev @bazzite/nuxt-optimized-images

Add @bazzite/nuxt-optimized-images to buildModules section of nuxt.config.js:

:warning: If you are using Nuxt < 2.9.0, use modules instead.

{
  buildModules: [
    '@bazzite/nuxt-optimized-images',
  ],

  optimizedImages: {
    optimizeImages: true
  }
}

See the configuration section for all available options.

:warning: Images won't get optimized out of the box. You have to install the optimization packages you really need in addition to this module. This doesn't force you to download big optimization libraries you don't even use. Please check out the table of all optional optimization packages.

Optimization Packages

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 PackageDescriptionProject Link
imagemin-mozjpegOptimizes JPEG imagesLink
imagemin-pngquantOptimizes PNG imagesLink
imagemin-optipngAlternative for optimizing PNG imagesLink
imagemin-gifsicleOptimizes GIF imagesLink
imagemin-svgoOptimizes SVG images and iconsLink
webp-loaderOptimizes WebP images and can convert JPEG/PNG images to WebP on the fly (WebP resource query)Link
lqip-loaderGenerates low quality image placeholders and can extract the dominant colors of an image (lqip resource query)Link
responsive-loaderCan 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-loaderLoads images and exports tiny SQIP previews as image/svg+xml URL-encoded dataLink

Example: If you have JPG, PNG, and SVG images in your project, you would then need to run

npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

# or

yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

To install all optional packages, run:

npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo  webp-loader lqip-loader responsive-loader sqip-loader sharp

# or

yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo  webp-loader lqip-loader responsive-loader sqip-loader sharp

:warning: Please note that by default, images are only optimized for production builds, not development builds. However, this can get changed with the optimizeImagesInDev config.

Documentation & Support

Professional Support

This project is sponsored by Bazzite. If you require Professional Assistance on your project(s), please contact us at https://www.bazzite.com/contact.

Code of Conduct

Everyone participating in this project is expected to agree to abide by the Code of Conduct.

License

Code released under the MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free