PNG vs JPEG vs WebP: Choosing an Image Format
What each format compresses well, why converting JPEG to PNG never restores quality, how transparency survives conversion, and when WebP is actually worth it.
Format choice is decided by the content of the image, not by preference. Pick wrong and you either ship a 2 MB logo or a photo full of artifacts.
PNG: lossless, transparent, large
PNG stores every pixel exactly. It compresses by finding patterns in flat regions, which makes it excellent for screenshots, logos, icons, and anything with text or sharp edges — and terrible for photographs, where no two adjacent pixels are quite the same.
PNG supports a full 8-bit alpha channel, so partial transparency and antialiased edges survive intact. That is usually the deciding factor.
JPEG: lossy, photographic, no transparency
JPEG discards information the eye is least likely to miss: it converts to a luminance-plus-color representation, subsamples the color channels, and quantizes high-frequency detail. On a photo at quality 85 the loss is nearly invisible at a fraction of the size.
Two hard limits:
- No transparency. Converting a transparent PNG to JPEG replaces transparent pixels with a solid background — white, unless the tool lets you choose.
- Sharp edges suffer. Text, UI screenshots, and line art get visible ringing around the edges. This is the classic "why does my screenshot look fuzzy" problem.
WebP: usually smaller, does both
WebP supports both lossy and lossless modes, and both support alpha. In lossy mode it typically lands 25–35% smaller than JPEG at comparable quality; in lossless mode it usually beats PNG too.
Browser support is no longer the issue it was — every current browser handles WebP. The remaining friction is outside the browser: some older design tools, email clients, and OS preview panes still do not.
Conversions that do not do what people expect
JPEG to PNG does not recover quality. The data was discarded at encode time. You get a larger file containing the same artifacts. The one legitimate reason to do it: you are about to edit the image and want to avoid a second round of lossy compression.
PNG to JPEG on a screenshot is a downgrade. Smaller file, worse text. Convert screenshots to WebP lossless, or leave them as PNG.
Re-encoding JPEG repeatedly compounds loss. Every save quantizes again. Keep an original and export from it, rather than editing exports.
Transparency to JPEG needs a deliberate background. If a tool silently composites onto white and your site is dark, you get a white box. Decide the matte color before converting.
A decision list
- Photograph, no transparency needed → WebP lossy, or JPEG if you need maximum compatibility
- Logo, icon, illustration with flat colors → WebP lossless or PNG
- Screenshot with text → PNG or WebP lossless, never JPEG
- Anything needing partial transparency → PNG or WebP
- Sending to a printer → neither; ask for the format and profile they want
Quality settings in practice
For lossy formats, the quality parameter is not a percentage of anything meaningful — it is an encoder knob. Useful anchors:
- 90–100 — visually lossless, files barely smaller than lossless
- 80–90 — the working range for hero images and photography
- 60–80 — fine for thumbnails and secondary content
- Below 60 — visible blocking; acceptable only for placeholders
Always compare at 100% zoom on the actual image. A gradient sky shows artifacts at quality 80 that a busy street photo hides completely.
Try it
- Format Converter — convert between PNG, JPEG and WebP with a quality slider, and automatic white matte when JPEG is the target
- Image Compressor — reduce file size within a format, with a before/after size comparison
- Image Cropper — trim to the aspect ratio you need before compressing
Everything runs locally in the browser, so nothing is uploaded to a server.
Related reading: How Image Compression Actually Works explains what the quality slider is really doing, and Aspect Ratio Cheat Sheet covers the cropping decisions to make before you export.