The two formats
JPG (JPEG) and PNG are the most common image formats on the web.
- JPG uses lossy compression. It makes small files by removing detail that the eye barely notices. It is the best for photos.
- PNG uses lossless compression. It keeps every pixel, and it supports transparency. It is the best for graphics, logos and screenshots.
Why both work well on the web
- Compression. Both are compressed for fast loading.
- Small files. This saves bandwidth and storage.
- Wide support. Every browser and most web tools use them.
When to use JPG
- Complex images and photos. There is some loss of quality, but it is hardly visible, and files are much smaller.
- Photo albums and galleries. Many photos load much faster as JPG.
- Images without transparency. JPG does not support transparent backgrounds.
- Backgrounds and large banners where file size matters.
When to use PNG
- Images with sharp lines and text, such as logos, icons, charts and screenshots. JPG compression makes edges look blurry or pixelated.
- Images that need a transparent background.
- Images you will edit again. PNG does not lose quality on each save.
- Images with few colors.
Quick comparison
| JPG | PNG | |
|---|---|---|
| Compression | Lossy | Lossless |
| File size | Smaller | Larger |
| Transparency | No | Yes |
| Best for | Photos | Logos, icons, screenshots |
Newer formats
WebP and AVIF give smaller files than JPG and PNG with the same quality, and WebP supports transparency. All modern browsers support WebP. Many WordPress plugins convert your images automatically.
Tips
- Resize the image to the size it will be shown at.
- Compress it with a tool or plugin before you upload.
- Use JPG for photos at 70-85% quality.
- Add alt text to all images.
Quick recap
- JPG for photos, PNG for logos and transparency.