yankeetube / jsquash

Browser & V8 Runtime focussed wasm bundles derived from the Squoosh App.

jSquash 🥝

Collection of WebAssembly image codecs that support the browser and are derived from the Squoosh App

Squoosh already provides a Node.js library.

The aim of this library is to provide an easy experience to encode, decode and modify images with the tools you know and love from Squoosh in the Browser and V8 runtimes 🖥️.

jSquash name is inspired by jQuery and Squoosh. It symbolizes the browser support focus of these packages.

Differences with Squoosh

• The codecs and tools are built for both Web and Web Worker environments
• No dynamic code execution, can be run in strict environments that do not allow code evaluation. Like Cloudflare Workers.
• Does not rely on TextEncoder/TextDecoder API (could reduce performance) but allows it to be run in simpler V8 runtimes that only support UTF-8 (Cloudflare Workers, Vercel Edge Functions etc.)

Packages

• @jSquash/avif - An encoder and decoder for AVIF images using the libavif library
• @jSquash/jpeg - An encoder and decoder for JPEG images using the MozJPEG library
• @jSquash/oxipng - A PNG image optimiser using Oxipng
• @jSquash/png - An encoder and decoder for PNG images using the rust PNG crate
• @jSquash/resize - An image resizer tool using rust resize and hqx libraries. Supports both downscaling and upscaling.
• @jSquash/webp - An encoder and decoder for WebP images using libwebp
• ...more to come

Examples

• Cloudflare Worker function that upgrades images to webp
• Web App using image codecs bundled with Rollup
• Web App using image codecs bundled with Webpack

Known Issues

Vite Project throws TypeError: Failed to construct 'URL': Invalid URL

This affects WASM modules using JS glue code provided by rust wasm-pack.

As a workaround, update your vite.config.js file with the optimizeDeps property. Put affected module names in the exclude array.

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    exclude: ["@jsquash/png"]
  }
})