vite-plugin-webp
a plugin of vite for transform webp
- vite-plugin-webp will create webp pictures
- vite-plugin-webp can transform JPEG, PNG, GIF and AVIF images of varying dimensions to
webp
Usage
npm install vite-plugin-webpimport webp from 'vite-plugin-webp';
export default defineConfig({
plugins: [
webp({
include: path.join(__dirname, 'src/pages/index'),
declude: path.join(__dirname, 'src/pages/index/ignore.vue'),
imageType: ['.png', '.jpg'],
shartOptions: {
// https://sharp.pixelplumbing.com/api-output#webp
quality: 100
}
})
]
});CSS Example
1.vite.config.js
import webp from 'vite-plugin-webp';
export default defineConfig({
plugins: [
webp({
include: path.join(__dirname, 'src/pages/index'),
declude: path.join(__dirname, 'src/pages/index/ignore.vue'),
imageType: ['.png', '.jpg']
})
]
});2.index.css (entry)
.standard {
background: url(./assets/standard.png);
}3.index.css (output)
.standard {
background: url(./assets/standard.png);
}
.g-webp .standard {
background: url(./assets/standard.webp);
}
- util.js
export const isSupportWebp = () => {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
} catch (err) {
return false;
}
};
export const webpClass = (className = 'g-webp') => {
if (isSupportWebp) {
document.body.classList.add(className);
} else {
document.body.classList.remove(className);
}
};- main.js
import { webpClass } from './util.js';
webpClass();Javascript Example
1.vite.config.js
import webp from 'vite-plugin-webp';
export default defineConfig({
plugins: [
webp({
onlyWebp: path.join(__dirname, 'src/pages/index/assets'),
imageType: ['.png', '.jpg']
})
]
});2.main.js
const isSupportWebp = function () {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
} catch(err) {
return false;
}
}
const loadCom = function(i) {
const path = ['./assets/expand.png', './assets/expand.webp'];
return new URL(path[i], import.meta.url).href;
}
this.url = isSupportWebp() ? loadCom(1) : loadCom(0)3.template.html
<img :src="url" alt="">Clip
The image size is 2400x2500, but rendering only need 240x250.
If the filename is example240x250.png, the width of output file is 240 and the height of output file is 250.