How I Built a Bulk Image Converter That Runs Entirely in Your Browser
A few months ago, I needed to convert 400 product images from JPG to WebP for a Shopify store. I tried the usual online converters. Every single one of them made me upload my files to a server, wait in a queue, and then download a ZIP. Some put watermarks on the free tier. Others capped me at 10 images unless I paid. For 400 images, that workflow was painful. But the part that really bothered me…
In recent times, a developer crafted a bulk image converter named BatchSet that operates entirely within a user's web browser. This tool converts products' JPG images to WebP format without requiring any uploads, sign-ups, watermarks, or the burden of a ZIP file download. The post explains the workings of the browser-side pipeline, its limitations, and why client-side processing is both more powerful and more constrained than one might expect.
The core pipeline of BatchSet involves several steps:
1. User dropping files: this action triggers the conversion process.
2. FileReader reads as ArrayBuffer: The browser reads the files and stores them as an ArrayBuffer.
3. createImageBitmap decodes in a Web Worker: The decoding of images happens off the main thread, allowing for smoother UI performance.
4. OffscreenCanvas draws + encodes to target format: The decoded bitmap is drawn onto an OffscreenCanvas, which is then used to convert the image into the desired format (WebP, JPG, PNG, etc.).
5. JSZip packages everything: The converted images are packaged into a ZIP file using JSZip.
6. Auto-download ZIP: Once packaged, the ZIP file is downloaded automatically.
Key points of the pipeline include:
- createImageBitmap: This function decodes images off the main thread, which significantly improves performance.
- OffscreenCanvas: This API enables offloading encoding tasks, particularly for large images or high-quality outputs, to a worker thread without freezing the tab.
- Web Workers: These are used to run multiple workers in parallel, improving the conversion speed. The number of workers is determined by the device's hardware concurrency.
- JSZip: This library is used to package the converted images into a ZIP file while minimizing memory usage. It streams images into JSZip to avoid memory explosions, especially important for large batch conversions.
- Limitations: The browser cannot process all image formats, such as HEIC (iPhone photos) or TIFF files, which require server-side processing. Additionally, specific features like watermarking with complex fonts and layouts are better handled on the server.
The privacy advantage of BatchSet is significant: since the images never leave the user's device, there is no risk of sensitive data being uploaded to a server. However, this approach requires robust hardware, as heavy processing can strain devices with limited memory.
Comparatively, converting images on a local machine versus a browser on modern hardware shows a considerable difference in processing time and efficiency. For example, converting 100 product images at 80% quality can be done in approximately 48 seconds on a local browser with 8 cores, whereas the same task might take around 1 hour and 35 minutes on a typical server-based converter with an upload process.
The code provided in the source segment outlines a minimal worker script that handles the conversion process. It includes decoding the image, calculating dimensions if a maximum width is specified, drawing it onto an OffscreenCanvas, and encoding it to the target format (WebP in this case).
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
