JPG, PNG, WebP, HEIC — which format, and when
Most format advice is a feature table nobody can act on. This is the decision as you actually face it: what you're saving, who has to open it, and what you lose each time you re-save.
Choosing an image format comes down to three questions, in this order: is the image a photograph or a graphic, does it need transparency, and who has to open it. Everything else is detail.
The short answer
| What you have | Use | Why |
|---|---|---|
| Photograph, for the web | WebP (JPG fallback) | 25–35% smaller than JPG at the same quality |
| Photograph, maximum compatibility | JPG | Opens literally everywhere |
| Logo, icon, diagram | SVG if vector, PNG if not | Sharp at every size; no compression artefacts |
| Screenshot with text | PNG | Lossy compression smears small text |
| Anything needing transparency | PNG or WebP | JPG has no alpha channel at all |
| Photo off an iPhone, to share | Convert HEIC → JPG | HEIC still isn't universally supported |
| Master copy you'll edit again | PNG or the editor's own format | Avoids generation loss |
Lossy versus lossless, and why it matters more than it sounds
Lossless (PNG, and WebP in lossless mode) reconstructs the original pixels exactly. Lossy (JPG, WebP's usual mode, HEIC, AVIF) discards information the eye is bad at noticing, and gets much smaller files for it.
For photographs, lossy is the right default — a quality-80 JPG is typically a fifth the size of the lossless version and indistinguishable at normal viewing. For anything with hard edges, lossy compression is visibly bad: it works by throwing away high-frequency detail, and a hard edge is high-frequency detail. That's why text in a JPG screenshot picks up a grey halo, and why line diagrams go mushy.
Generation loss is the one that sneaks up on people. Every time you open a JPG, edit it and re-save, it's re-compressed from the already-degraded version. Do that ten times and the damage is obvious. Keep the master in a lossless format, export to JPG or WebP at the end, and re-export from the master rather than from the export.
The formats, briefly
JPG
Thirty years old and still the safe default. Excellent for photographs, universally supported, and every device on earth can open it. No transparency, no animation, and it degrades on re-save. Quality 75–85 is the sweet spot; above 90 the file grows fast for very little visible gain.
PNG
Lossless with full alpha transparency. Correct for logos, icons, screenshots, diagrams and any graphic with flat colour or sharp edges. Wrong for photographs — a photo saved as PNG is often five to ten times the size of a good JPG with no visible benefit. PNG-8 (256 colours) is a useful trick for simple graphics; PNG-24 is the full-colour version most tools produce.
WebP
Google's format, and now supported by every current browser. It does both lossy and lossless,
supports transparency and animation, and typically lands 25–35% smaller than an equivalent JPG.
For web delivery it's the current default choice. The caveat is outside the browser: some
desktop software and older phones still won't open a .webp, so it's a delivery
format, not an archive format.
HEIC
What iPhones shoot by default since iOS 11. Roughly half the size of JPG at the same quality — genuinely good compression — but support outside the Apple ecosystem remains patchy. Windows needs a codec, many web forms reject it, and a lot of print shops can't take it.
Practical approach: leave the phone shooting HEIC (better photos, less storage), convert to JPG when you need to send or upload. If you'd rather avoid the step entirely, iOS Settings → Camera → Formats → "Most Compatible" switches the camera back to JPG.
AVIF
The newest of the group, and technically the best compressor of the lot — often 50% smaller than JPG. Browser support is now broad. The cost is encoding time (noticeably slower than WebP) and thinner tooling support outside browsers. Worth using where you serve a lot of images and can encode ahead of time; not yet worth it for one-off files you also need to open elsewhere.
SVG
Different in kind: it stores shapes and coordinates, not pixels. Infinitely scalable, tiny for simple graphics, editable as text, and styleable with CSS. Perfect for logos, icons and charts; useless for photographs. If your logo exists as an SVG, use it — resizing a PNG logo for every context is work the browser could be doing better.
Resizing: the thing that actually shrinks your files
Format choice is worth tens of percent. Dimensions are worth multiples. A 4000×3000 phone photo displayed in a 800-pixel-wide column is carrying sixteen times more pixels than it can show — and no amount of format tuning fixes that.
Resize to roughly the size it will be displayed at (double, if you're targeting high-DPI screens) before worrying about format. It's usually the single largest saving available, and it costs nothing in quality.
Image resizer → Resize and re-compress locally in your browser; nothing is uploaded.Two things worth knowing about metadata
Photos carry EXIF data: camera model, settings, timestamp and often GPS coordinates. Posting an unstripped holiday photo publishes where you took it. Most social platforms strip EXIF on upload; a file emailed or put on your own site does not get that treatment. Strip it deliberately when the image is going somewhere public.
The other piece is EXIF orientation — the flag that says "this photo was taken rotated". Some software honours it, some doesn't, which is why a photo can look upright in one app and sideways in another. Tools that re-encode properly bake the rotation into the pixels and clear the flag, which ends the disagreement.