Vite-plugin-webp NPM

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-webp

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'],
      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