JPG and PNG are the two oldest mainstream image formats on the web, and the choice between them is the most common image-format decision. JPG was designed for photographic content — its lossy compression discards image data the eye doesn't notice, producing dramatically smaller files. PNG was designed for graphics — its lossless compression preserves every pixel exactly and supports full alpha transparency.
The wrong choice is expensive. A photograph saved as PNG is typically 5–10× larger than the same photograph as JPG, with no visible quality benefit. A screenshot saved as JPG produces visible artefacts around text and sharp edges. Both formats have universal browser support, so compatibility isn't a decision factor — content type is.
Modern web pages can do better than either by switching to WebP (smaller than JPG on photographs, smaller than PNG on graphics, supports transparency). But where you need universal compatibility — email, legacy systems, downloadable assets — JPG and PNG remain the safe choices.
Spec comparison
| Property | JPG | PNG |
|---|---|---|
| Compression | Lossy | Lossless |
| Graphic type | Raster | Raster |
| Transparency | No | Yes |
| Animation | No | No |
| HDR | No | No |
| Embeds EXIF | Yes | Yes |
| Browser coverage | 100% | 100% |
| Introduced | 1992 | 1996 |
File size comparison
Same 2400×1600 photograph (a phone-camera output)
JPG
JPG at q85: ~350 KB
PNG
PNG: ~3.5 MB
For this photographic source, JPG is 10× smaller than PNG with no visible difference at any normal viewing size. For a graphic source (screenshot, logo), the order reverses — PNG would be smaller and crisper than JPG.
Quality comparison
On photographic content viewed at typical sizes, JPG q85 and PNG are visually identical. JPG only shows artefacts at low quality (below ~70) or after many save cycles. On graphics — text, line art, sharp edges — JPG produces visible blockiness even at high quality; PNG keeps edges crisp.
When each one wins
Use JPG if…
- The image is a photograph (camera or phone output, no transparency)
- You need maximum compatibility (every email client, every legacy system)
- File size matters more than per-pixel accuracy
- The image will be re-encoded by the platform anyway (Instagram, Facebook)
Use PNG if…
- The image has sharp edges or text (screenshot, UI graphic, line art)
- You need transparency
- The image is being edited and re-saved — PNG is lossless so quality doesn't degrade
- The content is a logo, icon, illustration or chart
Recommendation
For typical use, default to JPG for photographs and PNG for everything else. If you're publishing to a modern website you control, skip both and use WebP — smaller files, both transparency and lossy-compression-for-photos in one format, supported in every current browser.
Frequently asked questions
- What size difference should I expect between JPG and PNG?
- For photographic content, PNG is typically 5–10× larger than JPG. For graphics with limited colours (screenshots, line art), PNG is often smaller than JPG — and crisper.
- Will JPG always look worse than PNG?
- Only on content with sharp edges (text, graphics, line art). For photographic content at quality ≥ 80, JPG and PNG are visually identical at any normal viewing size.
- Should I convert my PNG photos to JPG?
- If they're photographic (no transparency, no sharp edges), yes — you'll save 80–95% of the file size with no visible quality difference. Use the PNG to JPG tool linked below.
- What if I need transparency?
- JPG doesn't support transparency. Use PNG, or use WebP (smaller files, same transparency support, modern browsers only).
- Does Google prefer JPG or PNG?
- Google indexes both equally well. The ranking factor that matters is file size — and serving photographic content as PNG bloats your page weight unnecessarily, which hurts Core Web Vitals.