Image formats explained
Every format is a trade-off between file size, quality, transparency and compatibility. Here is what each one is for.
PNG
PNG is a lossless raster format: every pixel is kept exactly, and it supports full transparency (alpha channel). It is the standard for logos, screenshots, icons and graphics with text or sharp edges.
JPG
JPG (also written JPEG) is the most widely supported photo format. It uses lossy compression tuned for photographs, which keeps files small, but it has no transparency.
WebP
WebP is an image format created by Google for the web. It supports lossy and lossless compression, transparency and animation, and usually makes files 25–35 % smaller than JPG or PNG at the same visual quality.
AVIF
AVIF is a modern image format based on the AV1 video codec. It compresses even better than WebP and supports transparency and HDR, and it is now common on large websites and CDNs.
HEIC
HEIC is the default photo format of iPhones and iPads. It uses HEVC (H.265) compression and stores a photo in about half the size of a JPG of the same quality.
SVG
SVG is a vector format: it describes shapes, lines and text with coordinates instead of pixels, so it stays perfectly sharp at any size. It is the standard for logos and icons on the web.
GIF
GIF is one of the oldest web formats. It is limited to 256 colours per frame and supports simple on/off transparency and animation.
TIFF
TIFF is a high-quality format used by scanners, cameras, print and publishing. It can be uncompressed or losslessly compressed and can hold several pages.
BMP
BMP is the classic uncompressed Windows bitmap format. Every pixel is stored as raw data, so quality is perfect but files are huge.
ICO
ICO is the icon format used by Windows and by website favicons. One ICO file can hold several sizes of the same icon (for example 16, 32, 48 and 256 pixels), and the system picks the best one.
Comparison table
| PNG | JPG | WebP | AVIF | SVG | |
|---|---|---|---|---|---|
| Type | Raster | Raster | Raster | Raster | Vector |
| Compression | Lossless | Lossy | Lossy or lossless | Lossy or lossless (AV1) | None (text/XML) |
| Transparency | Yes (full alpha) | No | Yes | Yes | Yes |
| Animation | No (APNG rarely used) | No | Yes | Yes | Via CSS/SMIL |
| Compatibility | Universal | Universal | All current browsers; limited in older apps | Modern browsers; limited in apps | Browsers and design tools |
| Best for | Logos, screenshots, graphics with text and anything that needs a transparent background | Photos, e-mail attachments, social media and any upload form | Fast-loading websites, online shops and blogs | Very small, high-quality images on modern websites | Logos, icons, illustrations and anything that must scale without blur |