webpack-wepb-converter
v1.0.4
Published
Converting background images in css to webp with fallback for not support browsers
Downloads
6
Readme
webpack-wepb-converter
Description
Converting background images in css to webp with fallback for not support browsers
Usage
//webpack.config.js
const webpackWepbConverter= require("webpack-wepb-converter");
module.exports = {
configureWebpack: {
plugins: [
new webpackWepbConverter({
config: [{
test: /\.(png)/,
options: {
quality: 100,
lossless: true,
}
},
{
test: /\.(jpe?g)/,
options: {
quality: 90,
nearLossless: 40,
sns: 100,
}
},
]
})
]
}
}
Custom options in css
bg-options
is additional css properties for individual converting image. It overwrite default options from webpack config.
.main-img {
background: url('../img/image1.png');
bg-options: q(90) m(6) sns(100);
}
.banner-img {
background: url('../img/image1.png');
bg-options: lossless m(6);
}
Available options:
Name | Value | :----------- |:----------:| preset | default, photo, picture, drawing, icon, text | quality | int | alphaQuality | int | m | int | size | int | sns | int | filter | int | f | int | autoFilter | boolean | sharpness | int, 0 to 7| lossles | boolean | nearLossless | int | ignore | boolean |
most of int between 0 and 100
ignore
skip convert this image
read more https://developers.google.com/speed/webp/docs/cwebp
Bugs
- media queries not processing yet
- options of same images whith different bg-options in different css selectors may not applay