JPG vs PNG vs WebP: Which Image Format Should You Use?

A friend once emailed me a screenshot saved as JPG — the text looked like it had been printed, scanned and faxed. Same week, a client uploaded a 6 MB PNG photograph to their homepage and couldn't figure out why it loaded like treacle. Wrong format, both times. It's the cheapest image mistake to make and the cheapest to fix.

The answer in one breath

• Photos for the web → WebP (about a third smaller than JPG at the same quality)
• Photos for email or Word docs → JPG (it opens absolutely everywhere)
• Screenshots, logos, anything with sharp text → PNG (lossless, no smearing)
• Need transparency on the web → WebP or PNG
• Never: a photograph saved as PNG. No upside, huge file.

JPG: opens everywhere, smears text

JPEG is from 1992 and it still wins on one thing: compatibility. Browsers, email clients, printers, ancient accounting software — everything reads it. Its compression was designed for photographs, where smooth gradients and natural textures shrink beautifully. Sharp edges are a different story: text and line art get blocky ringing artifacts fast.

A 12-megapixel phone photo (about 4 MB) typically lands at 350–500 KB as a quality-80 JPEG. One hard limitation to remember: no transparency. Transparent areas flatten to solid white. That's the faxed-screenshot smell test right there.

PNG: pixel-perfect and priced accordingly

PNG is lossless — what goes in is exactly what comes out. Screenshots stay readable, logos stay crisp, transparency works. But you pay in bytes for that guarantee. The same 4 MB phone photo saved as PNG comes out at 8–12 MB. Right tool for graphics, wrong tool for photos.

WebP: why it's the default now

Google released WebP in 2010 to replace both of them, and it basically succeeded. It does lossy and lossless, supports transparency, and beats the incumbents on size: lossy WebP runs about 25–35% smaller than JPEG at equal quality, lossless WebP about 25% smaller than PNG. Safari was the last major holdout and added support in 2020. If it renders in a browser, WebP is my default answer in 2026.

Cheat sheet

• Compression: JPG lossy only · PNG lossless only · WebP both
• Transparency: JPG no · PNG yes · WebP yes
• Photos: PNG terrible · JPG good · WebP best
• Screenshots & text: JPG poor · WebP good · PNG best
• Compatibility: JPG and PNG universal · WebP all modern browsers
• Relative photo size: WebP ≈ 0.7x · JPG 1x · PNG 3–5x

What about AVIF?

AVIF squeezes another 10–20% beyond WebP and browser support is decent now. The trade-offs are slower encoding and rough edges in CMS pipelines and image editors — some tools still can't open one. If you're already optimizing hard, give it a test. For everyone else, WebP hits the sweet spot of size, speed and tooling that actually works.

Switching formats painlessly

The Image Converter flips PNG↔JPG↔WebP in bulk, right in your browser. Typical job: designer sends a 12 MB photographic PNG, you convert to WebP at quality 80, and ship something 10–20x smaller. If you want to squeeze further, run it through the Image Compressor after.

The three-question rule

When I'm unsure, I ask: is it a photograph? Does it need transparency? Where will it live? Photo + web = WebP. Photo + email/legacy = JPG. Graphics, text, transparency = PNG, or WebP if a browser is showing it. That's the whole system. Follow it and you'll never ship a 6 MB screenshot again.