| Format | GIF | JPG | PNG | SVG |
|---|---|---|---|---|
| Generally Best for... | Graphics Images with fewer colors and hard lines and edges |
Photos Photographic imagery with lots of color, continuous tones, textures, and irregular shapes |
Graphics or Photos Images with transparency. Lossless compression. |
Vectors Geometric shapes and graphics that can scale to any size |
| Beware of... | Posterization / Halos Fewer colors can create posterization effects that degrade image quality. 1 bit transparency can leave halos on soft edges |
Compression Artifacts Compression can degrade image quality and leave visible artifacts. Re-saved JPGs lose quality each time they are saved |
Increased File SIze 8-bit or 24-bit options provide lossless compression but higher file sizes than jpg |
Poor Optimization Complex shapes may not optimize well. Vector graphics impose a clean, flat, 2D style |
| Max # of Colors | 256 (8 bit) | 16.7 million (24 bit) | 256 or 16.7 million | 16.7 million |
| Universal Browser Support | Yes | Yes | Yes (except very old browsers such as IE6) | Almost (Good support in modern browsers only) |
| Lossless Compression | Yes | No | Yes | Yes |
| Transparency | Yes | No | Yes | Yes |
| Interlacing | Yes | Yes (Progressive JPEG) | Yes | No |
| Animation | Yes | No | No (unless APNG) | Yes (via CSS Animation) |
GIF = Graphics Interchange Format
JPG = Joint Photographic Experts Group
PNG = Portable Network Graphics
SVG = Scalable Vector Graphics
Newer/Future Formats: WebP, JXR, APNG