Guides ·
Which image format should you actually use?
JPEG, PNG, WebP, AVIF and HEIC compared by what they are for rather than by specification. A decision you can make in about thirty seconds.
JPEG for photographs, PNG for screenshots and anything with text in it, WebP when you control the website, and AVIF when you want the smallest file and can accept slightly narrower support. Those four cover almost everything; the rest of this page is about the cases where the obvious choice is the wrong one.
Most format comparisons are a table of specifications. Here is the version that answers the question you actually have.
The thirty-second answer
- Photograph, going to a person — JPEG. It opens everywhere, and it has for thirty years.
- Photograph, going on a website — WebP. About a third smaller than JPEG at the same quality, supported by every current browser.
- Screenshot, logo, diagram, anything with text — PNG. Lossless, so text stays sharp.
- Transparency needed — PNG, or WebP if it is for the web.
- High-traffic website, encode time is not a problem — AVIF, with a WebP fallback.
- Your phone made it — HEIC. Convert it before sending it anywhere.
If that answered your question, you are done.
Why the split is really about two kinds of image
Almost every format decision comes down to which kind of image you have.
Continuous-tone images — photographs — have smooth gradations and no hard edges. Lossy formats (JPEG, WebP, AVIF, HEIC) work by discarding detail the eye does not notice in exactly this kind of image. They are enormously effective on photographs.
Hard-edged images — screenshots, logos, charts, anything containing text — have sharp transitions and flat blocks of colour. Lossy compression handles them badly: you get visible smearing around edges, and often barely any file-size saving, because there is nothing for the encoder to throw away.
Nearly every “why does my image look terrible” question is someone using a lossy format on a hard-edged image.
The formats, briefly
JPEG
1992, and still the safe default. Universal support, no transparency, lossy only. Its weaknesses are text, flat colour and smooth gradients — the last of which is why skies band.
Use quality 82ish. Above 90 you are paying a lot of bytes for a difference you cannot see.
PNG
Lossless, with proper alpha transparency. Perfect fidelity, large files. The right answer for screenshots and graphics; the wrong answer for photographs, where it produces files ten times larger than JPEG for no visible gain.
WebP
Supports both lossy and lossless, with transparency in both. Typically 25–35% smaller than JPEG. Every browser in current use supports it — Safari since 2020. Outside browsers, support is patchy, so it is a format for the web rather than for email or print.
AVIF
The most efficient in common use — often half the size of JPEG. Handles gradients and flat colour noticeably better, so it avoids the banding JPEG is prone to. Encoding is slow, measured in seconds rather than milliseconds, which makes it right for images you encode once and serve many times.
HEIC
What your iPhone produces. Excellent compression, very poor support outside Apple’s ecosystem because the underlying codec is patent-encumbered. Treat it as a storage format for the phone and convert before sharing.
GIF
Only for animation, and even then a WebP or an MP4 will be smaller and look better. Its 256-colour limit is why old GIFs of photographs look speckled.
The things that matter more than the format
Resolution. A 4000px photo displayed at 800px wide is carrying twenty-five times more pixels than anyone will see. Resizing beats any format choice, every time.
The quality setting. The difference between quality 95 and quality 82 is usually invisible and frequently halves the file. Most tools default too high because a too-large file is a quieter failure than a visibly degraded one.
Not re-encoding repeatedly. Every lossy save discards a little more. If you are editing through several rounds, work in PNG and export to a lossy format once at the end.
Try it on your own image
Guidance is general; your image is specific. Compress a JPG or convert to WebP and use the before/after slider to see what actually happens to your picture. It runs in your browser, so you can compare a dozen settings without uploading anything.