The guide
The quick comparison is below; pick any format for a full deep-dive on its history, how it works and when to use it.
A one-line summary — tap through for the full story.
The universal photo format — everywhere, forever.
See all details →Pixel-perfect, with a real alpha channel.
See all details →The modern web default — small, sharp, supported.
See all details →The smallest files at the same quality — today.
See all details →Resolution-independent — sharp at any size.
See all details →Old, limited — but still the animation lingua franca.
See all details →The favicon container — many sizes in one file.
See all details →Raw and simple — and enormous.
See all details →What the columns mean
The “Type” column tells you how a format stores an image. Raster formats (JPEG, PNG, WebP, AVIF, GIF, BMP) are grids of coloured pixels — perfect for photographs, but they blur or block if you enlarge them past their pixel count. Vector formats (SVG) store maths — shapes and paths — so they redraw sharply at any size. Raster formats are then either lossy or lossless, explained below.
Transparency means a pixel can be partly or fully see-through, so an image can sit on any background without a solid rectangle around it. PNG, WebP, AVIF and SVG support a full “alpha channel” — smooth, anti-aliased edges. GIF and ICO support only on/off transparency (a pixel is fully visible or fully hidden). JPEG and BMP have no transparency at all, so converting a logo to JPEG fills the see-through areas with solid white.
A few image formats can hold multiple frames and play them as a short loop. GIF made animation famous; WebP and AVIF also support it and produce far smaller, higher-quality results. SVG can be animated with CSS. JPEG, PNG (in its common form), BMP and ICO are single-frame — they store exactly one still image.
The key idea
Lossy formats (JPEG, WebP, AVIF) permanently throw away detail your eye is unlikely to miss, in exchange for dramatically smaller files. A quality setting controls how much is discarded. Perfect for photographs; but push the quality too low and you see “artifacts” — blocky patches and fuzz, especially around text and sharp edges. And every time you re-save a lossy file, a little more is lost.
Lossless formats (PNG, GIF, BMP) keep every single pixel exactly as it was — you can save, edit and re-save forever with no degradation. Files are larger, but the image is pixel-perfect. This is what you want for logos, icons, screenshots, diagrams and any graphic with hard edges or text.
Why it shows on edges — It matters most on sharp edges. A photograph hides lossy compression well, so JPEG/WebP/AVIF are ideal. But a logo or a screenshot full of crisp lines will show ugly halos and blocks if saved lossy — so PNG (or lossless WebP) keeps them clean. Rule of thumb: photos → lossy; graphics, text and transparency → lossless.
Lossy (JPG, WebP, AVIF) throws away detail you mostly can’t see to shrink the file — great for photos. Lossless (PNG, BMP) keeps every pixel — great for logos, text and screenshots.
At the same visible quality: AVIF < WebP < JPG for photos. For flat graphics with few colours, WebP-lossless or PNG usually win.
WebP as your default, AVIF for the biggest images with a WebP/JPG fallback, SVG for logos and icons.