Image Format Converter

The Image Format Converter re-encodes an image from one format to another entirely inside your browser. It accepts PNG, JPEG, WebP, and GIF files and writes PNG, JPEG, or WebP output, with an adjustable quality slider for the two lossy targets. Because everything runs on the Canvas API, nothing is uploaded and the original never leaves the tab.

How to Use

1. Drop a PNG, JPEG, WebP, or GIF onto the upload area, or click it to open the file picker. A preview and a metadata line showing dimensions, file size, and MIME type appear straight away.
2. Pick a target format: PNG, JPEG, or WebP.
3. If you chose JPEG or WebP, set the quality slider. It ranges from 10 to 100 and starts at 90. PNG is lossless, so the slider is hidden for PNG.
4. Press Convert. The image is drawn to a canvas and encoded with canvas.toBlob, and the result panel reports the new file size.
5. Download. The file keeps your original base name and gains the new extension, so holiday.png converted to JPEG downloads as holiday.jpg.

Which Conversions Actually Work

Input and output sets are not symmetric, so it pays to know the boundaries before you start.

From	To PNG	To JPEG	To WebP	Notes
PNG	—	Yes	Yes	Transparency is kept for PNG and WebP; JPEG flattens it to white.
JPEG	Yes	—	Yes	JPEG has no alpha channel to preserve.
WebP	Yes	Yes	—	Static WebP only; animation is not decoded by canvas.
GIF	Yes	Yes	Yes	Only the first frame is read.

Formats outside this table — SVG, HEIC, AVIF, TIFF, BMP, and RAW — are rejected before conversion. The tool does not decode them and does not silently substitute another format.

Worked Examples

• A 2400×1600 PNG screenshot weighing 1.6 MB converts to JPEG at quality 90 as roughly a 250–320 KB file. The visible dimensions do not change; only the encoding does.
• An 800×800 PNG logo with a transparent background converts to WebP with the transparency intact, typically 50–75% smaller than the source. The same logo converted to JPEG gains a solid white background, because the tool fills the canvas with #FFFFFF before drawing.
• A 12-frame animated GIF converted to PNG produces a single still image of frame one, usually a fraction of the original size. The remaining frames are discarded, not extracted.

How Canvas Re-encoding Works

Every conversion follows the same four steps. The browser decodes the source into an Image element, the tool creates a canvas at the image’s naturalWidth and naturalHeight, the image is drawn with drawImage, and toBlob(callback, mimeType, quality) asks the browser’s encoder for a fresh byte stream. Quality is passed as a decimal, so “90” on the slider becomes 0.9; values are clamped to the range 0.1–1.0.

This explains two behaviours. First, a conversion is a re-encode, not a rename: pixels are decoded and encoded again, so even a high-quality source can lose a little fidelity when written as JPEG. Second, the browser — not the page — owns the encoder. Modern Chrome, Edge, Firefox, and Safari all support PNG, JPEG, and WebP encoding, but old browsers may ignore the requested WebP type and emit PNG bytes instead.

Quality is a request, not a guarantee. The browser maps the 0–1 value onto its own quantiser, so the same “90” yields slightly different byte counts in different browsers and none of them promise a target file size. Treat the reported output size as the ground truth and lower the slider until you reach your budget.

Accuracy and Limits

• Transparency survives PNG and WebP and is destroyed by JPEG. Convert a logo to JPEG and every transparent pixel becomes white.
• Animated images are not supported. Canvas reads one frame, so APNG, animated WebP, and GIF animation do not carry over.
• Resolution is never changed. Output dimensions match the input exactly. Resize first if you need smaller pixels.
• Very large images hit per-browser canvas limits. A canvas dimension is capped near 16,384 px in some browsers, and total area is capped well below that; an oversized source fails to load or comes back blank.
• Metadata is dropped. Browsers apply EXIF orientation during decode, but the EXIF block itself is not copied to the output.

Practical Tips

• Start JPEG and WebP at quality 80–90. Below about 60, photographs show visible blocking around edges and in text.
• Send flat-colour graphics and logos to WebP rather than JPEG. WebP keeps sharp edges crisp and supports alpha, which makes it the better web target.
• When you need a lossless archive copy, choose PNG — but expect photographic PNGs to be several times larger than the JPEG equivalent.
• Re-encode only once. Each lossy JPEG or WebP round trip compounds compression artefacts.

Target format in one line: photographs go to WebP at quality 80–85 with JPEG as a compatibility fallback; flat logos and icons go to WebP for delivery or PNG for lossless editing; screenshots with fine text stay PNG because JPEG smears thin strokes; and files that must open in older desktop software are safest as JPEG.

Related Tools

• Image Compressor — compress and resize images in-browser to shrink file sizes further.
• Image to Base64 — convert any image to a Base64 data URI for embedding in code.
• Favicon Generator — generate multi-size favicon PNGs from your images.