PNG vs JPG vs WebP
Three formats, three different jobs. The rule of thumb takes one line; the exceptions are where people lose quality or waste megabytes.
The one-line rule
Photographs go in JPG or WebP. Screenshots, logos, line art, and anything that needs transparency go in PNG or WebP. If you only remember one thing: the question is not "which format is best" but "does this image have smooth gradients or flat areas of solid colour".
What each format actually does
JPG (JPEG)
Lossy. It converts the image to a frequency representation, discards detail your eye is least sensitive to, and stores the rest. That is why it is so small on photos and so bad on text: sharp edges between two solid colours are exactly the high-frequency information it discards, which shows up as the grey fuzz around letters in a compressed screenshot. JPG has no transparency, and every re-save compounds the loss.
PNG
Lossless, with full alpha transparency. It compresses by looking for repetition, which makes it excellent on flat colour — a UI screenshot or a logo can come out dramatically smaller than the equivalent JPG and perfectly sharp. On a photograph, where almost no two neighbouring pixels are identical, that same approach produces a file several times larger than JPG at no visible benefit.
WebP
Both, in one container: a lossy mode aimed at photos and a lossless mode aimed at graphics, plus transparency in either. Google's own comparison study puts lossless WebP around 26% smaller than PNG, and lossy WebP roughly 25–34% smaller than JPG at equivalent quality (WebP compression study). Every current browser — Chrome, Firefox, Safari, Edge — decodes it.
Choosing, by what the image is
| Image | Best pick | Why |
|---|---|---|
| Camera photo for a website | WebP, JPG as fallback | Smooth gradients compress well; nobody sees the discarded detail. |
| Screenshot of an app or text | PNG or lossless WebP | Sharp edges survive; JPG smears them. |
| Logo, icon, anything transparent | PNG or WebP | JPG has no alpha channel and fills transparency with white. |
| Email attachment to a stranger | JPG | Compatibility with old desktop software beats the last 30% of size. |
| Print submission or archive master | PNG (or the original RAW/TIFF) | Lossless: no generational degradation each time it is edited. |
Four mistakes that cost real quality
- Saving a photo as PNG to "keep quality". Lossless preserves what you feed it. If the source was already a JPG, converting to PNG restores nothing and multiplies the file size.
- Re-saving the same JPG repeatedly. Each save re-quantises the image. Edit from the original, export once.
- Compressing when you should be resizing. A 6000px-wide photo displayed in a 600px column is 100 times more pixels than needed. Resize first, then compress — in that order. Resize the image, then compress it.
- Chasing quality 100. The top of the JPG quality range buys almost no visible improvement for a large size penalty. Around 80 is where most photos stop being distinguishable from the original.
Test it on your own file
Format advice is general; your image is specific. A flat illustration and a noisy night photo behave nothing alike. The fastest way to settle it is to run the same file through both and compare the numbers: convert to WebP, convert to JPG, convert to PNG. The compressor also includes a quality ladder that encodes your file at several settings at once and reports the real sizes, measured on your image rather than on someone else's test set.
All of it happens in your browser, so you can do this with images you would never upload to a testing site. That is the whole point of Kobra IMG.
Last reviewed . Something out of date or wrong? Tell Kobra IMG.