Convert your image in browser side(frontend side).
# npm
npm install webp-converter-browser
# yarn
yarn add webp-converter-browser
# pnpm
pnpm add webp-converter-browser
# bun
bun add webp-converter-browserimport { 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 */ })<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>| Name | Description | Default |
|---|---|---|
| quality | image quality | 0.75 |
| width | image width | Given image width |
| height | image height | Given image height |