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
    • thumbhash
    • raw (Uncompressed (width*height*4))
    • avif (default)

Example

https://next-image-convert.vercel.app/

Functions

• Convert image

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}>

WebWorker on Vite

To use Vite, the following settings are required

• vite.config.ts

import wasmImageOptimizationPlugin from "wasm-image-optimization/vite-plugin";

export default defineConfig(() => ({
  plugins: [wasmImageOptimizationPlugin()],
}));

• Multi Threading

waitAll(): Promise<void>
waitReady(retryTime?: number) :Promise<void>
close(): void;
launchWorker(): Promise<void>

Supported Environments

• Cloudflare workers
  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.js(Multi thread)
  import { optimizeImage } from 'wasm-image-optimization/node-worker';
• Web Worker (Browser) Multi process
  import { optimizeImage } from 'wasm-image-optimization/web-worker';

Samples

https://github.com/SoraKumo001/wasm-image-optimization-samples