Choosing an image format is a trade-off across four things — quality, size, transparency, compatibility — and the answer depends on what the image actually contains, not on how new the format is. A screenshot of text and a mountain photo can lead to opposite conclusions. This post covers the four common formats and gives you a table you can copy.
Lossy vs lossless: the dividing line
Every format splits into one of two buckets:
- Lossy (JPG, lossy WebP, AVIF, HEIC): encoding discards some barely-noticeable detail to save space. Smaller files, but each re-save degrades the image a little more.
- Lossless (PNG): keeps every pixel intact. Re-encode as often as you like with no decay, but the file is bigger.
One line: lossy trades quality for size; lossless pays size for fidelity.
The personality of the four formats
| Format | Compression | Transparency | Main use |
|---|---|---|---|
| JPG / JPEG | Lossy | No | Photos, portraits, landscapes |
| PNG | Lossless | Yes (PNG-24/32) | Icons, screenshots, transparency, text |
| WebP | Lossy + lossless | Yes | Web images; smaller than JPG |
| AVIF | Lossy | Yes | Higher-compression web images |
A few points that matter:
- JPG has no transparency — that's the hard limit. For transparency you need PNG / WebP / AVIF.
- JPG is cruel to lines, text, and flat color — the noise and banding it produces concentrate at edges, so logos and code screenshots come out mushy in JPG. PNG handles those almost perfectly.
- WebP is typically 25–35% smaller than JPG at equal quality, supports both lossy and lossless plus transparency, and is the modern web default.
- AVIF compresses even harder than WebP, but decodes noticeably slower and has weaker browser support — plan a fallback if you use it.
Choose by content, not by how new the format is
Real-world tests contradict intuition in a lot of places:
- High-texture photos (portraits, landscapes, particles): WebP / AVIF win big. A 1600×1000 high-texture image went from a 3.25MB PNG to a 318KB WebP — a 90% saving.
- Screenshots / text-heavy / UI with large flat color areas: don't trust the new formats. On the same text-laden sample, WebP was 494KB and AVIF came out larger at 552KB (and 3× slower), while PNG was 1.28MB and JPG 1.36MB — PNG ended up smaller than JPG. Flat color regions are naturally friendly to lossless, and lossy encoding saves nothing there.
- Need transparency (icons, cut-outs): prefer PNG; if colors are simple, drop to PNG-8 under 256 colors for another size cut.
- Targeting old devices / systems: JPG has the best compatibility, essentially never fails to open.
So: photos → lossy (JPG / WebP); text, screenshots, and transparency → PNG; web size-first → WebP (AVIF where compatibility allows) — that covers ~90% of cases.
Tuning JPEG quality
The "quality" slider on JPG (each export tool's 0–100 numbers mean different things; judge by results, not digits):
- Web publishing: 80–85
- Hi-fi display: 90–95
- Below 70: edges start to fuzz and banding appears; usually not worth it
Going from 100 to 70 can change the file size by several times with no visible difference — that's what makes "quality" a useful compression dial. Pick a target size first (email under 10MB, web attachment under 300KB…), then step quality down to hit it. Better than guessing.
Common compression mistakes
- Renaming isn't compressing: turning photo.png into photo.jpg changes zero bytes — it only fools file-type detection.
- Re-screenshots / re-sharing degrade layer by layer: each pass is lossy and unknowable in final size.
- Compression ≠ archiving: ZIP / RAR just bundle files; they don't fix a single oversize image. Image compression is re-encoding.
Try it
Our Image Compressor and Format Converter put JPG / PNG / WebP / AVIF conversion and shrinking behind a UI — processed locally in your browser — so you can compare file sizes across formats directly.
FAQ
Q: Is WebP always smaller than JPG? A: Usually for photos; but on large flat-color / text content it can lose to lossless (see the mixed-layout example). Judge by what the image contains, not by format novelty.
Q: When is PNG actually worth it? A: For transparency, screenshots / text / flat color, or when you need repeatable lossless edits. PNG on a real photo is huge — a lossy format serves that case better.
Q: Can I use AVIF?
A: Yes, with two caveats: it decodes slower than WebP, and browser support is thinner. Point it at modern browsers and provide a JPG / PNG fallback via the <picture> element.