JPG, PNG or WebP: which one should you save as?
For the web, save as WebP. For a file you're handing to someone else, photos go to JPG and logos to PNG.
What decides it isn't the format. It's where the file ends up. On the web, lighter always wins, and WebP is the lightest of the three. A file you send to another person has to open on their machine, and the older formats are the safe bet there.
If a photo you saved as PNG came out at 8MB, that was the wrong choice. Ragged edges around a logo mean it was saved as JPG, which is the same mistake in reverse.
JPG shrinks by throwing things away
JPG makes files smaller by discarding information your eye is unlikely to notice. On photographs this works remarkably well: a tenth of the original size and you can barely tell.
It costs you two things.
One. It shows on text and lines. Hard color boundaries are the hardest thing for JPG, so a screenshot saved as JPG picks up grubby smudges around the letters. Black text on white is the worst case.
Two. It degrades every time you save. Open, edit, save, repeat, and each round discards a little more. Ten rounds and it visibly mushes. This is why you keep the original separately.
PNG throws nothing away
PNG compresses without discarding anything. Save it a hundred times and it's unchanged.
- Screenshots, diagrams, logos → the text stays crisp
- Transparent backgrounds work → JPG cannot do this, so you get a white rectangle instead
The downside is size on photographs: the same photo can be five to ten times heavier than the JPG. Photos have color shifting constantly across the frame, and "shrink without discarding" doesn't have much to work with.
WebP does both
WebP came later and took the good parts of both. It supports discarding and non-discarding modes, handles transparency, and at the same quality it is 25–35% lighter than JPG.
Chrome, Edge, Firefox and Safari all support it now, so for anything going on the web, WebP is the one to reach for first.
Where it catches you is off the web. Older software, some document editors and certain upload forms still reject WebP. If you're handing a file to another person, JPG or PNG is safer.
So, by situation
| Situation | Format |
|---|---|
| Photo for a website | WebP (JPG if not) |
| Screenshot for a blog post or email | PNG |
| Logo or icon | PNG, transparent |
| Going to a print shop | PNG or the original file. Avoid JPG |
| Government or official upload forms | JPG or PNG. Some reject WebP |
| An original you'll edit repeatedly | Keep as PNG, export JPG when you send |
When is GIF the answer?
Only when it needs to move. GIF is limited to 256 colors, so photographs degrade visibly. For a short screen recording, a short video (MP4) is now both lighter and cleaner than a GIF.
The order to shrink things in
If a file is big, check its pixel dimensions before changing format. There's no reason to put a 4000×3000 image on a blog. Reducing the width to 1200 usually removes 90% of the weight on its own.
- Cut the pixels: anything larger than the space it goes in is waste
- Choose the format: JPG or WebP for photos
- Only then lower the quality a little
What this does not cover
- AVIF: a newer format that compresses better than WebP, but support is still uneven
- SVG: not an image but shape data, which is why a logo scales up without breaking
- HEIC: the iPhone default. Windows often will not open it, so convert to JPG before sending
Paste an image (Ctrl+V, or ⌘V on a Mac) and the size and ratio appear straight away. Crop, resize, then export as PNG, JPG or WebP.
Whatever you paste stays in the browser, so a refresh doesn't lose it. Rather than reading a table about how much the format changes the size, save the same image three ways and look: it is faster.