Quick answer
Use PNG for screenshots, graphics with transparency, and images with text. Use JPG for photographs and images where smaller file size matters more than pixel-perfect quality.
PNG vs JPG comparison
| Feature | PNG | JPG |
|---|---|---|
| Transparency | Yes (alpha channel) | No |
| Compression | Lossless | Lossy |
| File Size | Larger | Smaller |
| Quality Loss on Save | None | Yes, cumulative |
| Best For | Graphics, screenshots | Photos, web images |
| Color Depth | Up to 48-bit | 24-bit |
| Browser Support | Universal | Universal |
When to use PNG
PNG (Portable Network Graphics) uses lossless compression, meaning it preserves every pixel exactly as you saved it. Choose PNG when:
- You need transparency: Logos on varied backgrounds, overlays, watermarks
- The image contains text: Screenshots, UI mockups, infographics
- You need to edit later: No quality loss when re-saving
- Sharp edges matter: Icons, diagrams, line art
- Colors are limited: Graphics with flat colors compress well in PNG
Where PNG falls short
- Large file sizes: A photo saved as PNG can be 5-10x larger than JPG
- Slower page loads: Larger files take longer to download
- Overkill for photos: The lossless quality is often imperceptible in photographs
When to use JPG
JPG (also called JPEG) uses lossy compression, discarding image data that humans cannot easily perceive. Choose JPG when:
- The image is a photograph: Complex scenes with gradients and many colors
- File size is a priority: Email attachments, web pages, storage
- Transparency is not needed: Solid backgrounds are acceptable
- Slight quality loss is acceptable: The difference is often invisible
- You are sharing online: Most social platforms prefer or require JPG
JPG drawbacks
- No transparency: Transparent areas become white or another solid color
- Cumulative quality loss: Each edit-and-save cycle degrades the image
- Compression artifacts: Look at red text on white background at quality 60. You'll see it
- Not ideal for graphics: Logos and icons look blurry or show artifacts
When the choice matters
Screenshots: Use PNG
Screenshots contain text, UI elements, and sharp edges. JPG compression creates visible artifacts around these elements, especially at lower quality settings. PNG preserves the crispness of text and interface elements.
Photographs: Use JPG
Photographs have smooth color transitions that hide JPG compression artifacts. A photo saved as PNG might be 3MB while the same image as JPG at 85% quality could be 300KB with no visible difference.
Logos with transparency: Use PNG
A logo needs to work on any background color. PNG's alpha channel allows partial transparency and smooth edges. JPG would require a solid background, limiting where the logo can be used.
Product photos: Use JPG
E-commerce sites display hundreds of product images. The file size savings from JPG add up significantly, and the quality at 80-85% is more than sufficient for web display.
Technical differences
How PNG compression works
PNG uses DEFLATE compression combined with filtering, as defined in the W3C PNG specification. It predicts pixel values based on neighboring pixels and stores only the differences. This is completely reversible, so no data is lost.
How JPG compression works
JPG divides the image into 8x8 pixel blocks, converts colors to a different space (YCbCr), and applies a discrete cosine transform (DCT) to identify which visual information can be discarded. This process is defined in the JPEG standard (ITU-T T.81). Higher compression means more data is discarded.
Quality settings
JPG quality is typically set from 0-100. Settings of 80-90 provide a good balance between quality and file size, according to Google's image performance guidance. Below 70, artifacts become increasingly visible. PNG has no quality setting since it is always lossless.
Frequently asked questions
When should I use PNG instead of JPG?
Use PNG for screenshots, graphics with transparency, and images with text or sharp edges. PNG uses lossless compression, so every pixel is preserved exactly. It is also the better choice when you need to edit and re-save a file later, since there is no quality loss on each save.
When should I use JPG instead of PNG?
Use JPG for photographs and images where smaller file size matters more than pixel-perfect quality. A photo saved as PNG can be 5-10x larger than the same image as JPG. At 80-85% quality, JPG is more than sufficient for web display and sharing online.
What is the difference between lossy and lossless compression?
Lossless compression (PNG) preserves every pixel exactly, so no data is lost when saving. Lossy compression (JPG) discards image data that humans cannot easily perceive, resulting in smaller files but cumulative quality loss with each re-save.
Sources and references
Need to convert?
Convert between PNG and JPG directly in your browser. No upload required.
Your files never leave your device