PNG vs JPG: When to Use Each (with Examples)
The simple rule with proof. Then the edge cases where the rule flips.
The rule
Photograph → JPG (or WebP).
Graphic, screenshot, logo, illustration, or anything that needs transparency → PNG (or WebP).
Why
JPEG is built for photos. It uses lossy compression that mostly hides itself in the smooth gradients photos are full of. A photo as PNG is several times bigger with no visible benefit.
PNG is built for graphics. It keeps every pixel exact, supports transparency, and compresses runs of identical colors efficiently. A screenshot as JPG would smear text edges and waste space on smooth backgrounds.
Side-by-side numbers
Same 2 MB camera photo:
- JPG quality 80: 380 KB
- JPG quality 95: 950 KB
- PNG: 4.1 MB
When to switch sides
Logos and icons embedded in photos: still PNG (the sharp edges suffer in JPG).
Photos that need transparency (a person with the background cut out): PNG, because JPG doesn't support transparency at all.
Frequently asked questions
What about WebP?
WebP combines both modes. Use WebP if your audience uses modern browsers (99%+ today) — it beats both formats on file size.
Will JPG damage a photo over time?
Re-saving the same JPG repeatedly compounds compression loss. Save once and stop.