Nearly every image you meet on the web is one of three formats, and picking the wrong one is the single most common reason a page loads slowly or a logo comes out with an ugly white box behind it. The good news is that the decision is genuinely simple once you know what each format is built to do.
The one-line version
That covers perhaps ninety percent of real decisions. The rest of this guide explains why, which matters for the other ten percent.
Lossy and lossless: the actual difference
Every format here compresses your image, but they do it in two fundamentally different ways.
JPG is lossy. It throws information away permanently to make the file smaller, exploiting the fact that human eyes are far better at noticing changes in brightness than in colour, and barely notice fine detail in busy areas. Save at 80% quality and you typically lose most of the file size while seeing almost no difference. The discarded data is gone for good.
PNG is lossless. It compresses by finding patterns and describing them more efficiently, the way a ZIP file does. Nothing is discarded, so a decompressed PNG is bit-for-bit identical to the original. That fidelity costs space.
WebP does both. It has a lossy mode and a lossless mode, and it is better than JPG and PNG at each of their own jobs.
Side by side
| JPG | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy | Lossless | Both |
| Transparency | No | Yes | Yes |
| Animation | No | No | Yes |
| Best for | Photographs | Logos, screenshots, graphics with text | Almost anything on the web |
| Typical size vs JPG | Baseline | Often much larger for photos | Roughly 25–35% smaller |
| Support | Universal | Universal | All modern browsers; patchy in older desktop software |
When JPG is right
Photographs. That is genuinely most of it. A photo is millions of subtly different colours with soft gradients everywhere, which is exactly the pattern JPG's compression was designed around. The same photo saved as PNG is frequently three to five times larger with no visible benefit.
The quality setting is where people go wrong in both directions. Below about 60% you start seeing blocky squares and smeared halos around edges. Above about 90% the file grows quickly while the visible improvement is close to nil. Somewhere around 75–85% is the sweet spot for almost every photograph.
The one JPG trap worth knowing
Because JPG is lossy, damage accumulates. Open a JPG, edit it, save it as a JPG, then repeat a few times and you will watch it degrade — each save discards a little more. This is called generation loss. If you are going to edit an image repeatedly, work from a lossless original and only export to JPG at the very end.
When PNG is right
Two situations. The first is transparency: PNG supports a full alpha channel, so a logo can sit on any background colour without a rectangle around it. JPG simply cannot do this — there is no transparency in the format at all, which is why a logo saved as JPG always arrives with a white box.
The second is sharp edges and flat colour: screenshots, diagrams, charts, anything containing text or line art. JPG's compression makes assumptions that fall apart at hard edges, producing visible fuzz around lettering. PNG keeps text crisp, and because flat areas of identical colour compress extremely well losslessly, a screenshot as PNG is often smaller than the same screenshot as JPG as well as looking better.
When WebP is right
WebP was built by Google specifically to replace both formats on the web, and on the numbers it succeeds: roughly 25–35% smaller than an equivalent JPG, and meaningfully smaller than PNG for lossless images, while supporting transparency and animation.
Every current browser supports it. The remaining catch is outside the browser: some older desktop applications, a few image viewers, and certain platforms that accept uploads still do not handle WebP well. So the rule is about destination rather than quality.
- Publishing on a website you control — use WebP. It is the reason your pages will load faster.
- Sending a file to another person — use JPG or PNG. You do not know what they will open it with, and "it won't open" is a worse outcome than a slightly larger file.
- Uploading to a platform — check what it accepts first. Many are fine with WebP now; some still are not.
What about GIF?
GIF is limited to 256 colours, which is why photographs saved as GIF look posterised and grainy. It survives purely because of animation and universal support. For a short animation that needs to work absolutely everywhere, GIF still has a place — but the files are large, and animated WebP does the same job far more efficiently where support allows.
A practical workflow
- Keep your original. Whatever you shot or exported first, archive it untouched. Every decision below is reversible only if you still have it.
- Resize before you compress. Dimensions matter more than format. A 4000 px photo displayed in a 800 px column is wasting roughly 96% of its data no matter which format you choose.
- Pick the format by content, using the rules above.
- Compress last, and check the result at full size before you publish it.
Common questions
Does converting PNG to JPG lose quality?
Yes — JPG is lossy, so the conversion discards data, and it also flattens any transparency onto a solid background. For a photograph that is a fine trade. For a logo it usually is not.
Does converting JPG to PNG restore quality?
No. This trips people up constantly. PNG preserves whatever it is given, but it cannot recover detail JPG already threw away. You end up with a larger file containing exactly the same visible image.
Why is my PNG so enormous?
Almost certainly because it is a photograph. Lossless compression cannot do much with the millions of slightly different colours in a photo. Save it as JPG or WebP instead and expect the file to shrink dramatically.