PNG, JPG, WebP or AVIF: A decision tree

Most format guides answer “which image format should I use” with a spec table and a shrug. You read about color depth and chroma subsampling and come away knowing less than when you started. This is the opposite. Find your image below, follow the branch, ship the format at the end. One recommendation per case, plus the tradeoff you are actually accepting.

TL;DR: Photos go AVIF or WebP. Flat-color graphics and anything needing transparency go PNG, or WebP when size matters. JPG only when something downstream cannot read anything newer. AVIF is the smallest but has the youngest support.

Start with what the image is

Compression splits into two camps, and the camp decides almost everything.

Lossy formats (JPG, WebP, AVIF) throw away detail your eye barely notices to make files small. Great for photographs, where the data is messy and a little loss is invisible. Terrible for a screenshot of crisp text, where the loss shows up as smudge around every letter.

Lossless formats (PNG) keep every pixel exactly. Perfect for flat color, sharp edges, and transparency. Wasteful for photos, where “keep every pixel” means a giant file.

So the first question is never “which format is best.” It is “what am I looking at.”

The decision tree

Is it a photograph?

A camera photo, a product shot, a textured render. Lots of color, soft gradients, no hard text.

Use AVIF. It produces the smallest file at a given quality and handles skies and skin gradients without the blocky banding older formats show. If you cannot guarantee the viewer’s browser or app is current, export WebP instead, or keep a JPG as the universal fallback. The tradeoff is support: AVIF reads everywhere modern but is the newest of the four, so a stray old client may choke. WebP is the safe middle. JPG is the floor that everything reads.

Whatever you pick here, do not use PNG. A PNG photo is often three to five times larger than the same image as JPG for no visible benefit.

Is it a screenshot of a UI, text, or a diagram?

Sharp edges, readable text, large areas of one color.

Use PNG. Lossy compression mangles hard edges, so JPG turns black text on white into a gray haze of artifacts. PNG keeps the letters crisp and compresses flat backgrounds well. If the screenshot is heavy and you control the viewer, WebP in its lossless mode does the same job smaller. The tradeoff for PNG is file size on busy screenshots, but legibility wins here.

Is it a logo, icon, or flat-color graphic?

Few colors, solid fills, maybe a transparent background.

Use PNG, or WebP when you want it smaller and you control where it loads. Both keep edges clean and both support transparency. If the graphic is genuinely simple geometry and you can use vectors, SVG beats all of these, but that is a different file entirely and not something you convert a raster into after the fact. The tradeoff: PNG is universally supported and slightly larger, WebP is smaller and slightly less universal.

Does it need a transparent background?

A cutout product, a logo over a colored section, a sticker.

Use PNG or WebP, never JPG. JPG has no alpha channel at all, so transparency collapses to a solid fill, almost always white. This is the single most common format mistake: someone saves a cutout as JPG and gets a white box around it. AVIF supports transparency too and is worth it if the image is also photographic. For flat graphics with transparency, PNG is the default and WebP is the smaller option.

Is there a hard upload size limit?

A form that rejects anything over a few megabytes, an email attachment cap, a marketplace that caps listing photos.

Use AVIF if the destination accepts it, otherwise WebP, otherwise JPG at a lower quality setting. These three let you trade a little visible quality for a lot less weight, and AVIF gives you the most room before quality drops become obvious. Avoid PNG when fighting a size cap unless the image is flat color, because lossless on a photo blows straight past the limit. The tradeoff is generation loss, covered below.

Does it move?

A short loop, a reaction clip, an animated logo.

Use WebP for animation. Animated WebP is far smaller and far higher quality than the old animated GIF, with full color instead of GIF’s 256-color ceiling. AVIF can animate too and goes smaller still, with support a bit narrower. The honest answer for anything longer than a couple of seconds is an actual video file (MP4 or WebM), which is smaller again, but for a true short loop animated WebP is the pick. The tradeoff against GIF is none worth mentioning; GIF only survives out of habit.

The comparison table

	JPG	PNG	WebP	AVIF
Compression	Lossy	Lossless	Both	Both
Best for	Photos (fallback)	Flat color, text, transparency	Photos, graphics, animation	Photos, smallest size
Transparency	No	Yes	Yes	Yes
Animation	No	No	Yes	Yes
Relative file size (photo)	Baseline	Much larger	~25-35% smaller	~50% smaller
Browser support	Universal	Universal	Very broad	Broad, newest

The file-size numbers are rough and depend on the image, but the order holds: AVIF beats WebP beats JPG on photos, and PNG is not in that race because it is solving a different problem.

Generation loss, the trap nobody warns you about

Every time you save a lossy image (JPG, WebP, or AVIF in lossy mode), it throws away a little more. Edit a JPG, save, reopen, edit, save again, and you are compressing already-compressed data. Artifacts pile up. The image gets soft and blotchy over a few rounds.

Two rules keep you safe. Keep an original in a lossless format (PNG, or the camera raw) as your master, and export lossy copies from it rather than editing the lossy copy over and over. And convert from your highest-quality source, not from a copy that has already been squeezed. Converting a tired JPG to AVIF does not undo the damage the JPG already did; it just freezes it.

So, which one

• Photo for a modern site: AVIF, with WebP or JPG as the fallback.
• Photo you are emailing or handing off blind: JPG.
• Screenshot, diagram, or text image: PNG.
• Logo or flat graphic, transparency or not: PNG, or WebP to save weight.
• Anything fighting a size limit: AVIF or WebP at a sensible quality.
• A short loop: WebP, or a real video for anything longer.

When the format you have is not the format you need, you can convert between all four in your browser at image.hivly.net. Nothing uploads, there is no sign-up, and the files never leave your machine, which matters when the image is a private screenshot or an unreleased product shot. Convert a heavy PNG photo to AVIF, swap a transparent JPG mistake back to PNG, or batch a folder of camera JPGs down to WebP before they hit an upload cap, all at image.hivly.net.