Engineering · 1 min read
Image Format Cheat Sheet
A one-table cheat sheet of seven image formats — JPEG, PNG, GIF, WebP, AVIF, SVG, TIFF — comparing compression, alpha, animation, and color to pick fast.
Every time I pick an output format, I end up re-checking whether it supports transparency or can animate. So I compressed it into one table:
| Format | Compression | Alpha | Animation | Color | Best for |
|---|---|---|---|---|---|
| JPEG (.jpg/.jpeg) | lossy | ✗ | ✗ | full RGB | photos: smooth gradients, no transparency |
| PNG (.png) | lossless | ✓ | ✗ (APNG rare) | full / palette | graphics, logos, screenshots, transparency |
| GIF (.gif) | lossless, ≤256 colors | 1-bit only | ✓ | palette | simple short animations (legacy) |
| WebP (.webp) | lossy or lossless | ✓ | ✓ | full | web all-rounder: covers JPEG, PNG, and GIF |
| AVIF (.avif) | lossy or lossless | ✓ | ✓ | full + HDR | best compression, slower to encode |
| SVG (.svg) | vector (text) | ✓ | ✓ (CSS/JS) | any | icons, logos, line art: scales infinitely |
| TIFF (.tif) | lossless, multipage | ✓ | multi-page | full + 16-bit | print and archival, very large |
Rules of thumb for picking:
- Photo → JPEG (or WebP/AVIF for smaller size).
- Transparency, or sharp graphics and text → PNG (or lossless WebP).
- Needs to animate → WebP/AVIF; use GIF only if a legacy target forces it.
- A logo or icon that must scale cleanly → SVG.
The extension sets the capability boundary (alpha, animation), not the file size.
References:
Related: Pair this with lossy vs lossless drives file size and ad serving flips the format priority — or go back to the crop, resize, fill overview.