The short comparison
| JPG | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy | Lossless | Lossy or lossless |
| Transparency | No | Yes | Yes |
| Best for | Photos | Screenshots, logos, UI, line art | Web images of any kind |
| Compatibility | Everywhere | Everywhere | All current major browsers; some older apps and upload forms reject it |
JPG: photos, everywhere
JPG throws away detail the eye is least sensitive to, which suits photographs with gradual colour changes. It handles sharp edges and text poorly: a screenshot saved as JPG gets fuzzy halos around letters. It has no transparency.
PNG: exact pixels and transparency
PNG is lossless: every pixel is stored exactly. That's ideal for screenshots, diagrams and logos, and it supports transparent backgrounds. It's a poor choice for photos; a photo saved as PNG is often several times larger than the same photo as a good JPG.
PNGs can still shrink in two ways: lossless re-compression (identical pixels, modest savings) and palette reduction (up to 256 carefully chosen colours, often much smaller for UI screenshots, but gradients can band). Compress PNG does the first by default and the second only if you allow it.
WebP: smaller files for the web
WebP was designed for websites. It supports both lossy and lossless compression and transparency, and at similar visual quality it's typically smaller than JPG for photos and smaller than PNG for graphics. The trade-off is compatibility outside browsers: some desktop software, print services and government or job portals still accept only JPG or PNG.
How to choose
- Uploading to a form or sending to someone who may use old software: JPG for photos, PNG for screenshots.
- Publishing on your own website: WebP, with your site builder providing fallbacks if needed.
- Needs transparency: PNG or WebP.
- Needs to stay pixel-perfect (diagrams, pixel art, text): PNG or lossless WebP.