Images
JPG, PNG or WebP: which format to use, and when
A plain-language guide to choosing between JPG, PNG and WebP for photos, screenshots, logos and transparent images, with the trade-offs explained.
The one-minute answer
- Photo (people, places, food, products): JPG, or WebP for your own website.
- Screenshot, chart, diagram, text: PNG.
- Logo or cut-out with a transparent background: PNG, or WebP for your own website.
- Uploading to a form that lists allowed formats: whatever it lists, usually JPG.
The rest of this guide explains why, so you can decide the odd cases yourself.
Lossy and lossless
JPG and (usually) WebP are *lossy*: they throw away detail the eye is unlikely to notice, such as tiny colour variations in a sky. That makes photos many times smaller. PNG is *lossless*: every pixel comes back exactly as it went in.
Lossless sounds better, but for photos it is mostly wasted bytes. When we converted 9 PNG sample photos (6,072 KB) to JPG at quality 90, they shrank to 1,010 KB, 83 % smaller. At quality 90 the loss is very hard to see at normal viewing size.
Where PNG is the right choice
Lossy compression struggles with hard edges. Around sharp text and thin lines, JPG produces faint smudges and halos, known as artefacts, which make screenshots look dirty. Images with large areas of flat colour, such as app screenshots, slides, charts and diagrams, compress very efficiently as PNG and stay perfectly crisp.
PNG is also the format to keep your master copy in while you are still editing. Each time a JPG is opened, changed and saved again, a little more detail is lost. Edit in PNG, then export a JPG at the end.
Transparency
JPG has no transparency: every pixel is a solid colour. If you convert a transparent PNG logo to JPG, the transparent areas must be filled with a colour. JPG PNG WebP Converter fills them with white by default and lets you pick another colour so the logo matches the page it will sit on.
PNG and WebP both keep transparency, so use one of them for logos, icons and product cut-outs that sit on coloured backgrounds.
Where WebP fits
WebP does both jobs: lossy for photos, lossless for graphics, with transparency in either mode. In our tests WebP photos were about 20 % smaller than JPG at the same quality setting (see our WebP vs JPG test). Every current browser displays it.
The catch is everything outside the browser. Government portals, job sites, print shops and older software often accept only JPG and PNG. Use WebP for images on your own site, and JPG or PNG for files you send or upload elsewhere.
Fixing the size after choosing the format
Choosing the right format is the biggest saving, but not the only one. If a photo is wider than it will ever be shown, reduce it with Bulk Image Resizer; if it still needs to be lighter, lower the quality a little in Compress Image. For JPG, quality 75 to 85 is a good range for most photos.