PNG vs JPG vs WebP: which image format should you use?
A practical comparison of PNG, JPG and WebP: how each one compresses, when transparency matters, and which format to pick for photos, logos and screenshots.
ToolKit6 min read
Three formats cover almost everything you will ever put on a screen, and picking the wrong one is the most common reason a page is slow or a logo has an ugly white box behind it.
The decision comes down to two questions: does the image need transparency, and is it a photograph or a graphic? Everything else follows from there.
The short answer
| PNG | JPG | WebP | |
|---|---|---|---|
| Compression | Lossless | Lossy | Both |
| Transparency | Yes | No | Yes |
| Best for | Logos, screenshots, line art | Photographs | Almost everything on the web |
| Typical photo size | Largest | Small | Smallest |
| Repeated re-saving | No quality loss | Degrades each time | Degrades if lossy |
| Support outside browsers | Universal | Universal | Patchy |
If you only remember one rule: WebP for the web, JPG for sharing and uploading, PNG for anything with transparency or sharp edges.
Lossy and lossless, in plain terms
Lossless compression stores every pixel exactly. Reopen the file a hundred times, re-save it a hundred times, and the last copy is identical to the first. PNG works this way.
Lossy compression throws information away. It is very good at choosing information your eye is unlikely to miss, which is why a JPG photograph can be a tenth the size of the PNG version and still look the same. The catch is that the loss is permanent and it accumulates: every save discards a little more.
That accumulation is why a meme that has been screenshotted and re-shared twenty times looks like it was transmitted by fax. Each round trip was another lossy save.
WebP can do either. Used lossily it beats JPG at the same visual quality, typically by 25 to 30 percent. Used losslessly it beats PNG, usually by around 26 percent.
Where each format wins
JPG wins on compatibility
JPG is thirty years old and every piece of software on earth opens it. Marketplace listing forms, older versions of Office, print shops, applicant tracking systems and your relative with an ancient laptop all handle it without complaint.
It is the wrong choice for anything with hard edges. Black text on white is the exact pattern lossy compression handles worst, and you get faint grey halos around the letters. If you have ever compressed a screenshot and wondered why it looked dirty, that is why.
JPG also has no transparency at all. Converting a logo with a transparent background to JPG fills that background with a solid colour, which is why converting PNG to JPG fills it with white rather than pretending it can keep the alpha channel.
PNG wins on precision
PNG keeps every pixel and supports an alpha channel, which makes it right for:
- Logos and icons that sit on varying backgrounds
- Screenshots, especially of text or user interfaces
- Diagrams, charts and line art
- Any image you will edit again later
The cost is size. A photograph as PNG can easily be five times the JPG. PNG compresses flat areas of identical colour extremely well and photographs extremely badly, because no two adjacent pixels in a photograph are quite the same.
WebP wins on the web
WebP was designed for exactly this job. It supports transparency like PNG, compresses photographs better than JPG, and is supported by every current version of Chrome, Firefox, Safari and Edge.
For a website, this is close to a free win. Images are usually the heaviest thing on a page, and serving them as WebP removes a meaningful share of that weight. That feeds directly into Largest Contentful Paint, which is one of the Core Web Vitals Google measures.
The weakness is everywhere that is not a browser. Save a WebP from a website and you may find your image viewer refuses to open it, your design tool will not import it, and the print shop sends it back. That is why converting WebP to PNG or to JPG is such a common thing to need.
A decision you can actually follow
Ask three questions in order:
- Does it need a transparent background? If yes, it is PNG or WebP. JPG is out.
- Is it a photograph? If yes, prefer WebP for the web and JPG for anything leaving the web. If no, prefer PNG for precision, or lossless WebP if it is staying on a website.
- Will it be edited again? If yes, keep a lossless master in PNG and export the lossy copies from it. Never edit the lossy copy.
That third point is the one people skip, and it is where quality quietly disappears. Keep the original.
Converting without losing quality twice
Every lossy conversion re-encodes the image, so converting JPG to WebP applies a second round of loss on top of the first. It is usually invisible at high quality, but the rule is the same as with editing: start from the best original you have rather than from something already compressed.
If you are moving a site to WebP, convert from the source files, not from the JPGs already on the server.
The tools for each step are here:
- PNG to WebP and JPG to WebP for making a site faster
- PNG to JPG for files that need to be accepted everywhere
- WebP to PNG for opening a downloaded WebP in normal software
- Compress image when the format is right but the file is too heavy
- Resize image when the real problem is that it has far more pixels than it needs
All of them run in your browser, so the file never leaves your device.
One thing that beats format choice
Resizing. File size scales with the pixel count, and most images on the web are far larger than the space they are displayed in. A 4000 pixel wide photo shown in a 800 pixel wide column is carrying twenty-five times more data than it needs.
Getting the dimensions right first, then choosing the format, will do more for your page weight than any amount of format tuning on an oversized image.