PNG, JPG, WebP or AVIF: A decision tree

Which image format should you use? Ask one question first: does the image have sharp edges, readable text, or flat blocks of one colour, or is it a photograph with soft gradients? That single answer settles most of the decision. Hard edges and text want PNG. Photographs want WebP or AVIF. The rest of this post is the branches for the cases where the answer is less obvious, plus the tradeoff you are actually accepting each time.

TL;DR: Photographs go WebP or AVIF (roughly 25 to 50 percent smaller than JPG at similar quality). Anything with sharp edges, text, or transparency goes PNG (lossless, so those edges stay crisp). JPG only when something downstream cannot read anything newer. AVIF is the smallest but has the youngest browser support.

The one question, and why it works

Compression splits into two camps, and which camp your image belongs in decides almost everything.

Lossy formats (JPG, WebP, AVIF) throw away detail your eye barely notices so the file gets small. That is great for a photograph, where the data is already messy and a little loss disappears. It is bad for a screenshot of crisp text, where the loss shows up as a smudge around every letter.

Lossless formats (PNG) keep every pixel exactly. Perfect for flat colour, hard edges, and transparency. Wasteful for a photo, because “keep every pixel” on a busy image means a big file.

So the useful question is never “which format is best.” It is “what am I looking at.” A photo has soft gradients and no hard text, and it can survive lossy compression. A screenshot, a logo, a chart, or anything with letters has edges that lossy compression wrecks, so it wants lossless.

Run the test yourself

You do not have to take this on faith. Take a screenshot with black text on a white background. Save one copy as PNG and one as JPG at medium quality. Open both at 100 percent and look at the edges of the letters. The PNG letters are clean. The JPG letters have a faint grey fuzz around them, little blocks of noise that lossy compression leaves behind wherever colour changes sharply. Now do the reverse with a photo: save it as PNG and as JPG, then check the file sizes. The PNG is often three to five times bigger for no visible gain. That is the whole rule in two exports.

The decision tree

Is it a photograph?

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

Use AVIF. It gives the smallest file at a given quality and it 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 fallback everything reads. The tradeoff is support: AVIF reads in every modern browser but is the newest of the four, so a stray old client may choke. WebP is the safe middle. JPG is the floor.

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 colour.

Use PNG. This is the case the one question is built for. JPG turns black text on white into a grey haze of artifacts, because lossy compression cannot hold a hard edge. PNG keeps the letters crisp and compresses those flat backgrounds well. If the screenshot is heavy and you control the viewer, WebP in its lossless mode does the same job smaller. PNG costs you file size on a busy screenshot, but legibility wins.

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

Few colours, 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 simple geometry and you have a vector source, SVG beats all of these, but that is a different file entirely, not something you get by converting a raster 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 coloured section, a sticker.

Use PNG or WebP, never JPG. JPG has no alpha channel, so transparency collapses to a solid fill, almost always white. The mistake we see most often in this whole topic is exactly this: someone saves a cutout as JPG, drops it on a coloured page, and gets an ugly white box around it. It looks like a bug, but it is just the format doing what JPG does. AVIF supports transparency too and is worth it when 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 the quality drop becomes obvious. Avoid PNG when you are fighting a size cap unless the image is flat colour, because lossless on a photo blows straight past the limit. The tradeoff here is generation loss, which is covered below.

Does it move?

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

Use WebP for animation. Animated WebP is much smaller and much higher quality than an animated GIF, with full colour instead of GIF’s 256-colour ceiling. AVIF can animate too and goes smaller still, with support a bit narrower. For anything longer than a couple of seconds the honest answer is a real video file (MP4 or WebM), which is smaller again. But for a true short loop, animated WebP is the pick. There is no tradeoff against GIF 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 colour, text, transparency	Photos, graphics, animation	Photos, smallest size
Transparency	No	Yes	Yes	Yes
Animation	No	No	Yes	Yes
Typical photo file size	Baseline	Much larger	Around 25 to 35% smaller	Around 40 to 50% smaller
Browser support	Universal	Universal	Very broad	Broad, newest

The size figures are rough and depend on the image, so treat them as ballpark, not a promise. But the order holds: on photos, AVIF beats WebP beats JPG, and PNG is not in that race because it is solving the other problem.

Generation loss, the trap nobody warns you about

Every time you save a lossy image (JPG, WebP, or AVIF in lossy mode), it discards a little more detail. Edit a JPG, save, reopen, edit, save again, and you are now compressing data that was already compressed. Artifacts pile up. The image goes soft and blotchy after a few rounds.

Two habits keep you out of that hole. First, keep an original in a lossless format (PNG, or the camera raw) as your master, and export lossy copies from it instead of editing the lossy copy over and over. Second, 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 in place and adds a fresh round on top.

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.