How browser-based image conversion works
Every conversion is a four-step pipeline running in your browser. For JPEG and PNG the browser's own Canvas API handles the encode directly. For WebP on Safari and AVIF on every browser the page loads a lightweight WebAssembly codec on demand — still all local, your images never leave the device.
- 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 for PNG, JPEG, and Chrome/Firefox WebP. For Safari WebP and AVIF encoding, a WebAssembly codec worker loads on first use and handles the encode in a background thread. PNG output is always lossless; JPEG, WebP and AVIF 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, WebP, and AVIF. AVIF output is supported via a WebAssembly encoder that loads on demand in every browser — no native Canvas encoder needed.
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.
How does AVIF output work?
AVIF encoding uses a WebAssembly codec that loads on demand the first time you select the AVIF format — no plugin, no browser flag, no waiting on a future Chrome release. The WASM binary is served from our own origin, encodes your image entirely in a background thread, and returns a standard image/avif blob ready for download. The only network request is the one-time fetch of the codec itself; no image data ever leaves your device. Once loaded, the encoder stays cached for the session so subsequent conversions are faster. AVIF files are typically 20–30% smaller than WebP and 50% smaller than JPEG at equivalent quality, making them the best choice for performance-sensitive sites.
Drop your images, pick a format, convert. Everything runs in your tab. No upload, no account, no waiting on a server queue.