# vite-plugin-webp

> a plugin of vite for transform webp

Latest version **1.1.3** (published 2023-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-webp
pnpm add vite-plugin-webp
yarn add vite-plugin-webp
bun add vite-plugin-webp
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-02-06 |
| First published | 2022-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.1 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | luchuanqi |
| Maintainers | lcq |
| Keywords | vite-plugin-webp, webp, clip, vite, sharp |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-webp
- Repository: https://github.com/luchuanqi/vite-plugin-webp
- Homepage: https://github.com/luchuanqi/vite-plugin-webp/blob/master/README.md
- Issues: https://github.com/luchuanqi/vite-plugin-webp/issues
- npm.io page: https://npm.io/package/vite-plugin-webp

## Dependencies (2)

- [sharp](https://npm.io/package/sharp.md) ^0.30.7
- [cssjson](https://npm.io/package/cssjson.md) ^2.1.3

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2023-02-06
- 1.1.2 — 2023-02-06
- 1.1.1 — 2022-08-17
- 1.1.0 — 2022-08-17
- 1.0.2 — 2022-08-17
- 1.0.1 — 2022-08-15
- 1.0.0 — 2022-08-15

## README

# vite-plugin-webp  

a plugin of vite for transform webp  

> 1. vite-plugin-webp will create webp pictures
> 2. vite-plugin-webp can transform JPEG, PNG, GIF and AVIF images of varying dimensions to `webp`

## Usage

```bash
npm install vite-plugin-webp
```

```javascript
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`  
```javascript
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)
```css
.standard {
  background: url(./assets/standard.png);
}
```
3.`index.css` (output)
```output
.standard {
  background: url(./assets/standard.png);
}
.g-webp .standard {
  background: url(./assets/standard.webp);
}
```
4. util.js
```javascript
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);
  }
};
```
5. main.js
```javascript
import { webpClass } from './util.js';

webpClass();
```

## Javascript Example
1.`vite.config.js`
```javascript
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`
```javascript

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
```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`.

---
_Source: https://npm.io/package/vite-plugin-webp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._