PNG, JPG or WebP — which should you actually use?
Use JPG for photographs, PNG for logos, diagrams and anything needing transparency, and WebP when you want either of those roughly a third smaller. The deciding question is whether the image has hard edges or smooth gradients.
Updated 2026-08-22
The one rule that decides it
Look at the image and ask whether it is mostly smooth gradients or mostly hard edges. A photograph is gradients: millions of pixels each slightly different from its neighbour, with no sharp boundary anywhere except at object outlines. A logo, a screenshot of text, a chart or a diagram is edges: large areas of identical colour separated by abrupt transitions.
That distinction is not aesthetic, it is mathematical, and it determines which compression works. JPG breaks the image into blocks and discards the high-frequency detail your eye is least likely to miss — which is exactly the wrong thing to do to a hard edge, because an edge *is* high-frequency detail. PNG stores runs of identical colour compactly and losslessly, which is exactly the wrong thing for a photograph, because a photograph has almost no identical neighbouring pixels to compress.
So: gradients go to JPG, edges go to PNG. Applied to a photograph, PNG produces a file several times larger for no visible benefit. Applied to a logo, JPG produces grey smudges and coloured halos around every letter. Nearly every "why does my image look wrong" question resolves to having applied one rule to the other case.
What each format actually costs you
JPG is lossy and permanent. Every save discards information, and it cannot be recovered by converting back — a JPG turned into a PNG is a lossless copy of a damaged image, larger and no better. JPG also has no alpha channel at all, so transparency does not survive: transparent pixels are flattened onto a background colour, usually white, which is why a converted logo arrives with a white box around it.
PNG is lossless and keeps transparency, so it is the right home for anything that will be edited again or composited over something else. The cost is size. A twelve-megapixel photograph saved as PNG can easily be five to ten times the JPG, and no amount of PNG optimisation closes that gap, because the format is not throwing anything away.
WebP does both jobs. It has a lossy mode that beats JPG by roughly 25 to 35 percent at matching quality, and a lossless mode that beats PNG by roughly 20 to 25 percent — and unlike JPG it keeps an alpha channel in both. Every browser released since around 2020 displays it. The catch is outside the browser: some desktop applications, older phones and a fair number of upload forms still refuse it, which is the single reason people convert WebP back to JPG.
Quality settings, and where they stop mattering
JPG quality is a number from 1 to 100 that controls how aggressively detail is discarded. It is not a percentage of anything and the scale is not linear. In practice the useful range is narrow: below about 70 the artefacts become visible on ordinary photographs, and above about 90 the file grows quickly while the improvement becomes very difficult to see.
Somewhere around 80 to 85 is where most people should sit for anything going on the web. That typically produces a file a fifth the size of quality 100, and side by side at normal viewing distance you will struggle to tell them apart. Going to 95 or 100 roughly doubles the file to protect detail almost nobody perceives.
The exception is an image that will be edited or re-encoded later. Every JPG save compounds the loss, so a photo that will be cropped, colour-corrected and re-exported should be kept at a high quality or in a lossless format until the last step. Compress once, at the end, not at every stage.
Converting between them without making things worse
Converting never adds information back. This is the most common misunderstanding in the whole subject. Turning a heavily compressed JPG into a PNG produces a bigger file containing exactly the same flaws, faithfully preserved. Upscaling a small image produces a larger image with the same amount of real detail, spread more thinly.
The corollary is to always convert from the best copy you still have. If the original camera file exists, convert from that rather than from the version that has already been through a messaging app. If it does not, accept that the quality ceiling was set when the copy you have was made.
Direction matters too. JPG to PNG is worth doing when you are about to edit and want no further loss, and pointless when you are just storing the result. PNG to JPG is worth doing when a screenshot of a photograph is inexplicably four megabytes, and harmful when the PNG is a logo with transparency. WebP is usually the answer when the destination is a web page and the wrong answer when the destination is someone else’s upload form.
A short decision list
Photograph for a website: JPG at 82, or WebP if you control where it will be displayed. Photograph you will edit later: keep the original, export at the end. Logo, icon or anything with transparency: PNG, or lossless WebP if the destination accepts it. Screenshot containing text: PNG, because JPG will fringe the letters. Screenshot of a photograph or a video frame: JPG, because it is a photograph regardless of how you obtained it.
A file that is inexplicably large is almost always a photograph saved as PNG, and converting it is the single highest-value thing in this article. A file that looks blurry or blotchy around text is almost always a graphic saved as JPG, and the fix is to go back to the source rather than to convert the damaged copy.