@michaelcuneo/sharpless

A zero-dependency, edge-ready image optimiser powered by Web APIs — like Sharp, but sharpless.

Sharpless is a modern, pure-JavaScript image optimiser that works everywhere — in browsers, in Node, and in edge runtimes (like Vercel Edge, Cloudflare Workers, or AWS Lambda via SST). It uses the Canvas and ImageBitmap APIs instead of native binaries, so it’s lightweight, portable, and instant.

Features

• 🧬 Zero native dependencies — no Sharp, no binaries, no fs
• ⚡ Edge-ready — works in serverless and browser environments
• 🖼️ Multiple outputs — create WebP, JPEG, AVIF, or custom formats
• 📱 Responsive variants — define any set of target widths
• 🧠 Configurable — custom quality, labels, storage callbacks
• 🪶 Tiny footprint — pure ESM, tree-shakable

Install

npm install @michaelcuneo/sharpless

Usage

Example — basic usage

import { optimiseImage } from '@michaelcuneo/sharpless';

const file = input.files[0]; // File | Blob | ArrayBuffer | Uint8Array

const variants = await optimiseImage(file, {
	formats: ['image/webp', 'image/jpeg'],
	targets: [
		{ width: 480, label: 'mobile' },
		{ width: 1024, label: 'tablet' },
		{ width: 3840, label: '4k' }
	],
	quality: 0.8
});

for (const v of variants) {
	console.log(v.label, v.format, v.width, v.height, v.size);
	// v.blob contains the optimised image
}

Example — browser preview

import { optimiseImage } from '@michaelcuneo/sharpless';

async function handleUpload(e: Event) {
	const file = (e.target as HTMLInputElement).files?.[0];
	if (!file) return;

	const results = await optimiseImage(file);
	for (const r of results) {
		const url = URL.createObjectURL(r.blob);
		document.body.innerHTML += `
      <div>
        <p>${r.label} – ${r.format} (${r.width}×${r.height})</p>
        <img src="${url}" width="${r.width}">
      </div>`;
	}
}

Example — custom storage

You can decide where to store or send your optimised files.

import { optimiseImage } from '@michaelcuneo/sharpless';

const results = await optimiseImage(file, {
	store: async (img) => {
		const buf = await img.blob.arrayBuffer();
		const url = await uploadToS3(buf, img.format); // your function
		return url;
	}
});

This pattern allows you to integrate with any storage provider:

• AWS S3 / SST Buckets
• Cloudflare R2
• Supabase Storage
• Local file systems (Node)
• CDN edge caches

API Reference

optimiseImage(input, options?)

| Parameter | Type | Description | | ----------------- | -------------------------------------------------- | -------------------------------------------------------------- | ------------- | ------------ | ----------------------------- | | input | File | Blob | ArrayBuffer | Uint8Array | The source image to optimise. | | options.targets | { width: number; label: string }[] | Output sizes. Default: mobile/tablet/4k. | | options.formats | ('image/webp' \| 'image/jpeg' \| 'image/avif')[] | Output formats. Default: WebP + JPEG. | | options.quality | number | Compression quality (0–1). Default: 0.82. | | options.store | (result: OptimisedImage) => Promise<string> | Optional callback to upload/store images. Should return a URL. |

Returns:

Promise<OptimisedImage[]>

Each item has:

type OptimisedImage = {
	label: string; // e.g. 'mobile', 'tablet', '4k'
	format: string; // e.g. 'image/webp'
	width: number;
	height: number;
	size: number; // bytes
	blob: Blob; // the optimised image
};

Helper Utilities

You can import these (optional) utilities from @michaelcuneo/sharpless/utils:

import { blobToBase64, blobToBuffer } from '@michaelcuneo/sharpless/utils';

const base64 = await blobToBase64(img.blob);
const buffer = await blobToBuffer(img.blob);

Environment Support

| Environment | Supported | Notes | | ------------------------------------ | --------- | ------------------------------------------ | | Browser | ✅ | Fully supported | | Node ≥ 20 | ✅ | Requires --experimental-offscreen-canvas | | Vercel Edge Functions | ✅ | Built-in OffscreenCanvas | | Cloudflare Workers / Deno Deploy | ✅ | Native canvas support | | AWS Lambda via SST | ✅ | Works in Edge or Function mode |

Example Projects

• SvelteKit Demo (coming soon)

License

MIT © Michael Cuneo

Acknowledgements

Inspired by Sharp, but reimagined for a world where everything runs on the Edge.