https://github.com/node-libraries/wasm-image-optimization
Optimize images with wasm on edge runtime
https://github.com/node-libraries/wasm-image-optimization
Last synced: about 2 months ago
JSON representation
Optimize images with wasm on edge runtime
- Host: GitHub
- URL: https://github.com/node-libraries/wasm-image-optimization
- Owner: node-libraries
- License: mit
- Created: 2023-12-11T05:20:16.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-07T23:42:34.000Z (2 months ago)
- Last Synced: 2025-03-29T00:04:47.313Z (about 2 months ago)
- Language: TypeScript
- Size: 3.59 MB
- Stars: 79
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# wasm-image-optimization
WebAssembly is used to provide image transformation functionality.
- Frontend
- Next.js (Multithreading support)
- React Router (Multithreading support)
- Backend
- Cloudflare Workers
- Deno Deploy
- Node.js (Multithreading support)
- Convert
- source format
- svg
- jpeg (EXIF orientation is supported)
- png
- webp
- avif
- output format
- jpeg
- png
- webp
- avif (default)
## Example
https://next-image-convert.vercel.app/
## Functions
- Convert image
```ts
optimizeImage({
image: ArrayBuffer,
width?: number,
height?:number,
quality?: number, // quality: 1-100
format?: "png" | "jpeg" | "avif" | "webp" | "none"}
speed?: number // avif-speed: 0-10 (Slow-Fast, default: 6)
):
Promise<
ArrayBuffer>
optimizeImageExt({
image: ArrayBuffer,
width?: number,
height?:number,
quality?: number,
format?: "png" | "jpeg" | "avif" | "webp" | "none"}
speed?: number // avif-speed: 0-10 (Slow-Fast, default: 6)
):
Promise<{
data: Uint8Array,
originalWidth: number,
originalHeight: number,
width: number,
height: number}>
```
- Multi Threading
```ts
waitAll(): Promise
waitReady(retryTime?: number) :Promise
close(): void;
launchWorker(): Promise
```
## WebWorker on Vite
To use Vite, the following settings are required
- vite.config.ts
```ts
import wasmImageOptimizationPlugin from "wasm-image-optimization/vite-plugin";
export default defineConfig(() => ({
plugins: [wasmImageOptimizationPlugin()],
}));
```
## Supported Environments
- Cloudflare workers
`import { optimizeImage } from 'wasm-image-optimization';`
- Next.js (Webpack)
`import { optimizeImage } from 'wasm-image-optimization/next';`
- ESM (import base) & Deno Deploy
`import { optimizeImage } from 'wasm-image-optimization';`
- Node.js
`import { optimizeImage } from 'wasm-image-optimization';`
- Node.js(Multi thread)
`import { optimizeImage } from 'wasm-image-optimization/node-worker';`
- Vite (Browser)
`import { optimizeImage } from 'wasm-image-optimization/vite';`
- Web Worker (Browser) Multi process
`import { optimizeImage } from 'wasm-image-optimization/web-worker';`
## Samples
https://github.com/SoraKumo001/wasm-image-optimization-samples