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: Web Workers handle image decoding/encoding off the main thread OffscreenCanvas renders without DOM access — perfect for worker contexts 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.