{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreihc7dncrsjot6ztcxsdrqij4l4imft3nyyr7p5vdakbalqwz56fke",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpi46ydeqen2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreigg2vhtpmtni5hacc2tph7wen5dsalojzdn7jz6wulusl4kly26gy"
    },
    "mimeType": "image/webp",
    "size": 70696
  },
  "path": "/jamiepark-design/batch-processing-500-images-in-the-browser-without-crashing-1o58",
  "publishedAt": "2026-06-30T03:13:27.000Z",
  "site": "https://dev.to",
  "tags": [
    "javascript",
    "performance",
    "showdev",
    "webdev",
    "webp2png.io",
    "svg2png.org",
    "genbarcode.org"
  ],
  "textContent": "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.\n\n##  The Architecture\n\nThe key insight: Canvas operations on large images block the main thread. The fix:\n\n  1. **Web Workers** handle image decoding/encoding off the main thread\n  2. **OffscreenCanvas** renders without DOM access — perfect for worker contexts\n  3. **Transferable objects** pass image data between workers with zero-copy\n\n\n\n\n    const worker = new Worker('processor.js');\n    const canvas = new OffscreenCanvas(800, 600);\n    // Worker processes image, main thread stays responsive\n\n\n##  Real Performance\n\nProcessing 500 images (average 2MB each) on a mid-range laptop:\n\n  * Server upload approach: 12 minutes (mostly upload time)\n  * Browser-local with Workers: 3 minutes 40 seconds\n  * Memory usage: Stable at ~400MB with proper cleanup\n\n\n\n##  The Tools\n\nI packaged this into webp2png.io for batch WebP conversion and svg2png.org for vector batch processing.\n\nFor barcode generation, genbarcode.org uses similar worker-based rendering for bulk label generation.\n\nIf you're processing more than 50 images, Workers + OffscreenCanvas is the way to go. Your server bill will thank you.",
  "title": "Batch Processing 500 Images in the Browser Without Crashing"
}