Image Converter — JPG, PNG, and WebP

Reads 5 formats, writes 3 — and why

The most important thing to grasp about any browser-based converter: a gap separates what it can read from what it can write, because the 2 lists are not the same. This tool decodes whatever the browser can decode — JPG, PNG, WebP, and on most browsers BMP and GIF too — by handing the file to a standard Imageelement, which uses the browser's built-in decoders for all 5 input types. But writing is different: the output goes through an HTML5 canvas and its toDataURL encoder, and that encoder ships with exactly 3 MIME types guaranteed across all 4 major browser engines — image/png, image/jpeg, and image/webp. There is no image/bmp and no image/gifencoder in the canvas API — the specification lists only those 3 MIME types — and for GIF that is doubly true because an animated GIF packs many frames (often 10 to 60) while a single canvas holds just 1.

So the honest capability is: 5 formats in, 3 formats out. You can bring a BMP or a GIF and turn it into a PNG, JPG, or WebP — 1 of the 3 writable formats — but you cannot produce a BMP or a GIF here; that needs a purpose-built encoder. Everything runs on your device; the image is decoded, drawn to an off-screen canvas, and re-encoded in your browser, so across 0 network round-trips the file never leaves your machine.

The transparency trap: PNG to JPG

Here is the conversion that surprises people most, and the reason this tool grew a background-colour control. A PNG can carry an 8-bit alpha channel — 256 levels of transparency, from 0 (clear) to 255 (opaque), atop 24 bits of colour for 32 bits per pixel. JPG has no alpha channel at all, only 24 bits; it simply cannot represent a transparent pixel. So when you convert a logo or icon that sits on a transparent background from PNG to JPG, every one of those clear pixels must be assigned a solid colour. The naive canvas behaviour leaves them at the default, which reads back as pure black — RGB 0, 0, 0, the 1 colour nobody wants — turning a clean transparent logo into a mark trapped in a solid black rectangle of RGB 0, 0, 0. In testing, a 200x200 red circle on transparency converted straight to JPG returned corner pixels of exactly [0, 0, 0] while the circle stayed [226, 29, 72] — proof the 40,000 background pixels went black.

The fix, which this tool now applies, is to fill the canvas with a chosen colour before drawing the image. Pick white, RGB 255, 255, 255, the default, and the transparent areas become white; pick any of the 16,777,216 24-bit colours (256 x 256 x 256) and they become that instead. The rule of thumb is simple: if your image has transparency you care about, convert to PNG or WebP, the 2 of 3 outputs that keep the alpha channel. Only reach for JPG when the image is a full-frame photo with 0 transparency, or when you have deliberately picked 1 of the 16.7 million background colours to flatten it onto.

Which of the 3 outputs to pick

Each output format earns its place on a different job. PNG is lossless and keeps the alpha channel, so it suits logos, screenshots, UI mockups, text, and any graphic with hard edges or transparency — the cost is size, since a photographic PNG can run 3 to 8x heavier than the same photo saved as JPG. JPG is lossy and has no transparency, but for photographs it produces the smallest, most compatible file and is understood by every device made since the format shipped in 1992. WebP, Google's format from 2010, plays modern all-rounder: it does both lossy and lossless, keeps a full 8-bit alpha channel (256 levels), and lands roughly 25 to 35% smaller than an equivalent JPG or PNG at matching quality — so a 200 KB JPG might become a 140 KB WebP, saving 60 KB.

One direction that never helps: converting a lossy source to a lossless target does not recover quality. Turning an 80%-quality JPG into a PNG produces a pixel-exact copy of that JPG — including every 8x8-block artefact it already baked in — at 3 to 5x the size. The PNG is not sharper; it just stops any further loss. If your goal is a smaller file rather than a format change, the compressor tool is the better fit; if it is a specific format a platform demands, this converter is the one.

A quick history of the 3 encoders

The 3 output codecs arrived across 3 decades, which explains their trade-offs. JPEG landed in 1992 from the Joint Photographic Experts Group, built around an 8x8 Discrete Cosine Transform tuned for continuous-tone photographs; it reached near-universal support and remains the default camera format. Portable Network Graphics followed in 1996, created as a patent-free replacement for Graphics Interchange Format, adding the 8-bit alpha channel and lossless Deflate compression that make it ideal for graphics. WebP arrived in 2010, derived from the VP8 video codec, unifying lossy and lossless modes plus transparency in 1 container. A browser encoding through the canvas reaches for whichever of these 3 you select, and each single call runs in well under 1 second for a typical 2 to 5 megapixel image (2,000,000 to 5,000,000 pixels), entirely on the 1 device in front of you across 0 servers.

Reading the size numbers

Every conversion here reports the before and after size per file plus a batch total, and the numbers are worth reading rather than assuming. A format change is not automatically a shrink: converting a compact 200 KB JPG photo to PNG can balloon it 5x past 1 MB, because PNG stores every pixel losslessly (a 1920x1080 frame is 2,073,600 pixels at 4 bytes each, 8 MB uncompressed) while the JPG had already discarded detail. Converting the other way — a 500 KB PNG screenshot to JPG or WebP — usually shrinks it 60 to 80%. The quality slider (50 to 100%, default 92%, in 1% steps) only applies to the 2 lossy outputs, JPG and WebP; for PNG it stays hidden because a lossless format has no quality to trade. When the batch total shows a plus sign instead of a percentage saved, that flags the new format as larger, which for a photo-to-PNG conversion is expected, not a fault.

Quick reference

• Reads: JPG, PNG, WebP, and (browser permitting) BMP, GIF — 5 formats.
• Writes: PNG, JPG, WebP — the 3 the HTML5 canvas can encode.
• Cannot output: BMP or animated GIF (no canvas encoder).
• JPG transparency: filled with a colour you choose (white default), never black.
• Quality: 50–100% slider for JPG and WebP (default 92%); PNG is lossless.
• WebP: about 25–35% smaller than JPG or PNG at equal quality.
• Readout: before → after bytes per file plus a batch total.
• Privacy: 100% in-browser; images are never uploaded.