Image Format Cheat Sheet
Image format cheat sheet: extensions, MIME types, compression, transparency and animation support, and best-use cases for PNG, JPEG, WebP, AVIF, GIF, SVG, ICO and HEIC.
| Format | Ext / MIME | Compression | Transparent | Animation | Best use |
|---|---|---|---|---|---|
| PNG | .png · image/png | Lossless | Yes | No | Icons, screenshots, anything needing transparency or crisp text |
| JPEG | .jpg/.jpeg · image/jpeg | Lossy | No | No | Photos and color-rich images (smaller size) |
| WebP | .webp · image/webp | Lossy + lossless | Yes | No | Web images; replaces PNG/JPEG to save bandwidth |
| AVIF | .avif · image/avif | Lossy + lossless | Yes | No | Next-gen web images; better compression than WebP |
| GIF | .gif · image/gif | Lossless (palette) | 1-bit | Yes | Simple animations, memes |
| APNG | .apng · image/apng | Lossless | Yes | Yes | High-quality animation; GIF replacement |
| BMP | .bmp · image/bmp | Uncompressed | No | No | Windows bitmaps, lossless masters |
| TIFF | .tif/.tiff · image/tiff | Lossless | Yes | No | Print prep, professional photography archives |
| ICO | .ico · image/x-icon | Lossless | Yes | No | Website favicons (multi-size) |
| SVG | .svg · image/svg+xml | Vector | Yes | Yes (CSS/SMIL) | Icons, logos, scalable illustrations |
| HEIC | .heic · image/heic | Lossy | Yes | No | iPhone photos (efficient compression) |
| JPEG XL | .jxl · image/jxl | Lossy + lossless | Yes | Yes | Experimental next-gen format |
Frequently Asked Questions
When should I use PNG vs JPEG?
Use PNG (lossless, supports transparency) for icons, screenshots, and graphics with sharp edges or text. Use JPEG (lossy) for photos and color-rich images where smaller size matters and transparency is not needed.
What is the difference between WebP and AVIF?
Both support lossy and lossless compression and transparency. AVIF compresses better with higher quality but encodes slower and has slightly weaker legacy-browser support; WebP is more widely compatible and faster to decode. Prefer WebP/AVIF over legacy JPEG and PNG for new projects.
Which format should I use for a transparent background?
PNG, WebP, AVIF, GIF (1-bit only) and SVG all support transparency; JPEG does not and fills transparency with white. For logos, stickers and assets with an alpha channel, PNG or WebP are the safe choices.
When should I use SVG?
Use SVG for icons, logos and illustrations: it scales without blur, stays small, and can be recolored and animated with CSS. Photos are bitmaps and belong in PNG/JPEG/WebP, not SVG.