Image Formats Cheat Sheet — Complete Comparison Table (2025)
A printable, bookmarkable reference for choosing the right image format. Covers compression, transparency, animation, browser support, and optimal use cases.
Image Formats Comparison Table
| Format | Type | Transparency | Animation | Max Colors | Browser Support | Best For | |--------|------|-------------|-----------|------------|----------------|----------| | JPEG | Lossy | No | No | 16.7M | 100% | Photos, web images | | PNG | Lossless | Yes (alpha) | APNG only | 16.7M+ | 100% | Logos, screenshots, icons | | WebP | Both | Yes | Yes | 16.7M | 96%+ | Web (replaces JPG+PNG) | | AVIF | Both | Yes | Yes | 10/12-bit HDR | 92%+ | Next-gen web, HDR photos | | HEIC | Lossy | Yes | Sequence | 10-bit | Safari only | iPhone photos | | GIF | Lossless | 1-bit | Yes | 256 | 100% | Simple animations, memes | | SVG | Vector | Yes | CSS/JS | Unlimited | 100% | Logos, icons, illustrations | | TIFF | Both | Yes | No | 16/32-bit | Minimal | Print, medical, archival | | BMP | None | No | No | 16.7M | Desktop only | Legacy Windows | | ICO | None | Yes | No | 256 | All browsers | Favicons |
File Size Comparison (Same 1920×1080 Image)
| Format | Typical Size | vs JPEG | |--------|-------------|---------| | JPEG (q85) | 300 KB | baseline | | PNG | 500 KB | +67% | | WebP (q80) | 200 KB | -33% | | AVIF (q50) | 150 KB | -50% | | GIF (256 colors) | 400 KB | +33% | | TIFF (LZW) | 800 KB | +167% | | BMP (uncompressed) | 5.9 MB | +1900% |
Download sample images in every format to test yourself.
When to Use Each Format
For the web
- Photos: WebP with JPEG fallback → sample WebP
- Modern browsers: AVIF → WebP → JPEG cascade using
<picture>→ sample AVIF - Icons/logos: SVG (scalable) → sample SVG
- Screenshots: PNG (lossless) → sample PNG
- Simple animations: WebP animated (not GIF) → sample GIF
- Favicons: PNG 32×32 or ICO → sample ICO
For mobile
- iPhone photos: HEIC (default) → convert to JPEG/WebP for sharing → sample HEIC
- Android: WebP supported natively since Android 4.0
For print / archival
- Print: TIFF (lossless, CMYK) → sample TIFF
- Archival: PNG or TIFF (no lossy degradation)
Browser Support Quick Reference
| Format | Chrome | Firefox | Safari | Edge | |--------|--------|---------|--------|------| | JPEG | ✅ | ✅ | ✅ | ✅ | | PNG | ✅ | ✅ | ✅ | ✅ | | WebP | ✅ 32+ | ✅ 65+ | ✅ 14+ | ✅ 18+ | | AVIF | ✅ 85+ | ✅ 93+ | ✅ 16+ | ✅ 121+ | | HEIC | ❌ | ❌ | ✅ 11+ | ❌ | | GIF | ✅ | ✅ | ✅ | ✅ | | SVG | ✅ | ✅ | ✅ | ✅ |
<picture> Tag — Serve Best Format Automatically
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" width="800" height="600">
</picture>
Browser picks the first format it supports. AVIF-capable browsers load .avif (smallest), others try .webp, rest fall back to .jpg.
Quick Decision Flowchart
- Is it a vector graphic (logo, icon)? → SVG
- Does it need transparency? → WebP or PNG
- Is it a photograph? → WebP (AVIF if modern browsers only)
- Is it an animation? → WebP animated (or MP4 for >5 seconds)
- Is it for print? → TIFF or PNG
- Is it from an iPhone? → HEIC (convert to WebP for web)
Download sample files for every format at TrueFileSize Images.