How browser-based image conversion works
Every conversion is a four-step pipeline running entirely in JavaScript. No codec library is downloaded and no server is involved. The browser’s own Canvas API handles the decode, the resize, and the re-encode in memory, then hands you a Blob the page can either preview or zip up. Because every step lives inside the tab’s sandbox, the original files never reach the network.
- Read each uploaded file as a Blob and create an object URL so the browser can decode it locally, without copying bytes to a server or persisting them to disk.
- Draw the decoded image onto an offscreen Canvas element, applying any resize constraint while preserving the original aspect ratio. If you picked a max width or max dimension, this is where the downscale happens.
- Call
canvas.toBlob(callback, targetMimeType, quality)to re-encode the pixels. PNG output is always lossless; JPEG and WebP honour the quality slider, which maps directly to the encoder’s quantization setting. - Show a before/after thumbnail with the output dimensions and file size, then offer a per-image download button or a single ZIP for the whole batch. The ZIP is built in memory using fflate, an 8 KB library that runs entirely in the tab.
Why convert image formats?
- Switching from PNG to WebP cuts typical file sizes by 25 to 35% with no visible quality loss at 0.8 quality, which lowers page weight directly and improves Core Web Vitals LCP scores. On a typical product-detail page with eight hero images, that’s the difference between a 4 MB first paint and a 2.6 MB one.
- PNG preserves transparency where JPEG discards it. Going PNG to JPEG renders transparent pixels against a white background, which is exactly what you want when the destination (an email client, an older CMS, a print template) can’t accept PNG in the first place.
- Social platforms and ad networks have strict format requirements. Facebook and LinkedIn prefer JPEG for photo uploads, Twitter’s OG preview pipeline accepts WebP, and some programmatic ad servers reject anything that isn’t JPEG. A quick conversion pass before upload avoids the rejected-creative ping-pong.
- Standardising a batch of mixed-format images (PNG screenshots, JPEG photos, WebP exports from a designer) to a single output format before uploading to a CMS or DAM removes format-handling branches from the ingest pipeline. One format in, one format out, far fewer conditional code paths downstream.
Common applications
Format conversion comes up whenever the source format and the destination’s expectations don’t match. Three patterns we see again and again.
- Preparing product photos for a Shopify or WooCommerce store. JPEG originals get converted to WebP at quality 0.85 for the public storefront, while PNG copies are kept aside for print-ready exports and marketplace listings that still reject WebP.
- Converting designer-supplied PNG exports to JPEG or WebP before they enter a React or Next.js build. The framework’s image pipeline picks up a smaller source and the production bundle ships fewer bytes per route.
- Batch-processing a folder of screenshots from a QA run. PNG to JPEG at quality 0.9 typically shrinks a 50-screenshot archive from around 120 MB down to under 20 MB before it gets attached to a bug tracker ticket.
A worked example: 2 MB PNG to 300 KB WebP
A 2 MB PNG hero image at 2400×1600 pixels is a common payload on marketing landing pages. It’s a fair benchmark for what the conversion saves on a real page.
Drop the PNG into the upload zone, pick WebP as the target format, set quality to 0.8, and set max width to 1200 to halve the pixel dimensions. The Canvas pipeline draws the image at 1200×800 with the aspect preserved, then re-encodes to WebP. The output card shows the result, typically in the 280 to 320 KB range, which is roughly an 85% reduction against the original. Click Download on the card to grab the single file, or click Download .zip at the bottom of the panel if you converted several images in one pass. The whole round-trip, from drop to download, runs in a few hundred milliseconds for an image this size and consumes zero bandwidth after the page itself finishes loading.
Which formats are supported?
On the input side, any format the browser can decode is accepted: PNG, JPEG, WebP, GIF, and BMP cover virtually every file a designer or screenshot tool produces. Output formats are PNG (always lossless), JPEG, and WebP. AVIF output isn’t supported yet because the Canvas API’s AVIF encoder is only present in Chrome 105 and later and is missing from Safari and Firefox. A WebAssembly-based AVIF path is planned for v1.1 so the feature works across every modern browser.
Does this happen on my device?
Yes, fully. The page uses the browser’s native Canvas API and the Web File API to decode and re-encode each image in memory. No image data is sent to a server, no temporary upload, no cloud round-trip. You can verify it yourself: open DevTools, switch to the Network panel, and run a conversion. The only outbound requests you’ll see are the initial page load and ad calls. Nothing image-shaped leaves the tab.
What’s the quality trade-off between PNG and JPEG?
PNG is a lossless format. Every pixel survives the encode cycle exactly, which makes PNG the right pick for screenshots, UI captures, and any image with sharp edges or large flat-colour regions. JPEG uses DCT compression and discards fine detail that the eye rarely notices, which makes it the right pick for photographs. Quality 0.8 is a common sweet spot where the visual difference from the original is hard to spot but the file lands 4 to 6 times smaller than the PNG equivalent. WebP can operate in both lossless and lossy modes; the quality slider here drives the lossy encoder, and at quality 0.85 WebP typically beats JPEG by 25 to 30% on natural-photo content.
When will AVIF support arrive?
AVIF encoding via canvas.toBlob(…, 'image/avif') only works in Chrome 105 and later today; Safari and Firefox don’t support it natively. A v1.1 release will add an opt-in AVIF path using a lightweight WebAssembly encoder so the feature works in every modern browser without waiting for native parity. Until then, the AVIF option in the format picker is shown as ’coming soon’ and the WebP encoder is the recommended alternative. WebP is supported by every browser shipped since 2021 and produces files within 10 to 20% of AVIF’s size for most real-world images.
Drop your images, pick a format, convert. Everything runs in your tab. No upload, no account, no waiting on a server queue.