The short answer
- Photos: JPG, or WebP for websites.
- Screenshots, diagrams, text: PNG.
- Logos and icons with a transparent background: PNG, or SVG if you have it.
- Anything on a website: WebP, which is usually 25–35% smaller than JPG or PNG at the same quality.
JPG: small photos
JPG throws away detail the eye barely notices, which makes photos small. The cost: sharp edges and text get blurry halos, there's no transparency, and every re-save loses a little more quality. Use it for photos you share or upload.
PNG: exact copies
PNG keeps every pixel exactly, supports transparency, and keeps text and lines crisp. The cost is size: a photo saved as PNG can be five to ten times bigger than the JPG. Use it for screenshots, graphics, logos, and any image you'll keep editing.
WebP: the web format
WebP does both jobs: lossy compression for photos and lossless for graphics, with transparency and animation. It's supported by every current browser, so it's the best choice for website images. Some older apps, editors and email clients still can't open it, so keep JPG or PNG for sending files to people.
Converting between them
- Speed up a website: PNG to WebP or JPG to WebP.
- Make a screenshot or photo smaller to send: PNG to JPG.
- Open an image saved from a website: WebP to JPG or WebP to PNG.
- Edit without further loss: JPG to PNG (it can't restore what JPG already lost, but stops it getting worse).
One thing to know: converting PNG to JPG turns transparent areas white, because JPG has no transparency.