JPG, PNG, WEBP, AVIF and SVG: which to use
A practical comparison of the five image formats that matter on the web — what each is good at, what it costs in file size, and which one to pick for photos, logos, screenshots and icons.
Updated 2026-08-03
Choosing the wrong image format is the most common and most invisible performance mistake on the web. A photograph saved as PNG can be ten times larger than the same image as JPEG with no visible benefit; a logo saved as JPEG picks up compression artifacts around every edge. The rules are simple once you know what each format was designed to do.
The comparison
| Format | Compression | Transparency | Animation | Best for | Relative size |
|---|---|---|---|---|---|
| JPEG | Lossy | No | No | Photographs | Baseline |
| PNG | Lossless | Yes (8-bit alpha) | No | Logos, screenshots, line art | 3–10× a JPEG for photos |
| WEBP | Both | Yes | Yes | Almost everything on the web | 25–35% smaller than JPEG |
| AVIF | Both | Yes | Yes | Photos where size matters most | ~50% smaller than JPEG |
| SVG | Vector (text) | Yes | Yes (CSS/SMIL) | Icons, logos, diagrams | Tiny, and resolution-independent |
The short version
- Photographs → WEBP, with a JPEG fallback only if you must support something ancient. Every current browser has supported WEBP for years.
- Logos, icons and diagrams → SVG. It is text, it scales to any size, and it is usually smaller than a 32×32 PNG.
- Screenshots and anything with sharp text → PNG or WEBP lossless. JPEG puts visible fuzz around every letter.
- Anything needing transparency → PNG, WEBP or AVIF. JPEG has no alpha channel at all; converting to JPEG fills transparent areas with a flat color.
- AVIF when bandwidth is the priority and you can generate it — it beats WEBP but encodes slowly and support is newer.
Why a PNG photo is so large
PNG compresses by finding repeated patterns, which works brilliantly on flat color and hard edges — a screenshot of a spreadsheet, a two-color logo. A photograph has almost no exact repetition: every patch of sky is subtly different. JPEG and WEBP instead throw away detail the eye is bad at noticing, which is why they win on photos by such a wide margin and lose on graphics.
Quality settings that actually matter
For lossy formats, the useful range is narrower than the 0–100 slider suggests.
| Quality | Looks like | Use for |
|---|---|---|
| 95–100 | Indistinguishable, very large files | Archival, print masters |
| 80–90 | Indistinguishable at normal viewing size | Hero images, product photography |
| 70–80 | Very slightly soft in fine detail | The sensible default for the web |
| 50–70 | Visible artifacts around edges | Thumbnails, previews |
| Below 50 | Obvious blocking and color banding | Rarely worth it |
Questions
Is WEBP safe to use in production?
Yes. Chrome, Edge, Firefox, Safari and every mobile browser have supported it for years — Safari since version 14 in 2020. The only real holdouts are Internet Explorer and some older email clients, which is why email templates still use JPEG and PNG.
Should I convert my existing JPEGs to WEBP?
For images served on a website, yes — you will typically cut 25–35% with no visible change. Do not convert and then re-convert repeatedly, though: each lossy re-encode compounds the damage. Always convert from the highest-quality original you have.
What about HEIC from my iPhone?
HEIC is excellent but poorly supported outside Apple platforms, and most browsers cannot decode it at all — which means browser-based tools, including this one, cannot open it. Set your iPhone camera to "Most Compatible" to capture JPEG instead, or convert on the device before uploading anywhere.