There are only really four choices for a photograph or a graphic on the web, and the right one is usually obvious once you know which question to ask. It is not “which is best” — it is does this image have large areas of flat colour, and does it need transparency.
The short answer
| If it is… | Use | Because |
|---|---|---|
| A photograph | JPG | Universally supported and far smaller than PNG for continuous tone. |
| A photograph, web only | WebP | Roughly 25–35% smaller than JPG at the same quality. |
| A logo or icon | SVG | Vector — sharp at any size, usually a few kilobytes. |
| A screenshot or diagram | PNG | Lossless, so text and lines stay crisp instead of smearing. |
| Anything needing transparency | PNG or WebP | JPG has no alpha channel at all. |
| A photo from an iPhone | Convert to JPG | HEIC is efficient but half the web cannot open it. |
Lossy and lossless is the whole distinction
Every format here falls on one side of a single line. Lossy formats — JPG, and WebP and AVIF in their usual modes — throw information away to get smaller, choosing detail your eye is bad at noticing. Lossless formats — PNG, and WebP in its lossless mode — keep every pixel exactly and compress by finding repetition.
That is why a photograph saved as PNG is enormous. A photograph has almost no exact repetition: every patch of sky is a slightly different blue, so there is nothing for lossless compression to collapse. And it is why a screenshot saved as JPG looks dirty — the sharp black-to-white edge of a letter is exactly the high-frequency detail JPG discards first, so text picks up a grey halo.
Get those two the wrong way round and you pay for it twice: a bigger file and a worse image.
Lossy compression only goes one way
Converting a JPG to PNG does not restore anything. The detail was discarded when the JPG was written; a PNG of it is a perfect, much larger copy of the damaged version. Similarly, every time you open a JPG, edit it and save it again, it is re-compressed and loses a little more — generation loss. Keep an original if you expect to edit repeatedly.
The formats, one at a time
JPG
Thirty years old and still the right answer for a photograph you need anyone to be able to open. It has no transparency, no animation, and it is lossy — but support is genuinely universal, which no newer format can claim. .jpg and .jpeg are the same format; the three-letter version is a leftover from when file extensions could not be longer.
PNG
Lossless, with a proper alpha channel. The correct choice for screenshots, diagrams, anything with text in it, and anything that needs to sit on a background that is not white. The wrong choice for photographs, where it will produce a file several times the size of the equivalent JPG for no visible benefit.
WebP
Does both jobs — lossy like JPG, lossless like PNG, with transparency in either mode — and is meaningfully smaller than both. Support is effectively universal in browsers now. The catch is outside the browser: plenty of desktop software, older phones and some print workflows still refuse it, which is why it is the right format for a website and the wrong one for a file you are emailing to someone.
AVIF
Smaller again than WebP, sometimes dramatically so at low quality settings. Browser support is good but not complete, encoding is slow, and tool support outside browsers is thin. Worth using with a fallback, not on its own.
SVG
Not a picture at all but a set of drawing instructions, so it is perfectly sharp at every size and usually tiny. Right for logos, icons and simple illustrations; useless for photographs. It is also text, which means it can be styled with CSS — and that it can carry scripts, so treat an SVG from an untrusted source the way you would treat an HTML file.
HEIC
What iPhones shoot by default. Roughly half the size of JPG at the same quality, which is a real advantage on a phone and a real nuisance everywhere else: browsers cannot display it without Apple’s libraries, and a great many websites reject it outright. Convert it to JPG before sending it anywhere.
What about GIF?
Use it only for animation, and preferably not even then. A GIF is limited to 256 colours, which makes photographs look banded, and animated GIFs are enormous compared with the same clip as a video. For a still image there is no situation in which GIF beats PNG.
Practical rules
- Photograph going on a website: WebP, with a JPG fallback if you can be bothered.
- Photograph going to a person: JPG. It always opens.
- Screenshot: PNG. Always.
- Logo: SVG if you have the vector, PNG if you only have a raster.
- Anything with transparency: not JPG, under any circumstances — it will be flattened onto white.
- Don’t convert lossy to lossy twice. JPG to WebP to JPG compresses the same image three times.
Converting between them
All the conversions below happen in your browser — the file is read from disk by the page, decoded and re-encoded on your own machine, and never uploaded. That matters more than it sounds for images, which are routinely unreleased artwork, screenshots of private systems or photographs of people.
One thing to expect: converting to JPG flattens transparency onto a white background, because JPG has nowhere to store it. If your image has a transparent background and you need to keep it, convert to WebP instead.