Image formats compared: JPG, PNG, WebP, AVIF, SVG and GIF

The decision in one sentence

Photos → JPG or WebP. Graphics, logos and text → PNG, WebP or SVG. Logos and icons that must scale → SVG. Animation → WebP (or GIF for maximum compatibility). That's the rule of thumb — the rest is detail.

The formats at a glance

JPG — the photo workhorse

Lossy, small, universally supported, no transparency. Ideal for photos and images with many colors and gradients. The catch: every re-save degrades quality, so export once at the end. For web photos, quality 70–85 is the sweet spot.

PNG — graphics and transparency

Lossless and transparency-capable — the standard for logos, icons, screenshots and anything with sharp edges or text. For photos, PNG produces much larger files than JPG, so it's the wrong choice there. A tip: for graphics with few colors, an indexed PNG (PNG-8) shrinks dramatically.

WebP — the modern all-rounder

WebP does both: lossy like JPG, lossless like PNG, plus transparency and animation. Files are typically 25–35% smaller than the equivalent JPG or PNG, and every current browser supports it. For new web projects, WebP is usually the best default — with a JPG/PNG fallback only where you must reach very old software.

AVIF — the smallest files

AVIF, based on the AV1 codec, is another 20–30% smaller than WebP and supports HDR and 10-bit color. The trade-offs: slow encoding and uneven tool support. Great when a framework or CDN serves it automatically with a fallback; for manual workflows, WebP is more practical.

SVG — infinitely scalable

SVG isn't pixels but a mathematical description of shapes — so it stays razor-sharp at any size, from favicon to billboard, and can be styled and recolored via CSS. Perfect for logos, icons and simple illustrations. The wrong choice for photos, which have no clean shapes to describe.

GIF — charming but outdated

GIF survives for one reason: it plays everywhere without a player and loops automatically. But it's limited to 256 colors and compresses animation poorly, so animated GIFs get huge. For your own site, animated WebP or a muted auto-play video is far smaller and better. Keep GIF for messengers and email, where universal playback matters.

The decision guide

1. Is it a photo? → JPG or WebP.
2. Does it need transparency or sharp text? → PNG, WebP or SVG.
3. Must it scale to any size (logo/icon)? → SVG.
4. Animation? → WebP for your site, GIF for maximum reach.
5. Squeezing the last kilobytes with a CDN? → AVIF with fallback.