Home

Awesome

jSquash 🥝

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

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 Web Worker environments.

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

⚠️ There is limited support for Node.js environments. The experimental Node.js support is provided for convenience and is not the primary focus of this project. For much better Node based alternatives please check out the Squoosh Node.js library and Sharp.

Differences with Squoosh

Packages

⚠️ All packages are ESM modules. You may need to manually transpile the packages if your build environment still relies on Commonjs formats.

Usage in the Browser

You can use the packages directly from the Unpkg CDN and can be the easiest way to get started.

import { decode } from "https://unpkg.com/@jsquash/jpeg?module";
import { encode } from "https://unpkg.com/@jsquash/webp?module";

const imageResponse = await fetch("https://picsum.photos/200/300.jpg");
const imageData = await decode(await imageResponse.arrayBuffer());
const webpImageBuffer = await encode(imageData);

To target a specific version, you can use the @version syntax.

import { encode } from "https://unpkg.com/@jsquash/webp@1.2.0?module";

Checkout the with CDN example for a working demo.

Usage in Node.js

Using jSquash modules with Node.js requires some additional steps so that the WASM binaries can be included. The support is limited and the WASM modules are not optimized for speed with Node.js.

Check out the with Node.js example for a working demo.

Usage in Cloudflare Workers

Using jSquash modules with Cloudflare Workers requires some additional steps so that the WASM binaries get included.

Depending on which format you are using check the examples below:

Other Examples

Known Issues

Issues with Vite and Vue build environments

This may present itself as any of the following errors:

As a workaround, update your vite.config.js file with the optimizeDeps property. Put affected module names in the exclude array. Vites dependency optimizer seems to be causing issues with the WASM modules.

import { defineConfig } from 'vite'

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

Issues with Nuxt build environments

This may present itself as a Cannot find module error. This is likely because Nuxt is anticipating third party modules to be in the Commonjs format.

Setting the following Nuxt config with the jSquash packages that your app uses seems to resolve it.

export default defineNuxtConfig({
  build: {
    transpile: ["@jsquash/png"],
  },
  vite: {
    optimizeDeps: {
      exclude: ["@jsquash/png"],
    },
  },
});

Issues with Nuxt/Vite and nested Web Workers

There is a known Vite bug breaking production code compilation when using a worker that references another worker, see issue #19 for more information.

Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:

In the meantime, you can install special builds that don't use workers to work around this issue: