Optimize images with wasm on edge runtime
npm install wasm-image-optimizationWebAssembly 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
- gif
- svg
- jpeg (EXIF orientation is supported)
- png
- webp
- avif
- output format
- jpeg
- png
- webp
- thumbhash
- raw (Uncompressed (width\height\4))
- avif (default)
https://next-image-convert.vercel.app/

- Convert image
``ts
optimizeImage({
image: BufferSource | Buffer | string; // The input image data
width?: number; // The desired output width (optional)
height?: number; // The desired output height (optional)
quality?: number; // The desired output quality (0-100, optional)
format?: "jpeg" | "png" | "webp" | "avif" | "thumbhash" | "raw" | "none"; // The desired output format (optional)
speed?: number; // The desired speed (0-10, Slow-Fast, Optional)
filter?: boolean; // resize filter (default true)
):
Promise<
ArrayBuffer>
optimizeImageExt({
image: BufferSource | Buffer | string; // The input image data
width?: number; // The desired output width (optional)
height?: number; // The desired output height (optional)
quality?: number; // The desired output quality (0-100, optional)
format?: "jpeg" | "png" | "webp" | "avif" | "thumbhash" | "raw" | "none"; // The desired output format (optional)
speed?: number; // The desired speed (0-10, Slow-Fast, Optional)
filter?: boolean; // resize filter (default true)
):
Promise<{
data: Uint8Array,
originalWidth: number,
originalHeight: number,
width: number,
height: number}>
`
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()],
}));
`
- Multi Threading
`ts`
waitAll(): Promise
waitReady(retryTime?: number) :Promise
close(): void;
launchWorker(): Promise
- Cloudflare workers
import { optimizeImage } from 'wasm-image-optimization';import { optimizeImage } from 'wasm-image-optimization';
- Next.js
import { optimizeImage } from 'wasm-image-optimization';
- ESM (import base) & Deno Deploy
import { optimizeImage } from 'wasm-image-optimization';
- Node.js
import { optimizeImage } from 'wasm-image-optimization';
- Vite (Browser)
import { optimizeImage } from 'wasm-image-optimization/node-worker';
- Node.js(Multi thread)
import { optimizeImage } from 'wasm-image-optimization/web-worker';`
- Web Worker (Browser) Multi process
https://github.com/SoraKumo001/wasm-image-optimization-samples