JPG vs PNG vs WebP vs AVIF: which should you use?
Four formats cover almost everything on the web. They are not interchangeable, and picking the wrong one is the most common reason a page is slow or a logo looks fuzzy.
The short answer
- Photographs → WebP, or JPG if something old has to open it.
- Logos, screenshots, diagrams, anything with flat colour or sharp edges → PNG, or WebP.
- Anything that needs transparency → PNG or WebP. Never JPG.
If you stop reading here you will get it right most of the time. The rest of this explains why, and covers the cases where the short answer is wrong.
JPG
JPEG is from 1992 and is still the most widely supported image format in existence. It is lossy: it throws away detail your eye is bad at noticing, particularly fine colour variation, and keeps the brightness information your eye is good at noticing. That trade is why a 12-megapixel photo fits in 3 MB instead of 36 MB.
What it cannot do: transparency. There is no alpha channel in a JPEG, at all. When you convert a transparent PNG to JPG the transparent areas become a solid colour, usually white. That is not a bug in the converter, it is the format.
What it is bad at: sharp edges. JPEG works on 8×8 blocks, and a hard black-on-white edge — text, a logo outline, a screenshot of a spreadsheet — produces visible ringing around it. Save a screenshot as JPEG and you will see grey fuzz around every letter.
Quality settings, in practice: 90 and above is visually lossless and wasteful. 75–85 is where almost everything should live. Below 60 you will see blocking in skies and around edges. Our image compressor defaults to 80 for that reason.
One thing worth knowing: JPEG is lossy every time you save. Open a JPEG, crop it, save it, and you have compressed it twice. Do that ten times and it visibly degrades. This is why our metadata remover rewrites the file container instead of re-encoding it.
PNG
PNG is lossless. Every pixel you put in comes back out exactly. It has a full alpha channel, so transparency works properly, including soft edges and drop shadows.
The cost is size. PNG compresses by finding repetition, which works brilliantly on flat colour and terribly on photographic noise. A photo saved as PNG is routinely five to ten times larger than the same photo as a good JPEG, with no visible benefit. If you have ever wondered why a resized image came back enormous, this is usually why — and it is why our resizer defaults to giving you back the format you gave it.
Use PNG for: logos, icons, screenshots, diagrams, line art, anything with transparency, and any image you are going to edit again later.
WebP
WebP does both jobs. It has a lossy mode that is typically 25–35% smaller than JPEG at matching visual quality, and a lossless mode that is usually 20–30% smaller than PNG. It supports transparency in both modes, and animation.
Support is no longer a real concern: every current browser reads WebP, and has since 2020. The remaining friction is outside the browser — some older desktop software, some print workflows, and a handful of upload forms still reject it. That is the only reason not to use it.
If you are putting images on a website you control, WebP is the default answer. Convert JPG to WebP, or PNG to WebP.
AVIF
AVIF is smaller again — often 20% below WebP at the same quality, and dramatically better at low bitrates, where JPEG falls apart and AVIF stays smooth. It handles transparency, wide colour and high dynamic range.
Two catches. Encoding is slow: expect several seconds for a large image where WebP takes a fraction of one. And support, while good in browsers, is thinner everywhere else than WebP's.
Use AVIF when bytes genuinely matter — a large hero image, a site serving a lot of mobile traffic on slow connections — and you can afford the encode time.
A comparison you can act on
| JPG | PNG | WebP | AVIF | |
|---|---|---|---|---|
| Lossless option | No | Yes | Yes | Yes |
| Transparency | No | Yes | Yes | Yes |
| Animation | No | No | Yes | Yes |
| Good for photos | Yes | No | Yes | Yes |
| Good for flat graphics | No | Yes | Yes | Yes |
| Encode speed | Fast | Fast | Fast | Slow |
| Universal support | Yes | Yes | Browsers | Most browsers |
The formats you will run into but should not save as
HEIC is what iPhones record by default. It is efficient and almost nothing outside Apple opens it, which is why converting it is one of the most common things anyone does with a photo. You can turn it off in Settings → Camera → Formats → Most Compatible.
GIF is limited to 256 colours and compresses badly. Its one remaining advantage is that a GIF plays in places a video will not. For anything else, WebP is better in every dimension. If you need one, the GIF maker will build it.
BMP and TIFF are essentially uncompressed. TIFF still has a place in print and archival work. Neither belongs on a web page.
SVG is not a competitor to any of the above — it is not pixels at all, but drawing instructions, so it stays sharp at any size and is usually tiny. It is the right answer for logos and icons, and the wrong answer for photographs. You can trace a simple image into SVG, but do not expect it to work on a photo.
Three rules that cover nearly everything
- Start from the best original you have. Every conversion between lossy formats compounds the loss. Convert from the camera file, not from something already saved twice.
- Resize before you compress. A 4000-pixel-wide photo displayed in a 800-pixel column is wasting 95% of its bytes, and no quality setting will fix that. Resize first, then compress.
- Match the format to the content, not to habit. Photos are lossy, graphics are lossless. That one distinction settles most arguments.