Nuxt Responsive Loader
Process images during the build step in your Nuxt.js app 📸
- Compress images during the build step to reduce file size and improve website performance
- Generate responsive srcsets for your Nuxt.js projects
- Re-size images, convert format, rename and generate placeholders
- Enabled for JPG, PNG and WebP
- Uses responsive-loader
- Compatible with Sharp for fast image processing ⚡
- Fully configurable
- Add the module to your project:
npm install nuxt-responsive-loader// ORyarn add nuxt-responsive-loader
// file: nuxt.config.js// ...modules: 'nuxt-responsive-loader'
- Add your images to the
Generating srcsets (default)
- Add srcsets to your
imgelements in your templates like so:
<template><img :srcset="require('~/assets/nuxt.jpg').srcSet" /></template>
- During the project's build step your image will be converted into ~5 different images of varying size, each of which will be named with a unique hash and each of which will be compressed to reduce filesize (fully configurable):
├── _nuxt ├── img ├── 2b88a85-640.jpg ├── 1fff45c-750.jpg ├── 6717911-860.jpg ├── f9f19bf-970.jpg └── c0ceb80-1080.jpg
- Your Nuxt template will produce the following
imgelement in your built HTML file:
- Modern browsers will only request the image which matches the current screen size. This has the potential to reduce the bandwidth used by smaller devices and improve website performance. Learn more by reading Responsive Images: If you’re just changing resolutions, use srcset.
Compress source images to improve your website's performance:
The following examples each require a different custom configuration of the responsive loader module:
// file: nuxt.config.js// ...// Specify your options as a responsiveLoader objectresponsiveLoader:name: 'img/[hash:7]-[width].[ext]'quality: 65 // choose a lower value if you want to reduce filesize further
<!-- file: index.vue -->
Generate placeholders for usage with the blur-up technique:
// file: nuxt.config.js// ...// Specify your options as a responsiveLoader objectresponsiveLoader:name: 'img/[hash:7]-[width].[ext]'placeholder: true
<!-- file: index.vue -->
Convert image files to
// file: nuxt.config.js// ...// Specify your options as a responsiveLoader objectresponsiveLoader:name: 'img/[hash:7]-[width].[ext]'format: 'png'
The plugin will work out of the box and will use these settings:
name: 'img/[hash:7]-[width].[ext]'min: 640 // minimum image width generatedmax: 1080 // maximum image width generatedsteps: 5 // five sizes per image will be generatedplaceholder: false // no placeholder will be generatedquality: 65 // images are compressed with medium quality
If you want to configure the underlying loader, you can do that as well. (All options available here)
// file: nuxt.config.js// ...// Specify your options as a responsiveLoader objectresponsiveLoader:name: 'img/hello-world-[width].[ext]'sizes: 200 500format: 'png'adapter:placeholder: true
- This module is not compatible with other Nuxt image processing modules.
- This module will throw an error if the default image loader webpack rule for Nuxt has been edited in your project. To resolve this try removing other Nuxt image processing modules.
- Clone this repository
- Install dependencies using
- Start development server using
npm run dev
- Please file an issue. Thanks.
- This repo is based on @manniL' Nuxt SVG loader. I learnt a lot from @manniL's awesome Nuxt modules so do check them out.