Demo

Introduce

Convert your image in browser side(frontend side).

Install

# npm
npm install webp-converter-browser

# yarn
yarn add webp-converter-browser

# pnpm
pnpm add webp-converter-browser

# bun
bun add webp-converter-browser

Usage

import { srcToWebP, blobToWebP, arrayBufferToWebP } from 'webp-converter-browser'

// ...

// When it cause CORS, you may failed to use `srcToWebP`
const webpBlob = await srcToWebP(pngSrc, { /** options */ })
// or
const webpBlob = await blobToWebP(pngBlob, { /** options */ })
// or
const webpBlob = await arrayBufferToWebP(jpgArrayBuffer, { /** options */ })

Vanilla

<script src="https://cdn.jsdelivr.net/npm/webp-converter-browser@latest/dist/index.min.js"></script>

<script>
  // ...

  // When it cause CORS, you may failed to use `srcToWebP`
  const webpBlob = await webpConverterBrowser.srcToWebP(pngSrc, { /** options */ })
  // or
  const webpBlob = await webpConverterBrowser.blobToWebP(pngBlob, { /** options */ })
  // or
  const webpBlob = await webpConverterBrowser.arrayBufferToWebP(jpgArrayBuffer, { /** options */ })
</script>

Options

| Name | Description | Default | |-|-|--------------------| | quality | image quality | 0.75 | | width | image width | Given image width | | height | image height | Given image height |