JPEG vs PNG vs WebP vs SVG: Which Image Format When?

JPEG uses lossy compression tuned for photographs: smooth gradients compress beautifully, but sharp text and logos develop visible artefacts. Use it for photos, never for screenshots of text.

PNG is lossless with sharp edges and transparency, at the price of large files for photographic content. Use it for UI graphics, logos with transparency, and images containing text.

WebP (and AVIF where supported) beat both for web delivery — typically 25–35 percent smaller than JPEG at equal quality — with transparency and animation included. Serve them with a JPEG fallback for very old clients.

SVG is not a photo format at all: it describes shapes as code, so logos and icons stay razor-sharp at any size in a few hundred bytes. The SVG Placeholder Generator shows how expressive tiny SVGs can be.

Decision shortcut: photo → WebP/JPEG, graphic with transparency → PNG/WebP, logo or icon → SVG, animation → WebP/MP4 over GIF.