Nuxt Responsive Loader
Process images during the build step in your Nuxt.js app 📸
Features
- 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
Setup
- Add the module to your project:
npm install nuxt-responsive-loader// ORyarn add nuxt-responsive-loader
- Add
nuxt-responsive-loader
to themodules
section ofnuxt.config.js
:
// file: nuxt.config.js // ... modules: 'nuxt-responsive-loader'
- Add your images to the
assets
directory
Examples
Generating srcsets (default)
- Add srcsets to your
img
elements 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
img
element 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 object responsiveLoader: 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 object responsiveLoader: name: 'img/[hash:7]-[width].[ext]' placeholder: true
<!-- file: index.vue -->
.png
:
Convert image files to // file: nuxt.config.js // ... // Specify your options as a responsiveLoader object responsiveLoader: name: 'img/[hash:7]-[width].[ext]' format: 'png'
Configuration
The plugin will work out of the box and will use these settings:
name: 'img/[hash:7]-[width].[ext]' min: 640 // minimum image width generated max: 1080 // maximum image width generated steps: 5 // five sizes per image will be generated placeholder: false // no placeholder will be generated quality: 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 object responsiveLoader: name: 'img/hello-world-[width].[ext]' sizes: 200 500 format: 'png' adapter: placeholder: true
Tips
- 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.
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
Bugs
- Please file an issue. Thanks.
Credit
- This repo is based on @manniL' Nuxt SVG loader. I learnt a lot from @manniL's awesome Nuxt modules so do check them out.
License
MIT