Image formats explained: JPG, PNG, WebP, AVIF and GIF

The one distinction that explains everything else

Image formats divide into lossy and lossless. A lossy format — JPG, WebP in its usual mode, AVIF — permanently discards detail your eye is unlikely to miss, and gets small files as a result. A lossless format — PNG, BMP, TIFF — reconstructs every original pixel exactly, and pays for that in size.

The second distinction is transparency. PNG, WebP, AVIF and GIF can record that a pixel is see-through. JPG cannot, at all. Almost every format decision you will ever make follows from those two facts.

JPG (JPEG)

Thirty years old, understood by every device ever made, and still the right answer whenever compatibility outranks efficiency: email attachments, print shops, upload forms, older software.

It compresses photographs extremely well and flat graphics badly. Around hard edges — text, logos, screenshots — it produces visible haloing. It also degrades every time you re-save, so avoid repeated edit-and-save cycles on a JPG master.

PNG

Lossless, with a full alpha channel. That makes it the correct choice for logos, icons, diagrams, screenshots containing text, and anything that must sit on a coloured background.

Used for a photograph it is simply the wrong tool: expect a file five to ten times larger than the JPG equivalent with no visible benefit.

WebP

WebP does both jobs. It has a lossy mode that beats JPG on size at comparable quality, a lossless mode that usually beats PNG, transparency, and animation. Support is universal across current browsers.

Its weakness is outside the browser: some desktop editors, older Office builds and various upload forms still reject it, which is why converting WebP back to JPG remains a common need.

AVIF

The most efficient of the group — commonly 20–50% smaller than WebP at matched quality, with wide colour and HDR support. Browser support is now broad, but encoding is slow and support in ordinary desktop applications is patchy.

Sensible when you control delivery and can serve a JPG fallback. Less sensible as the format you archive your own files in.

GIF

Capped at 256 colours with single-colour transparency, which is why GIFs band on gradients and show fringed edges. For animation, an MP4 or animated WebP is smaller and sharper in every realistic case.

It survives on cultural momentum and on platforms that accept nothing else.

A short decision list

When you are not sure, this ordering resolves most cases:

• Photograph on a website you control — WebP, with a JPG fallback if you need one.
• Photograph going to anyone else — JPG at quality 82–90.
• Logo, icon, diagram, screenshot with text — PNG.
• Needs transparency and must be small — WebP.
• Archiving your own originals — keep the camera original; do not re-encode.