Skip to main content
toolcool
Utility

Image Format Converter - PNG JPG WebP AVIF Local Converter

Runs locally · no upload

Convert images between PNG, JPG, WebP and AVIF locally in your browser. Batch processing, quality control, transparent-to-white fill and size limits, with zero upload for full privacy and speed.

Overview

Convert between PNG, JPG, WebP and AVIF locally in your browser. Tune lossy quality, fill transparent areas with a custom background, and resize proportionally by max width. All decoding, scaling and encoding happen in a Canvas - your files never leave the device. Up to 20 files per batch, 20 MB each.

How to use

  1. Click "Choose files" and pick up to 20 PNG / JPG / WebP / AVIF images
  2. Pick a target format (PNG / JPG / WebP / AVIF) from the dropdown
  3. Adjust the quality percentage (0-100, ignored when target is PNG)
  4. If target is JPG and the source has alpha, toggle "Fill background" and pick a color
  5. Optionally set a max width in pixels (0 keeps the original)
  6. Click "Convert", watch the progress bar, then download each file

Formula

savingPercent = (originalSize - convertedSize) / originalSize x 100% ; Canvas.toBlob(callback, mimeType, quality) is used for PNG/JPG/WebP/AVIF encoding with quality in [0, 1] ; AVIF encode/decode relies entirely on native browser support (Chrome 90+ / Edge 90+ / Firefox 113+ / Safari 16.4+), with zero npm dependencies ; proportional resize: targetWidth = min(originalWidth, maxWidth) and targetHeight = originalHeight x targetWidth / originalWidth

Common scenarios

Web performance: PNG screenshots to WebP

Batch-convert a set of 800 KB PNG tutorial screenshots to WebP at quality 85. Each lands at 150-250 KB, LCP improves by 30%+ and alpha is preserved - no white-fill needed.

E-commerce: transparent PNG to JPG

Convert transparent-background product shots to JPG with the white-fill toggle and #ffffff color. Sizes drop 60-80%, detail pages load faster, and old browsers that don't support alpha render cleanly.

AVIF showcase: side-by-side comparison

Convert a 1 MB JPG photo to AVIF at quality 70 - typically 200-350 KB (another 30-50% saving). Old Safari/Firefox still have limited AVIF decode support, so this is best paired with a picture/source fallback.

FAQ

Will my images be uploaded to a server? How is my privacy protected?

No. Everything runs locally in your browser. Files are read via FileReader and re-encoded via Canvas - there is no fetch or XHR upload at any point, and no external npm packages are loaded. Memory is released when you close the tab.

Why does converting PNG to WebP or AVIF cut size by more than 50%?

PNG is lossless and stores every pixel exactly. WebP and AVIF support modern lossy codecs that drop high-frequency detail the eye cannot see, so photographic PNGs typically shrink to 30-50% of their original size, screenshots to 50-70%.

JPG converted to PNG often grows. Which format should I use when?

JPG is lossy and PNG is lossless. Re-encoding an already-lossy JPG to PNG cannot restore detail and only bloats the file. Rule of thumb: photographs use JPG/WebP/AVIF; text, line art and transparent screenshots/icons use PNG/WebP; modern-browser-only deliverables can use AVIF for max savings.

What is AVIF? Which browsers support it and what about compatibility?

AVIF is a next-gen image format based on AV1 video coding and is typically 20-30% smaller than WebP. Chrome 85+, Edge 90+, Firefox 113+ and Safari 16.4+ decode AVIF natively; Chrome 90+ and Edge 90+ encode it via Canvas.toBlob. This tool relies entirely on native browser support (zero npm dependencies); if Canvas.toBlob doesn't support AVIF, the UI shows a friendly fallback message.

PNG transparent area turned black after converting to JPG - how do I fix it?

JPG has no alpha channel and treats transparency as black by default. The tool ticks 'Fill background' with #ffffff out of the box; you can pick any hex color (e.g. brand color #f5f5f5). If you uncheck it, Canvas falls back to its default and the UI warns you accordingly.

Why default to quality 85? What is the difference between 100 and 85?

85 is the sweet spot for JPEG/WebP: above 90 you barely see any quality gain but can pay 30-60% more bytes; 70-85 is visually indistinguishable; below 60 shows blocking and color banding. Use 85-92 for photography, 75-85 for content images, 60-70 for thumbnails.

How many files per batch? Is there a per-file size limit?

Up to 20 files per batch and 20 MB per file - this prevents the browser from exhausting memory and crashing. Processing is sequential and the progress bar reflects current completion. Files exceeding either limit are flagged 'skipped' and never block the rest of the batch.

Related tools