The one distinction that matters: lossy vs lossless
Every format below is either lossy or lossless, and some are both. A lossless format reconstructs your original pixels exactly — save, reopen, and every value is identical. A lossy format throws information away permanently in exchange for a much smaller file, betting that you will not miss what it discarded.
The bet is usually a good one. Lossy compression targets the things human vision is bad at: fine colour detail (we see brightness far more precisely than hue), and high-frequency variation in busy areas. A photograph of a beach can lose 90% of its data and look untouched. A screenshot of text cannot lose 10% without visible damage, because text is nothing but high-frequency edges.
That single fact — that lossy compression fails on sharp edges and succeeds on organic texture — predicts nearly every format decision you will make.
JPG: still the safe default for photographs
JPEG is from 1992 and remains the most compatible image format in existence. Anything that can display an image can display a JPG, which is why it stays the right answer for email attachments, print shops, forms that specify a format, and any workflow where you do not control the other end.
It is lossy only, so it cannot store transparency and cannot survive repeated editing. Every time you open a JPG, change something and re-save, it re-compresses from the already-compressed data and loses a little more. Do that ten times and the damage is obvious — blocky patches around edges and colour banding in skies. Keep an original in a lossless format if you expect to edit repeatedly.
JPEG's other weakness is the one implied above: it is poor at sharp edges. Text and line art in a JPG pick up 'mosquito noise', a faint halo of speckle around each edge. If your image is mostly text, JPG is the wrong format regardless of file size.
PNG: for transparency and for pixels you cannot lose
PNG is lossless, supports full alpha transparency, and is the correct choice whenever an image has hard edges: logos, icons, diagrams, screenshots with text, and anything with a transparent background.
The cost is size. A lossless photograph in PNG is routinely five to ten times larger than a visually identical JPG — a 3 MB JPG might be 20 MB as a PNG with no perceptible gain. PNG compression works by finding repeated patterns, and photographs, being noisy, have very few. This is the single most common image mistake on the web: a photograph saved as PNG because someone read that PNG is 'higher quality'.
PNG is at its best where its compression has something to grip. A screenshot of a code editor, with large flat areas of one colour, compresses beautifully. A logo with six colours compresses to almost nothing.
- Use PNG when the image needs a transparent background.
- Use PNG for screenshots that contain readable text.
- Use PNG for logos, icons and flat-colour illustrations.
- Do not use PNG for photographs unless you need a lossless master.
WebP: the sensible modern default for the web
WebP does both lossy and lossless, supports transparency and animation, and is supported by every browser in current use. In lossy mode it typically produces files 25–35% smaller than a JPG of equivalent visual quality. In lossless mode it beats PNG by roughly 20–25%.
The important capability that neither of its predecessors has is lossy compression with an alpha channel. A cut-out product photo on a transparent background had to be PNG before WebP, and was therefore large. As lossy WebP it can be a fraction of the size while looking the same — which is why a cut-out destined for a web page is usually best exported as WebP.
The reason to hesitate is compatibility outside the browser. Older desktop software, some print workflows, and a surprising number of upload forms still reject WebP. It is the right default for images you serve on a site, and the wrong default for images you hand to someone else.
AVIF: the best compression, with real caveats
AVIF is derived from the AV1 video codec and compresses harder than anything else in mainstream use — commonly 50% smaller than JPG at matched quality, and noticeably better than WebP at low bitrates, where it degrades into soft blur rather than blocky artefacts.
It has two practical costs. Encoding is slow: an AVIF can take several seconds where a JPG takes milliseconds, which matters when you are converting hundreds of images or working in a browser tab. And support, while good in browsers, is thinner than WebP everywhere else.
AVIF is worth it for large hero images and photo galleries where the bandwidth saving is real and the encode happens once. For a thumbnail, the saving is a few kilobytes and not worth the encode time.
What to actually pick
Roughly, in order of how often each situation comes up:
- Photograph on your own website → WebP, with a JPG fallback if you support very old clients.
- Photograph you are sending to someone → JPG, because it always works.
- Large hero image or photo gallery → AVIF, if you can afford the encode.
- Anything with a transparent background, for the web → lossy WebP.
- Anything with a transparent background, for someone else → PNG.
- Screenshot with text → PNG, or lossless WebP if it stays on your site.
- Logo or icon → SVG if you have the vector; PNG if you only have pixels.
- Master copy you will edit again → PNG or the original camera file, never JPG.
A note on quality settings
Most tools express lossy compression as a 0–100 quality number, and the scale is badly non-linear. The range from 100 down to about 85 costs you almost nothing visible while removing a large fraction of the file size. Below about 60, artefacts become obvious on most images. Between 75 and 85 is where the great majority of web images should sit, and going above 90 is nearly always wasted bytes.
The exception is images with sharp edges or large flat colour areas, where artefacts show up much earlier. If you are compressing a screenshot or an illustration and it must stay lossy, start at 90 rather than 80.