Image formats for the web: which one to pick
JPEG, PNG, WebP, SVG: which image format to use depending on the content, for a fast and crisp site.
Quick comparison
| Format | Compression | Transparency | Best for |
|---|---|---|---|
| JPEG | Lossy | No | Photos, complex gradients |
| PNG | Lossless | Yes | Logos, screenshots, icons |
| WebP | Lossy or lossless | Yes | Replaces JPEG/PNG, smaller files |
| SVG | Vector (no pixels) | Yes | Logos, icons, simple illustrations |
| AVIF | Lossy or lossless | Yes | The most compact, recent browser support |
SVG is the only vector format in this list: it scales infinitely with no loss of sharpness, unlike "raster" (pixel-based) formats like JPEG, PNG or WebP.
What to use when
- Realistic photo → JPEG or WebP (lossy compression suits natural gradients).
- Logo or icon with simple shapes → SVG (crisp at any size, tiny file).
- Screenshot with sharp text → PNG (lossless, avoids blurring around text).
- Image with transparency → PNG, WebP or SVG (never JPEG, which has no transparency support).
File size and performance
Image weight is often the number one cause of a slow website. WebP and AVIF cut file size by 25 to 50% compared with an equivalent JPEG/PNG, at comparable visual quality.
Resolution or compression?
Two distinct levers to shrink an image: reducing its pixel dimensions (resolution) OR increasing compression at the same dimensions (quality). Combining both gives the best result.
Adaptive loading with <picture>
<picture> <source srcset="photo.avif" type="image/avif"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Description"> </picture>
The browser automatically picks the first format it can render, with a classic <img> as a fallback — lets you benefit from AVIF/WebP without breaking display on an older browser.
GIF vs. a short video
An animated GIF is often much heavier than a short video of equivalent quality (MP4/WebM) — for a looping animation, a <video autoplay loop muted> tag is almost always better for both file size and sharpness.
Thanks for the feedback!