vue-webp-image

A vue directive help check browser webp support and use the appropriate image format.

• Compatible with Vue3 and Vue2
• Lightweight (700b)

Installation

npm install vue-webp-image --save

Usage

main.js

• Vue3

import { createApp } from 'vue';
import App from './App.vue';
import VueWebpImage from 'vue-webp-image';

const app = createApp(App);
app.use(VueWebpImage);
app.mount('#app');

• Vue2

import Vue from 'vue';
import VueWebpImage from 'vue-webp-image';

Vue.use(VueWebpImage);

Component

• v-webp:src - use with img tag

<!-- local image -->
<img
  v-webp:src="require('./assets/image.webp')"
  :src="require('./assets/image.jpg')"
/>
<!-- online image -->
<img
  v-webp:src="'https://www.xxx.com/image.webp'"
  :src="'https://www.xxx.com/image.jpg'"
/>

• v-webp:bg - use css background-image property

<div
  class="bg-container"
  v-webp:bg="require('./assets/image.webp')"
></div>

<style>
.bg-container {
  background-image: url('./assets/image.jpg');
}
</style>

• v-webp:bgs - use css background-image property (put webp source and original source in an array)

<div
  v-webp:bgs="[require('./assets/image.webp'), require('./assets/image.jpg')]"
></div>