Perceptual image optimizer for webpack.
pio-loader is not yet published on npm but you can install it from GitHub by running:
$ npm install --save-dev siiptuo/pio-loaderMost likely you also want to use file-loader:
$ npm install --save-dev file-loaderAdd file-loader and pio-loader to your webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|webp)$/i,
use: ["file-loader", "pio-loader"],
},
],
},
};Now imported images are automatically optimized:
import cat from "./cat.jpg";
const img = new Image();
img.src = cat;
document.body.appendChild(img);See example directory for full example which for instance shows how to disable optimization during development.
Set the default quality in webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|webp)$/i,
use: [
"file-loader",
{
loader: "pio-loader",
settings: { quality: 75 },
},
],
},
],
},
};You can override the default quality per import:
import cat from "./cat.jpg?quality=95";It's also possible to use different output format:
import cat from "./cat.jpg?format=webp";ISC
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent