Skip to content

Image Formats: JPEG, PNG, WebP, AVIF Explained

Four lanes, one decision: JPEG for photos, PNG for transparency and pixel-perfection, WebP for both at ~30% less, AVIF smallest of all at a slower encode. Underneath them all sits one axis — lossy versus lossless.

Animated diagrams · 2 flows

Compare all 2

Sort by any column to find the right fit. Click a name to open its details.

Four Lanes, One DecisionImage → format choice → payloadNo — decided at build timeEncode: AVIF slowest; decode: all fastHTTP with content negotiationA picture element, at mostCutting image weight without visible loss
Perfect or SmallPixels in → exact or approximate copy outNoLossy decodes as fast as losslessAny image codecThe one axis under every formatPicking a mode once, per content type