The visual internet runs on five or six image formats doing very different jobs. Some compress photographs. Some preserve every pixel. Some support transparency, animation, or vectors. The format you need depends entirely on what you're doing with the image — and half the problems people have with images come from using the wrong one.
The big divide is lossy versus lossless. JPG throws away data you probably won't notice. PNG keeps everything. WebP and AVIF try to do both, with varying degrees of browser support. Then there's SVG, which isn't pixel-based at all — it's maths. Logos, icons, and illustrations belong in SVG. Photographs belong in JPG or WebP. Screenshots and anything with sharp edges belong in PNG.
The other half of image problems is compatibility. HEIC works brilliantly on iPhones and nowhere else. WebP is perfect in browsers but your desktop apps may not open it. AVIF is the future but the future isn't evenly distributed yet. When in doubt, JPG for photos and PNG for everything else will get you through almost any situation.
| Format | Type | Transparency | Animation | Best for |
|---|---|---|---|---|
| .jpg | Lossy | No | No | Photographs |
| .png | Lossless | Yes | No | Screenshots, logos, graphics |
| .gif | Lossless (256 colours) | Yes | Yes | Simple animations |
| .webp | Both | Yes | Yes | Web images (modern browsers) |
| .avif | Both | Yes | Yes | Web images (cutting edge) |
| .svg | Vector | Yes | Yes | Icons, logos, illustrations |
| .heic | Lossy | No | No | iPhone photos |
| .tiff | Lossless | Yes | No | Print, archival |