Image compression utilities

Compatible with node and browser environment.

Currently supports:
- PNG (imagequant + oxipng) via encodePng / encodePngInWorker
- JPEG/JPG (MozJPEG) via encodeJpeg / decodeJpeg / encodeJpegInWorker

notes

for vite users add the following to vite.config.ts

``ts
optimizeDeps: {
exclude: ["@cottonc/compress-image"],
},
`

PNG (node)

`ts
import { PNG } from "pngjs";
import fs from "fs/promises";
import { encodePng, EPngProgress } from "@cottonc/compress-image";

const pngBuffer = await fs.readFile("./test.png");
const png = PNG.sync.read(pngBuffer);

const compressedPng = await encodePng({
imageData: {
data: new Uint8ClampedArray(png.data),
width: png.width,
height: png.height,
},
options: {
// 0 - 100 default 100
quality: 100,
// 1 - 10 default 4
quantize_speed: 4,
// 0 - 6 default 4
oxi_level: 4,
// only use oxi for lossless compression, default false
losses_compress: false,
},
progressCallback: (progress, message) => {
console.log(${EPngProgress[progress]}: ${message});
},
});
`

PNG (browser, Worker auto)

`ts
import { encodePngInWorker, EPngProgress } from "@cottonc/compress-image";

async function fileToImageData(
file: File
): Promise<{ imageData: ImageData; width: number; height: number }> {
const bitmap = await createImageBitmap(file);
const canvas = new OffscreenCanvas(bitmap.width || 1, bitmap.height || 1);
const ctx = canvas.getContext("2d");

if (!ctx) {
throw new Error("Canvas is not supported in this browser");
}

ctx.drawImage(bitmap, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
return { imageData, width: canvas.width, height: canvas.height };
}

const { imageData, width, height } = await fileToImageData(file);
const transferable = new Uint8ClampedArray(imageData.data);

const result = await encodePngInWorker(
{
buffer: transferable.buffer,
width,
height,
options: {
quality: 80,
quantize_speed: 4,
oxi_level: 4,
losses_compress: false,
},
},
{
onProgress: (progress, message) => {
console.log(${EPngProgress[progress]}: ${message});
},
}
);

// Uint8Array of compressed PNG bytes
const compressedPngBytes = new Uint8Array(result.buffer);
const blob = new Blob([compressedPngBytes.buffer], { type: 'image/png' })
`

$3

`ts
import { encodePng, EPngProgress } from "@cottonc/compress-image";

function readFileAsArrayBuffer(file: File): Promise {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
if (event.target?.result instanceof ArrayBuffer) {
resolve(event.target.result);
} else {
reject(new Error("Failed to read file as ArrayBuffer."));
}
};
reader.onerror = (err) => reject(new Error("FileReader error: " + err));
reader.readAsArrayBuffer(file);
});
}

async function decodePngToRgba(
pngBytes: Uint8Array
): Promise<{ width: number; height: number; data: Uint8Array }> {
const blob = new Blob([pngBytes], { type: "image/png" });

const imageBitmap = await createImageBitmap(blob);

const canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
const ctx = canvas.getContext("2d");

if (!ctx) {
throw new Error("Failed to get canvas context");
}

// Draw the image to the canvas
ctx.drawImage(imageBitmap, 0, 0);

// Get the raw RGBA pixel data
const imageData = ctx.getImageData(
0,
0,
imageBitmap.width,
imageBitmap.height
);

// Clean up
imageBitmap.close();

return {
width: imageData.width,
height: imageData.height,
data: new Uint8ClampedArray(imageData.data.buffer),
};
}

const imageData = await readFileAsArrayBuffer(file);
const { width, height, data } = await decodePngToRgba(
new Uint8Array(imageData)
);

// same as node
const compressedPng = await encodePng({
imageData: {
data,
width,
height,
},
options: {
quality: 100,
quantize_speed: 4,
oxi_level: 4,
losses_compress: false,
},
progressCallback: (progress, message) => {
console.log(${EPngProgress[progress]}: ${message});
},
});
`

JPEG/JPG (node)

`ts
import fs from "fs/promises";
import { decodeJpeg, encodeJpeg } from "@cottonc/compress-image";

const jpgBuffer = await fs.readFile("./test.jpg");

const imageData = await decodeJpeg(jpgBuffer);

const compressedJpg = await encodeJpeg({
imageData,
options: { quality: 75, progressive: true },
});
`

JPEG/JPG (browser, Worker auto)

`ts
import { encodeJpegInWorker } from "@cottonc/compress-image";

// You need raw RGBA ImageData (e.g. from canvas/getImageData).
const transferable = new Uint8ClampedArray(imageData.data);

const result = await encodeJpegInWorker({
buffer: transferable.buffer,
width: imageData.width,
height: imageData.height,
options: { quality: 75, progressive: true },
});

const compressedJpgBytes = new Uint8Array(result.buffer);
const blob = new Blob([compressedJpgBytes.buffer], { type: "image/jpeg" });
``