Optimise images in your browser

Ever had to build a form where users can upload an image?

And the images are huge?

Well, you might want to consider optimising the images even before they leave your user’s computer.

How? you might ask. Well today we will look at 2 amazing open-source libraries

MozJpeg & OxiPng, to handle JPEG & PNG images respectively.

These are native tools written in C & rust respectively, and with the help of WASM, these can be run in your browser code, along with Javascript.

jSquash project has done a lot of heavy lifting for us here by compiling these tools to WASM and publishing them to npm registry.

Let’s look at how to use these in your web app.

These tools work on binary data. We need to convert our image data to ArrayBuffer.

If your image is coming from a fetch response, Response.arrayBuffer lets us access the ArrayBuffer.

Similarly, for image inputs, Blob.arrayBuffer gives us the underlying binary data.

Now let’s look at some code to see how it works.

import { decode, encode } from "https://unpkg.com/@jsquash/jpeg@1.4.0?module";
/**@param {ArrayBuffer} data */
async function optimiseJPEG(data) {
  const jpegData = await decode(data);
  // More paramters at https://github.com/jamsinclair/jSquash/blob/08e9be2de5b02c2af6035bb2e6a616f8b1545d29/packages/jpeg/meta.ts#L19
  const optimisedData = await encode(jpegData, { quality: 75 });
  return optimisedData;
}

It’s as easy as this.

There’s a teeny-tiny problem with this code. These tools are a bit computationally heavy, and due to the single threaded nature of Javascript, these functions can block the main loop. So, you might want to move this function to a WebWorker. It’s not as complicated as it sounds. We’ll fire up a Worker for each image, send the buffer to the worker, call the functions there, and send the new buffer back to the UI thread. With the transfer parameter of postMessage API, we’ll avoid some copying of the buffer back and forth between the worker and the UI thread.

/**
 * @param {Response|File} file
 * @param {string} workerCode
 * @returns {Promise<Blob>}
 */
async function optimiseImage(file, workerCode) {
  const buffer = await file.arrayBuffer();
  return new Promise((resolve, reject) => {
    const workerUrl = URL.createObjectURL(
      new Blob([workerCode], { type: "application/javascript" }),
    );
    const worker = new Worker(workerUrl, { type: "module" });

    worker.onmessage = (event) => {
      worker.terminate();
      URL.revokeObjectURL(workerUrl);
      /**@type {({ 0: 0, 1: ArrayBuffer } | { 0: 1, 1: Error })} */
      const data = event.data;
      if (data[0] === 0) {
        resolve(new Blob([data[1]], { type: file.type }));
      } else {
        reject(data[1]);
      }
    };
    worker.onerror = reject;
    worker.onmessageerror = reject;
    worker.postMessage(buffer, [buffer]);
  });
}

After this, it’s a matter of defining our worker code, and passing it to this function.

const MOZJPEG_WORKER = `
import { decode, encode } from "https://unpkg.com/@jsquash/jpeg@1.4.0?module";
onmessage = async ({ data }) => {
  try {
    data = await encode(await decode(data));
    postMessage({ 0: 0, 1: data }, [data]);
  } catch (error) {
    postMessage({ 0: 1, 1: error });
  }
};
`;
const OXIPNG_WORKER = `
import { optimise } from "https://unpkg.com/@jsquash/oxipng@2.3.0?module";
onmessage = async ({ data }) => {
  try {
    data = await optimise(data);
    postMessage({ 0: 0, 1: data }, [data]);
  } catch (error) {
    postMessage({ 0: 1, 1: error });
  }
};
`;
/**
 * @param {File} file
 * @returns {Promise<Blob>}
 */
function optimiseJpeg(file) {
  return optimiseImage(file, MOZJPEG_WORKER);
}
/**
 * @param {File} file
 * @returns {Promise<Blob>}
 */
function optimisePng(file) {
  return optimiseImage(file, OXIPNG_WORKER);
}

jSquash has more WASM codecs, like AVIF and WebP. If your usecase needs one of these, it should be straight forward as pulling those dependencies, and creating a worker for them.

Cheers