PNG vs JPEG vs WebP: Which Format When
Three formats cover nearly every image on the web, and picking the wrong one costs you either quality or kilobytes. A photo saved as PNG can be ten times larger than it needs to be. A logo saved as JPEG grows fuzzy halos around every edge. The decision itself is much simpler than the format wars make it sound.
The three formats at a glance
| PNG | JPEG | WebP | |
|---|---|---|---|
| Compression | Lossless: pixels reproduced exactly | Lossy: discards detail eyes barely notice | Both lossy and lossless modes |
| Transparency | Yes, full alpha channel | No | Yes, full alpha channel |
| Animation | No (APNG variant, rare) | No | Yes, and better than GIF |
| Typical use | Screenshots, UI, logos, diagrams | Photographs | Modern default for web delivery |
| Browser support | Universal | Universal | All modern browsers (since ~2020); patchier outside browsers |
What lossy vs lossless means for your eyes
PNG compresses like a ZIP file. Every pixel comes back exactly as it went in, which is why text stays razor sharp and flat colors stay flat. JPEG throws information away instead, keeping the broad strokes and discarding fine detail human vision is bad at noticing.
In a photograph that trick is close to invisible and saves enormous amounts of space. On a screenshot it backfires. Sharp edges between text and background are exactly what JPEG’s math handles worst, and the result is the smudgy “mosquito noise” around letters that marks a screenshot saved in the wrong format. WebP plays both games: its lossy mode beats JPEG by roughly 25 to 30% at similar quality, and it adds the transparency and animation JPEG never had.
File-size intuition: one photo, three ways
Take a 1920×1080 photograph. Uncompressed, that is about 6 MB of raw pixels. Saved as PNG it might land around 3 MB, because lossless can only squeeze a photo so far. As a quality-85 JPEG it drops to roughly 300 KB, and as lossy WebP to perhaps 220 KB, a saving of over 90% against the PNG with no visible difference at normal viewing size.
Now reverse the content. A screenshot of a settings dialog might be 60 KB as PNG and larger, as well as visibly worse, saved as JPEG.
The content decides the format. Watch it happen by dropping one image into the Image Compressor and comparing the outputs side by side.
Rules of thumb
- Photographs belong in JPEG or WebP, never PNG, unless you are mid-edit and need a lossless master.
- Screenshots, UI captures, diagrams and logos belong in PNG, where crisp edges and flat color are lossless territory. For logos and icons specifically, SVG beats all three when you have a vector source, since it scales forever and stays tiny.
- Anything needing transparency goes to PNG or WebP. JPEG has no alpha channel, so converting a transparent PNG to JPEG fills the background solid white, which people usually discover only after the logo lands on a dark page.
- For web delivery, default to WebP: smallest files, transparency, animation, and universal support in current browsers.
The WebP caveat
WebP’s awkward spot is everything that isn’t a browser. Email clients (Outlook in particular), older versions of Office and Photoshop, some CMS uploaders, government portals and print workflows still reject or mishandle it. And the person you send a .webp to may simply not know what to do with it.
The pragmatic split is to use WebP for images your website serves and JPEG or PNG for images you hand to other people.
When a site gives you a .webp you need as something else, or the reverse, the Image Converter switches between all three formats in the browser, without handing the file to a processing server, and takes a second or two even on large images.
What about AVIF and the rest?
AVIF compresses harder than WebP and is now supported by all major browsers, but encoding is slow and tooling outside the web is thinner still. Treat it as a great additional format for high-traffic sites rather than a replacement for knowing the big three. GIF survives mostly as a meme-delivery mechanism; animated WebP does the same job at a fraction of the size.
If you only remember one line
Photos get JPEG or WebP, graphics get PNG or SVG, websites serve WebP, and converting between them takes ten seconds when the file you have doesn’t match the format you need. Once you have chosen well, compressing and resizing matter more than the format itself, and our guide to compressing images for the web covers that workflow.