JPG, PNG, WebP or AVIF: which image format should you use?

The same picture can be a 200 KB file or a 4 MB file depending on the format it is saved in — and it can look sharp or smeared for the same reason. Choosing the format is not a matter of taste. Each one was designed for a particular kind of image, and using it for the wrong kind costs either quality or size.

Lossy and lossless

Every format falls on one side of a basic divide. Lossless formats store every pixel exactly; open and save the file a hundred times and nothing changes. Lossy formats throw away detail the eye is unlikely to notice, mostly fine variation in colour, in exchange for much smaller files. Lossy compression is wonderful for photographs and poor for sharp edges such as text, where the discarded detail shows as smudges and halos.

The formats, one by one

• JPG (JPEG) — lossy, no transparency. The universal format for photographs: every device, program and upload form accepts it. Poor for screenshots, text and logos.
• PNG — lossless, with full transparency. Ideal for screenshots, logos, diagrams and anything with text or hard edges. Large for photographs, often several times the size of a JPG.
• WebP — can be lossy or lossless, and supports transparency. Typically 25–35% smaller than JPG at the same visible quality. Every current browser displays it, though some older desktop programs and email clients still do not.
• AVIF — a newer format based on the AV1 video codec, usually smaller again than WebP and particularly good with gradients. Browsers display it; creating it is slower, and not every browser can.
• SVG — not pixels at all but drawing instructions, so it stays sharp at any size. Best for logos and icons that were drawn in a vector program.
• HEIC — the format iPhones save photos in. Efficient, but many programs and websites cannot open it, so it is usually converted to JPG for sharing.

Which one for which job

Converting never adds quality

This is the most common misunderstanding about formats. Converting a JPG to PNG does not undo the JPEG compression; the blocks and smudges are already part of the pixels, and the PNG just stores them exactly — in a much larger file. Converting a JPG to WebP or AVIF compresses it a second time, which can only lose more. The rule is simple: always convert from the best original you have, never from a copy that has already been compressed.

Transparency

Only PNG, WebP, AVIF and SVG can have transparent areas. JPG cannot, so converting a cut-out logo to JPG fills the clear areas with a solid colour — the familiar white box around a logo on a coloured page. If an image needs to sit on different backgrounds, keep it in a format with transparency.

For websites: a practical workflow

1. Keep a full-quality master of every image — the camera JPG, or a PNG export from your design tool.
2. Resize to the largest size the page will actually show it at, perhaps 1,600 pixels wide for a full-width photo.
3. Export WebP for photographs with JPG to WebP, and for graphics with PNG to WebP, which keeps transparency.
4. If you want the smallest files, also make AVIF versions with JPG to AVIF and serve them with WebP or JPG as a fallback, using the HTML picture element.

The Image Converter handles JPG, PNG and WebP in one batch, with an optional maximum width so oversized photos are scaled down in the same pass.

Logos and icons

If a logo exists as an SVG, use the SVG wherever it is accepted. Where pixels are required — social media, documents, some email clients — render it to PNG at twice the size it will be displayed with SVG to PNG, so it stays sharp on high-density screens.

What about GIF?

GIF is an old format limited to 256 colours. It survives because it animates everywhere, but for still images PNG is better in every respect, and for animation a short video or an animated WebP is usually far smaller.