Image Formats Cheat Sheet — Complete Comparison Table

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 |

Compare formats with a reproducible source image

Image size comparisons are meaningful only when they identify the source image, dimensions, encoder versions, options, color profile, chroma subsampling, and quality target. Different quality numbers across codecs are not equivalent by themselves.

Create each variant from the same lossless source and record the commands:

magick source.png -quality 85 comparison.jpg
magick source.png -quality 80 comparison.webp
magick source.png -quality 50 comparison.avif
magick source.png comparison.png

wc -c comparison.jpg comparison.webp comparison.avif comparison.png

Compare visual quality as well as bytes. For automated experiments, record a metric such as SSIM together with visual inspection; do not present one image's result as a universal percentage.

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

1. Is it a vector graphic (logo, icon)? → SVG
2. Does it need transparency? → WebP or PNG
3. Is it a photograph? → WebP (AVIF if modern browsers only)
4. Is it an animation? → WebP animated (or MP4 for >5 seconds)
5. Is it for print? → TIFF or PNG
6. Is it from an iPhone? → HEIC (convert to WebP for web)

Download sample files for every format at TrueFileSize Images.