PNG vs JPG vs WebP: which one?

Five formats, one recurring question: which will look right at the smallest size? Here's how I decide, without the spec-sheet jargon.

Written by the founder of BreezeConvert — a creative director working across set design, game 3D, Unreal/VFX and AI content pipelines. More about the author.

Image formats feel like they should be a solved problem, and yet the wrong choice quietly costs people every day — a 4 MB screenshot that should have been 200 KB, a logo with an ugly white box behind it, a photo that came out blocky. The formats aren't interchangeable; each was built for a different job. Once you know what each is actually good at, the decision takes about two seconds. This is the mental model I use.

The one distinction that matters most: lossy vs lossless

Every image format is either lossy or lossless, and that single property explains most of the trade-offs. A lossy format (JPG, and WebP/AVIF in their lossy modes) throws away detail your eye is unlikely to notice, in exchange for a much smaller file. A lossless format (PNG, and WebP/AVIF in lossless mode) keeps every pixel exactly, which is essential for some images and wasteful for others. The art is matching the format to the content: photographs tolerate lossy compression beautifully, while sharp-edged graphics and text do not.

JPG — for photographs

JPG (JPEG) is the right answer for photographs and any image full of smooth gradients and continuous colour. Its lossy compression is tuned for exactly that kind of content, so it produces small files that still look great. Where JPG falls down is anything with hard edges — logos, screenshots, text, line art — where its compression leaves visible smudgy "artifacts" around the edges. It also has no transparency: a JPG always has a solid rectangular background. Rule of thumb: if it came out of a camera, it should probably be a JPG.

PNG — for graphics, text, and transparency

PNG is lossless, so it keeps sharp edges perfectly crisp — which makes it the format for logos, icons, screenshots, diagrams, and anything with text. Crucially, PNG also supports transparency, so a logo can sit cleanly on any background with no white box. The cost is size: a PNG of a photograph is far larger than the equivalent JPG for no visible benefit, because lossless compression can't discard the subtle detail a photo is made of. Use PNG when edges must stay sharp or you need transparency; don't use it for photos.

WebP — the modern all-rounder

WebP is Google's format, and it's genuinely clever: it does both lossy and lossless, supports transparency, and is typically 25–35% smaller than the equivalent JPG or PNG at the same visible quality. For the web, it's usually the best choice on both counts — smaller files and the transparency that JPG lacks. Support is now near-universal in modern browsers. The main reason to convert away from WebP is compatibility with an old tool or app that hasn't caught up, which is why a quick WebP-to-PNG converter is still handy. Going the other way, PNG-to-WebP is one of the easiest wins for shrinking a page's images.

AVIF, GIF, and HEIC — the specialists

AVIF is the newest contender and compresses even better than WebP, especially at low file sizes; support is growing fast but isn't quite universal, so it's a "leading edge" choice rather than a safe default. GIF survives for exactly one reason — simple animations — and is terrible at everything else (only 256 colours, large files); for a short animated clip a video or animated WebP is almost always better. HEIC is what modern iPhones shoot: excellent compression, but poorly supported outside Apple's ecosystem, which is why so many people need to convert it to JPG before sharing.

A 10-second decision guide

Here's the whole thing condensed. Is it a photograph? Use JPG, or WebP if you want it smaller. Does it have text, sharp edges, or transparency (a logo, icon, screenshot, diagram)? Use PNG, or WebP for a smaller transparent file. Building for the web and want the smallest files? Reach for WebP first, AVIF if you're comfortable on the leading edge. Need an animation? Prefer a short video or animated WebP over GIF. And if a tool refuses a modern format, convert down to the old reliable — JPG or PNG — and move on.

All of these conversions run locally in your browser with the image converter — nothing is uploaded — and if a file is still too big after picking the right format, the image compressor takes it the rest of the way.

Related