1.0.6 • Published 11 months ago
responsive-image-plugin v1.0.6
responsive-image-plugin
A webpack plugin for responsive images.
Installation
npm install responsive-image-plugin --save-dev
Usage
var OptimizeImagePlugin = require("responsive-image-plugin");
module.exports = {
// ...
plugins: [
new OptimizeImagePlugin({
test: /\.(png|gif|ico|jpg|jpeg)$/,
options: {
sourcePath: path.resolve(__dirname, "public"),
outputPath: path.resolve(__dirname, "optimize-images"),
sizes: [375, 768, 1280],
quality: 80,
overrideExtension: true,
},
}),
],
};
Options
Option | Type | Default | Description |
---|---|---|---|
sourcePath | string | undefined | The directory containing the images to be generated |
outputPath | string | undefined | The directory containing the images to be exported |
sizes | array | [375, 768, 1280] | The image sizes you want to generate |
quality | integer | 80 | The quality of the image |
Examples
Before running webpack
Project
|_ src
|_ public
| |_ image1.jpg
| |_ image2.jpg
After running webpack
Project
|_ src
|_ public
| |_ image1.jpg
| |_ image2.jpg
|_ optimize-images
| |_ image1-375x476.webp
| |_ image1-768x976.webp
| |_ image1-1220x1626.webp
| |_ image2-375x476.webp
| |_ image2-768x976.webp
| |_ image2-1220x1626.webp