JPG is for photographs
JPG throws away detail the eye is unlikely to miss, which is why photographs compress so well in it. That same behaviour ruins sharp edges: text, screenshots, and line art come out blurry and smeared around the boundaries.
JPG also cannot store transparency at all. A transparent background becomes a solid one — white, on this site — the moment you save as JPG.
PNG is for anything with hard edges
PNG is lossless: what you save is exactly what you had. Screenshots, logos, diagrams, and images with text stay crisp, and transparency is preserved.
The cost is size. A photograph saved as PNG is typically several times larger than the same photograph as JPG, with no visible benefit.
WebP does both, usually smaller
WebP has a lossy mode that competes with JPG and a lossless mode that competes with PNG, and it supports transparency in both. For the same visual quality it is generally the smallest of the three.
Browser support is broad now. The remaining friction is outside the browser: some desktop applications, older photo software, and a few upload forms still refuse WebP, which is the usual reason to convert one back to JPG or PNG.
Converting never restores quality
This is the point most worth remembering. Detail discarded by a lossy format is gone. Converting a JPG to PNG produces a lossless copy of an already damaged image — larger, and no sharper.
Each lossy re-save damages the image again. If you have to convert repeatedly, keep the original and convert from it every time rather than converting a converted file.
What quality setting to use
Lossy formats expose a quality slider, usually 0 to 100. It is not a percentage of anything — it selects how aggressively detail is discarded, and the useful range is narrower than the scale suggests.
Around 80 is the usual sweet spot for photographs. Below roughly 60, compression artefacts become visible as blocky patches in smooth areas like skin and sky. Above 90 the file grows quickly for a difference most people cannot see on a screen.
Judge it on the actual image rather than the number. Photographs with large flat regions and gradients show artefacts far earlier than busy, textured ones, so the right setting is not the same for every picture.
A short version
- Photograph, size matters: JPG, or WebP where it is accepted
- Screenshot, logo, diagram, anything with text: PNG, or lossless WebP
- Needs transparency: PNG or WebP — never JPG
- Something refuses to open a WebP: convert to PNG to keep quality, to JPG to keep it small