Image Compression Guide
JPEG / JPG
Quality setting: 75–85% is sweet spot for photos. Below 60% causes visible artifacts.
Best for: Photos, complex images with gradients
Not for: Text, logos, transparency
PNG
Compression: Lossless. Use PNG-8 for simple graphics, PNG-24 for full color with transparency.
Best for: Logos, icons, screenshots, transparency
Not for: Large photos (use JPEG instead)
WebP
Savings: 25–34% smaller than JPEG, 26% smaller than PNG at similar quality.
Best for: All web images. Supported by all modern browsers.
Quality: 80–85 recommended
AVIF
Savings: 50% smaller than JPEG on average. Best compression ratio available.
Best for: Modern web where performance is critical
Note: Limited support in older browsers, use with fallback
GIF
Max colors: 256. Only use for simple animations. Replace with video (MP4/WebM) or CSS animations when possible.
| Format | Lossy | Transparency | Animation | Browser Support |
|---|---|---|---|---|
| JPEG | Yes | No | No | Universal |
| PNG | No | Yes | No | Universal |
| WebP | Both | Yes | Yes | 97%+ |
| AVIF | Both | Yes | Yes | 90%+ |
| GIF | No | Partial | Yes | Universal |