AVIF, WebP, JPEG, PNG or SVG? Choosing Image Formats
Which format suits photos, screenshots and icons, and four habits that matter as much as the format.
By the TurantTools Dev team · Updated October 27, 2026 · 3 min read
The right format can cut an image to a fraction of its size with no visible change. A rough guide for the web in 2026:
| Format | Best for | Notes |
|---|---|---|
| AVIF | Photos | Smallest files at the same quality; slower to encode |
| WebP | Photos and graphics | Supported everywhere; a safe default |
| JPEG | Photos, as a fallback | Universal; no transparency |
| PNG | Screenshots, transparency, pixel art | Lossless, so photos get large |
| SVG | Logos, icons, illustrations | Scales to any size; tiny when simple |
Beyond the format
- Resize to the largest size it's shown at, times 2 for high-density screens, not the camera's 4000 pixels.
- Use
srcsetandsizesso phones download smaller versions. - Add
widthandheightto stop layout shift, andloading="lazy"below the fold. - Use
<picture>to offer AVIF with a WebP or JPEG fallback.