Batch Processing 500 Images in the Browser Without Crashing

I needed to convert 500 product images from one format to another. Server-based solutions quoted $15-50/month for batch processing. So I built a client-side solution using Web Workers and OffscreenCanvas.

The Architecture

The key insight: Canvas operations on large images block the main thread. The fix:

1. Web Workers handle image decoding/encoding off the main thread
2. OffscreenCanvas renders without DOM access — perfect for worker contexts
3. Transferable objects pass image data between workers with zero-copy

const worker = new Worker('processor.js');
const canvas = new OffscreenCanvas(800, 600);
// Worker processes image, main thread stays responsive

Real Performance

Processing 500 images (average 2MB each) on a mid-range laptop:

• Server upload approach: 12 minutes (mostly upload time)
• Browser-local with Workers: 3 minutes 40 seconds
• Memory usage: Stable at ~400MB with proper cleanup

The Tools

I packaged this into webp2png.io for batch WebP conversion and svg2png.org for vector batch processing.

For barcode generation, genbarcode.org uses similar worker-based rendering for bulk label generation.

If you're processing more than 50 images, Workers + OffscreenCanvas is the way to go. Your server bill will thank you.

Comments

[Bhavin Sheth]

Really like the focus on keeping the work in the browser. Using Workers + OffscreenCanvas is one of those optimizations that makes a noticeable difference once you start processing images at scale.