JPG, PNG, WEBP or AVIF: which to choose and when

The one thing to understand: lossy or lossless

A lossy format (JPG, WEBP, AVIF) throws away information the eye rarely notices so the file weighs less. A lossless one (PNG) keeps everything, weighs more, and can be re-edited without degrading.

Almost the whole decision follows from that: if the image is a photograph, the loss goes unnoticed and the saving is huge. If it has text, fine lines or flat colour areas, the loss shows badly and smudges appear around the letters.

JPG

The most compatible format in the world: absolutely everything opens it. It is the safe choice for photographs. It has no transparency, so a cut-out logo comes out on a white background.

PNG

Lossless and with transparency. The right pick for logos, icons, screenshots and any image containing text. The downside is weight: a photograph as PNG can take ten times more space than as JPG without looking any better.

WEBP

The current sweet spot. It weighs 25–35% less than JPG at the same quality, supports transparency, and every modern browser handles it. For a website it is almost always the best choice.

AVIF

The most efficient there is: up to 50% lighter than JPG. In exchange it takes longer to encode and some older desktop programs still cannot open it. Worth it when page load speed is the priority.

Quick decision table

• Photo to email or send on WhatsApp → JPG at quality 75.
• Photo for a website → WEBP, or AVIF if speed really matters.
• Logo with a transparent background → PNG, or WEBP if you want it lighter.
• Screenshot with text → PNG. As JPG the text comes out dirty.
• Image for printing → PNG or TIFF, never an already-recompressed JPG.
• Website icon → ICO generated from a square PNG.