How to Convert Images Between JPG, PNG, and WebP

Changing an extension does not optimize an image; conversion decodes the source pixels and encodes them again under another format's rules. A photograph, a transparent logo, and a crisp interface screenshot have different needs. JPEG is widely suited to lossy photographic output but has no alpha channel. PNG preserves pixels losslessly and supports transparency. WebP can use lossy or lossless compression and can carry alpha, so the right choice depends on visual content, transparency, compatibility, and measured bytes rather than a universal winner.

This converter uses the browser's canvas encoder. The browser, not a fixed desktop codec, determines which output MIME types it supports and how a quality value is interpreted. The HTML standard allows an unsupported requested type to fall back to PNG; the tool checks the returned type so that a mislabeled download is not silently accepted. Still, a quality value such as 0.8 is an encoder hint, not an objective promise of eighty-percent fidelity.

Classify the source before converting: photograph, flat graphic, text-heavy screenshot, or transparent artwork. Record its dimensions, byte size, alpha requirement, and intended browser or application. Export one candidate in each plausible format without resizing so the format is the only main variable. Inspect text edges, gradients, shadow boundaries, and transparency at normal size and zoom, then compare bytes. Keep the original because repeated lossy conversions compound artifacts and canvas output may not preserve source metadata.

The WHATWG HTML canvas serialization rules explain MIME fallback and encoder-quality behavior. The PNG specification and Google's WebP documentation support the lossless, alpha, lossy, and animation distinctions used when choosing an output.

Start with a 1000 × 1000 transparent PNG logo containing a soft shadow. Export it to PNG, lossless or high-quality WebP, and JPEG with an explicitly chosen white background. PNG and WebP should preserve transparent pixels when the browser encoder supports the request; JPEG must flatten them against white. Next, repeat the comparison with a camera photo, where JPEG or lossy WebP may save more bytes. Pick separately for each image after checking edge halos and file size.

Size change (%) = (output bytes - source bytes) ÷ source bytes × 100. A positive result means the converted file grew, which is a valid outcome and a reason to retain the source format unless compatibility requires the conversion.

Animated or multipage inputs can become a single canvas frame. EXIF orientation, camera details, geolocation, color profiles, textual chunks, and other metadata may be removed or altered by decode-and-reencode. Wide-gamut colors can shift when drawn into a default canvas color space. AVIF decoding varies by browser, PNG ignores a lossy quality slider, and tiny synthetic graphics can grow after conversion. Never replace archival, print, medical, legal, or evidentiary originals with an unverified browser export.

Compare the original and converted previews, then review sharpness, transparency, and per-file size changes before downloading. Watch for one recurring error: expecting a PNG quality slider or converting transparent images to JPEG without choosing the intended background color.

Add supported images, choose JPEG, PNG, or WebP output, set quality only where the encoder uses it, and select a background before sending transparent pixels to JPEG. Convert the batch, inspect each preview and MIME label, and download individual files or the archive.

Input: JPEG, PNG, WebP, or browser-decodable AVIF files, output format, encoder quality where applicable, and JPEG background color. Output: re-encoded files at the same pixel dimensions with before-and-after byte information. The source files remain unchanged.

Image files are converted locally and are not uploaded. The browser decodes every source on canvas, applies the selected quality or JPEG background when relevant, and exports the batch in one MIME type.