I shipped a converted logo to a client's site once and it came back with a black rectangle where the transparent background used to be. I had converted a PNG to JPEG without thinking about it. The odd part was that I expected white — every article I had read said transparency "becomes white." It became black, and I spent twenty minutes assuming my code was broken before I read the HTML spec and found out the browser was doing exactly what it was told.
That is the honest theme of this guide. The Image Format Converter on toolz.dev is a thin wrapper over the browser's own canvas encoder. That gives it real advantages — nothing uploads, it's instant, it works offline once loaded — and real limits that most "convert any image to any format" pages will not admit to. I built this one, so I'll tell you both halves.
TL;DR: The Image Format Converter takes any image your browser can open and re-encodes it as PNG, JPEG, or WebP — those three, and only those three. There is no AVIF, GIF, or SVG output, because the tool uses the browser's canvas encoder and that is what the canvas supports. Pick a target, drag the quality slider (JPEG and WebP only — PNG ignores it), download. Two things to know before you convert: transparency composites onto black when you target JPEG, per spec, and EXIF metadata is stripped on every conversion, because a canvas re-encode only carries pixels. To shrink files, pair it with the Image Compressor and the Image Resize tool.
What Does This Converter Actually Support?
Let's get the scope right first, because this is where most format guides oversell.
Input: the file picker accepts image/*, and the file is loaded into a plain <img> element. So if your browser can display it, the tool can read it — PNG, JPEG, WebP, GIF, BMP, AVIF, and in most modern browsers, SVG.
Output: PNG, JPEG, WebP. Three buttons. That's the list.
The reason is not laziness, it's the platform. The tool draws your image to a <canvas> and calls canvas.toBlob(callback, type, quality). The HTML Living Standard requires every browser to support image/png for that call and leaves other formats optional; in practice, image/jpeg and image/webp are supported everywhere and image/avif encoding is not. There is no browser API to write an AVIF or a GIF from a canvas. A site that offers you AVIF output is either shipping a WebAssembly encoder (hundreds of kilobytes of download) or — far more often — uploading your image to a server. Neither is what this tool does.
So here is the honest comparison table, tool-first:
| You want | This tool | Why |
|---|---|---|
| PNG → JPEG | Yes | Canvas encodes image/jpeg |
| PNG → WebP | Yes | Canvas encodes image/webp |
| JPEG → WebP | Yes | The most useful conversion here |
| WebP → PNG/JPEG | Yes | For tools that still can't read WebP |
| AVIF → WebP | Yes (AVIF in only) | Browser decodes AVIF; can't encode it |
| Anything → AVIF | No | No canvas AVIF encoder exists |
| Animated GIF → animated WebP | No | An <img> gives the canvas one frame |
| Anything → SVG | No | SVG is vector; this is a raster pipeline |
| Batch of 200 files | No | One file at a time |
If you need AVIF or animated WebP, use squoosh locally, cwebp/avifenc from the command line, or your build pipeline's image step. I would rather send you somewhere useful than pretend.
Why Does JPEG Turn My Transparent Background Black?
Because the spec says so, and I only learned that after the client email.
JPEG has no alpha channel. When you ask a canvas to serialize to a format that doesn't support alpha, the HTML Living Standard is explicit: the bitmap must be composited onto a solid black background before encoding. Not white. Black. Chrome, Firefox, and Safari all follow this, which is why the behavior is consistent and why it surprises everyone exactly once.
So: converting a transparent PNG logo to JPEG will give you a black box behind it. Every time. That's not a bug in the tool, it's the platform being consistent, and no amount of dragging the quality slider fixes it.
What to do instead:
- Keep transparency? Target PNG or WebP. Both carry alpha. WebP will usually be the smaller of the two.
- Need JPEG specifically? Flatten the image onto the background color you actually want in an editor first, then convert.
- Only converting a photo? Photos have no transparency, so this never comes up. Convert away.
This is the single most common way people damage an image with a converter, and it's worth internalizing: alpha is a property of the format, not of your file. Choosing JPEG is choosing to throw the alpha channel away.
What Else Gets Lost in a Canvas Re-Encode?
A canvas holds pixels. Just pixels. Everything else in your original file is discarded when the browser re-encodes, and this catches people out:
EXIF is gone. Camera make and model, lens, exposure, capture date, copyright fields, and GPS coordinates all vanish. This is a privacy win by accident — converting a phone photo before you post it strips the location it was taken at — but if you're an archivist or you need the copyright field to survive, do not run originals through any canvas-based converter. Convert a copy.
Color profiles get flattened. An image tagged with a wide-gamut profile like Display P3 or Adobe RGB gets drawn to a canvas that, in practice, treats it as sRGB. For web images this is what you want anyway. For print work, it isn't.
Animation collapses to one frame. An <img> element hands the canvas whatever frame is showing. Drop in a twelve-second animated GIF and you'll get a single still. The tool does not warn you about this, which I consider a genuine rough edge rather than a feature.
Everything else re-encodes from decoded pixels. Which brings us to the one rule that matters most.
What Is Generation Loss, and How Do I Avoid It?
Every time you save a lossy format, the encoder throws data away. Throw data away, decode it, and throw more away, and the damage compounds. This is generation loss, and it's the reason your meme templates look like they were faxed.
The rule is short: always convert from the best original you have, never from a converted copy.
Concretely, JPEG → WebP → JPEG is worse than the original JPEG, twice over. The first encode's artifacts get treated as real image detail by the second encode, which faithfully spends bits preserving them. If you have a RAW file or a PNG export, start there.
There's a corollary that trips people up: converting JPEG to PNG does not restore quality. PNG is lossless, so it will preserve your image perfectly — including every compression artifact already baked into the pixels. You get the same damaged image in a file three or four times larger. PNG-from-JPEG is only worth it as an intermediate step when you're about to do many rounds of editing and want to avoid re-compressing at each save.
Which Format Should I Actually Pick?
Skip the format taxonomy; here's the decision in the order I actually make it.
Is it a photograph? WebP at 80–85. If something in your pipeline can't read WebP, JPEG at 80–85.
Does it have transparency? WebP. PNG if you need maximum compatibility.
Is it a screenshot, a UI mock, a chart, or anything with text and flat color? PNG, or WebP. JPEG's discrete cosine transform smears sharp edges into visible mosquito noise around lettering — it was designed in the late 1980s for continuous-tone photographs (the format is standardized as ITU-T T.81 / ISO/IEC 10918-1) and text is exactly the content it handles worst.
Is it a logo or an icon you control the source of? Neither — use SVG, and don't put it through a raster converter at all.
For the specs behind these: PNG is ISO/IEC 15948, and WebP was finally published as RFC 9649 in 2024, fourteen years after Google shipped it. On size, Google's own comparison study puts WebP lossy at roughly 25–34% smaller than JPEG at equivalent SSIM, and WebP lossless at about 26% smaller than PNG. Those are the vendor's numbers on the vendor's corpus — treat them as a strong hint, not a promise about your specific image. The reason I'm comfortable citing them is that they've matched my results closely enough on real screenshots and photos over the years. Yours may differ, which is why the tool shows you the source size before you convert.
How Do I Convert an Image on Toolz.dev?
Step 1: Open the converter
Go to the Image Format Converter. Nothing to install, no account.
Step 2: Upload your image
Click the upload area and pick a file. It loads into your browser via an object URL — the file is never sent anywhere. You'll see the filename and its size.
Step 3: Check the format readout
The tool shows Current → Target. "Current" is read from the file's MIME type, so a .jpg file reports as JPEG. Useful sanity check when someone has renamed a file's extension without actually converting it, which happens more than you'd think.
Step 4: Pick your target
PNG, JPEG, or WebP.
Step 5: Set quality — if it applies
The quality slider (1–100, defaulting to 90) only appears for JPEG and WebP. That's deliberate: PNG is lossless and canvas.toBlob ignores the quality argument entirely for image/png, so showing a slider that does nothing would be a lie.
For where to set it: 90 is the default and is nearly indistinguishable from the original for most content. 80–85 is where I actually work — meaningfully smaller, still clean. Below 60 you'll see it on photos, and on anything with text you'll see it much sooner.
Step 6: Convert and download
Hit Convert & Download. Encoding happens on your machine, and the file saves as converted_<original-name>.<ext>. Dimensions are preserved exactly — the converter passes your image's own width and height through, so this step changes the encoding and nothing else.
Convert or Compress — Which One Do I Need?
People reach for a converter when they want a smaller file, and often that's the wrong tool. Three different jobs, three different tools:
| Goal | Tool | What changes |
|---|---|---|
| Change the encoding | Format Converter | Format, quality |
| Same format, smaller file | Image Compressor | Quality only |
| Fewer pixels | Image Resize | Dimensions |
And the biggest win is almost always the one people skip. If you're serving a 4000×3000 photo into a 1200px-wide layout, resizing beats every format choice combined — you're throwing away 90% of the pixels the browser was going to downscale and discard anyway. Resize first, then convert. Doing it in that order routinely takes a 4 MB PNG under 200 KB, and no amount of clever format selection on the full-size original gets close.
One more habit worth building: keep your originals. Archive lossless masters, generate lossy derivatives for distribution. When AVIF-everywhere finally arrives, or the next format after it, you'll re-export from clean sources instead of upscaling regret.
Frequently Asked Questions
Which image format is best for websites?
WebP, for most content. It's smaller than JPEG for photos and smaller than PNG for graphics, it supports transparency, and every current browser reads it — Safari was the last holdout and added support in version 14. AVIF compresses better still, but you can't produce it in a browser canvas; you need a build step or a desktop encoder.
Can this tool convert my image to AVIF?
No. The converter outputs PNG, JPEG, and WebP only, because it uses the browser's canvas encoder and no browser can encode AVIF from a canvas. Your browser can decode AVIF, so you can convert an AVIF file to WebP or PNG here — just not the other direction. For AVIF output, use a command-line encoder like avifenc or your framework's image pipeline.
Why did my transparent PNG get a black background after converting to JPEG?
Because JPEG has no alpha channel, and the HTML specification says a canvas serializing to a format without alpha support must composite the image onto a solid black background. It's spec-mandated behavior, not a bug, and it's the same in every browser. Convert to PNG or WebP instead if you need transparency preserved.
Does converting an image remove its EXIF data?
Yes — all of it, including GPS coordinates, camera settings, and capture date. The tool draws your image to a canvas and re-encodes the pixels, and a canvas carries no metadata. That's useful if you're stripping location data before posting a photo, and a problem if you need the metadata, so keep an unconverted original either way.
Can I convert an animated GIF to an animated WebP?
Not with this tool. It loads your image into an <img> element and captures a single frame to the canvas, so an animated GIF comes out as one still image. Animated WebP requires a real multi-frame encoder — use gif2webp from Google's WebP tools, or convert the animation to MP4, which will be dramatically smaller than either.
Will converting JPEG to PNG improve the quality?
No. PNG is lossless, so it preserves exactly what it's given — including the compression artifacts already baked into the JPEG's pixels. You end up with an identical-looking image in a much larger file. Lost data is lost; no format change brings it back.
Is there a file size limit?
No hard limit is enforced. The practical ceiling is your device's memory, since the whole image is decoded into a canvas bitmap at roughly width × height × 4 bytes — a 8000×6000 photo needs about 192 MB of RAM as raw pixels before encoding even starts. Desktop browsers handle typical camera output without complaint; older phones may struggle with very large files.
What is the difference between PNG and JPEG?
JPEG is lossy and built for photographs: it discards fine detail to reach small files, and it has no transparency. PNG is lossless and built for graphics, screenshots, and logos: it keeps every pixel exactly and supports a transparent background, at the cost of larger files for photos. You can convert between them here, but remember a transparent PNG saved as JPEG gets a solid background, since JPEG has no alpha channel.
How do I convert an image to WebP for free?
Load your PNG or JPEG, choose WebP as the output format, set the quality if you want a smaller file, and download — it is free and runs entirely in your browser. WebP is usually the conversion worth making for the web, since it is smaller than both JPEG and PNG while still supporting transparency and is read by every current browser.
Does my image get uploaded to a server?
No. The file is read locally with an object URL, decoded by your browser, re-encoded by your browser's canvas, and saved by your browser. You can verify this yourself: open DevTools, go to the Network tab, and convert an image — you'll see no upload. Once the page has loaded, the conversion works with your Wi-Fi off.
The Short Version
A browser canvas is a good, honest image converter for three formats and a bad one for everything else. Within PNG, JPEG, and WebP it's instant, private, and free, and it covers the conversion that actually matters for the web: getting your photos to WebP. Outside those three, it can't help, and I'd rather say so than let you find out with a black rectangle on a client's homepage.
Before you convert anything, ask whether you need transparency (then not JPEG), whether you need the metadata (then keep the original), and whether the image is simply too many pixels (then resize first). Get those three right and the format choice is the easy part.
The Image Format Converter is here. For the rest of the image workflow, there's the Image Compressor, the Image Resize tool, and — for flat-background cutouts — the Background Remover. The wider picture is in the image tools guide and the image compression guide.
