Small Image Processor

Try it

Upload an image or use the sample below. A Cloudflare Worker will process your image and report back the memory used for the operation.

Select your own image

Sample image ready. Upload your own or process this one as a raw request body.

Max width

Max height

Quality

Processing on Cloudflare Worker...

Process

What is sip?

sip is an image processing library built specifically for Cloudflare Workers. Workers have a 128 MB memory limit, and most image libraries blow through that the moment you decode a large photo. A 25 megapixel JPEG becomes ~100 MB of buffered pixels in memory.

sip avoids that by processing images one row at a time. It never holds the full decoded image in memory. For JPEG inputs it can even decode at a reduced resolution using DCT scaling, so a 6800px-wide photo might only decode at 850px internally.

The output is always JPEG. You give sip an image (JPEG, PNG, WebP, or AVIF), tell it the max dimensions and quality you want, and it gives you back a resized JPEG.

Why sip?

Cloudflare already has built-in image processing, but it can still be useful to run transforms directly inside your own Worker or Durable Object. That can mean fewer bindings to manage, better isolation inside the code that already owns the request, and easier distribution when you want image processing packaged as part of your application instead of a separate service boundary.

Installation

pnpm add @standardagents/sip

sip ships as ESM with TypeScript types included. You also need the WASM module loaded before processing — see WASM Build for setup.

API

Everything is a named export from @standardagents/sip. Most use cases only need transform and toResponse. The rest are there when you need more control.

import { ready } from '@standardagents/sip'

// Normal Worker / workerd usage
await ready()

// Optional escape hatches if you need to wire the module yourself
await ready({ wasm: compiledModule })
await ready({ wasm: wasmArrayBuffer })

import { inspect } from '@standardagents/sip'

// Accepts any ByteInput: Request, Response, ReadableStream,
// ArrayBuffer, Uint8Array, Blob, or AsyncIterable<Uint8Array>
const { info, source } = await inspect(request)

info.format    // 'jpeg' | 'png' | 'webp' | 'avif'
info.width     // pixel width
info.height    // pixel height
info.hasAlpha  // boolean

import { transform } from '@standardagents/sip'

// One-shot: decode → resize → encode as JPEG
const image = transform(input, {
  width: 2048,   // max output width (aspect ratio preserved)
  height: 2048,  // max output height
  quality: 82,   // JPEG quality 1–100
})

// image is an EncodedImage (AsyncIterable<Uint8Array>)
// with .info and .stats promises

import { decode } from '@standardagents/sip'

const pixels = decode(input)  // PixelStream (AsyncIterable<Scanline>)

const info = await pixels.info
// { width, height, originalFormat }

for await (const scanline of pixels) {
  scanline.data   // Uint8Array — RGB row (width * 3 bytes)
  scanline.width  // pixel width
  scanline.y      // row index
}

import { decode, resize } from '@standardagents/sip'

const pixels = decode(input)
const resized = resize(pixels, { width: 800, height: 800 })

// resized is a new PixelStream with updated dimensions
const info = await resized.info
// { width: 800, height: 600, originalFormat: 'jpeg' }

import { decode, encodeJpeg, resize } from '@standardagents/sip'

const pixels = decode(input)
const resized = resize(pixels, { width: 1024, height: 1024 })
const image = encodeJpeg(resized, { quality: 78 })

// image is an EncodedImage (AsyncIterable<Uint8Array>)

import { collect, transform } from '@standardagents/sip'

const image = transform(input, { width: 512, height: 512 })
const { data, info, stats } = await collect(image)

data   // ArrayBuffer — complete JPEG
info   // { width, height, mimeType, originalFormat }
stats  // { peakPipelineBytes, peakCodecBytes, bytesIn, bytesOut, ... }

import { toResponse, transform } from '@standardagents/sip'

const image = transform(request, { width: 1600, height: 1600 })

// Streams JPEG chunks directly into the Response body
return toResponse(image, {
  headers: { 'Cache-Control': 'public, max-age=31536000' },
})

import { toReadableStream, transform } from '@standardagents/sip'

const image = transform(input, { width: 1024 })
const stream = toReadableStream(image) // ReadableStream<Uint8Array>

Format Support

sip can read four image formats. The output is always JPEG.

Example

A single-file Cloudflare Worker that serves an upload page and returns the resized JPEG with metadata headers for the demo UI. The deploy button uses the dedicated standardagents/sip-worker-example template repo so it avoids Cloudflare's monorepo import edge cases.

Demo Worker View source

import { inspect, ready, toResponse, transform } from '@standardagents/sip'

export default {
  async fetch(request: Request) {
    await ready()
    const url = new URL(request.url)

    const HTML = '<!doctype html><html ...'

    // GET / → serve upload page
    if (request.method === 'GET') return new Response(HTML, {
      headers: { 'Content-Type': 'text/html' },
    })

    // POST /api/process → resize and stream back JPEG
    const { source } = await inspect(request)
    return toResponse(transform(source, {
      width:   Number(url.searchParams.get('width'))   || 1024,
      height:  Number(url.searchParams.get('height'))  || 1024,
      quality: Number(url.searchParams.get('quality')) || 82,
    }))
  },
}

Caveats

Output is always JPEG

sip doesn't produce PNG, WebP, or AVIF output. If the input has transparency, it's discarded.

WebP and AVIF use more memory

JPEG and PNG get the efficient scanline path. WebP and AVIF still need to decode the entire image into memory before sip can process it. They work fine, but they use significantly more RAM. Native WASM decoders for these formats are planned.

Memory numbers in the demo

The demo reports the peak memory that sip itself used during processing. That's not the same as total Worker memory — the runtime, your code, and V8 overhead are separate.