WebP vs JPG vs PNG vs AVIF

Every comparison lists the same specifications and leaves you no closer to a decision. Two questions settle it, and neither is about compression ratios.

Updated 28 August 2026 · 11 min read

Most comparisons of these four formats hand you a specification sheet and walk away. Compression ratios, colour depth, chroma subsampling, a chart of browser versions — all accurate, and none of it tells you which one to pick for the file currently sitting on your desktop.

So here is the useful version. Two questions decide the format in almost every real situation, and the rest of this page is the reasoning behind them. The procedure comes first because that is the part you actually need.

The two questions that settle it

Question one: does this image need transparency? Not “would transparency be nice” — does part of the image have to show whatever sits behind it? A logo dropped onto a coloured header does. A photograph of a dog does not.

Question two: who or what has to open it? There are only two meaningful answers. Either it is being displayed by a web browser you control — your own site, your own pages, where you can see the analytics and pick a fallback — or it is being handed to someone whose software you know nothing about: an email attachment, an upload to a portal, a file for a print shop, something a colleague will open in a program that has not been updated since 2014.

Run those two answers through the following.

There is one exception worth carving out before anything else: if the image is flat colour rather than a photograph — a logo, a diagram, a screenshot with text in it, a chart — use PNG regardless of the answers above. Lossy formats are built to blur the difference between neighbouring pixels, and flat graphics are made entirely of hard edges where neighbouring pixels differ sharply. That is the one case where the lossless format is also the smaller one.

Everything below justifies those rows. If you already have your answer, the rest is optional reading.

The four formats side by side

Support figures throughout come from caniuse.com, checked on 28 August 2026, and they describe browsers displaying an image on a page. That is a narrower claim than it sounds, and it has its own section further down.

JPG: the one that always opens

JPEG was standardised in 1992 and it shows, both in the good way and the bad. It is lossy, meaning it discards information your eye is poor at noticing and keeps the rest. On a photograph — smooth gradients, soft texture, thousands of subtly different colours — that trade works remarkably well, which is why it remains the universal fallback — though iPhones have shot HEIC by default since 2017.

Its defining limitation is that it has no alpha channel. Not a weak one, not a partial one: none. A JPG cannot store transparency at all, so anything transparent in the original gets filled in, usually with white, when you save. If you have ever converted a logo and found it sitting on a white rectangle, that is why. The longer version of that problem is covered in PNG vs JPG for transparency.

Its defining strength is compatibility so complete it is barely worth discussing. Every operating system, every browser, every photo viewer, every printer driver, every job portal written by someone who left the company in 2011. When something has rejected your file and the error message tells you nothing, converting to JPG is the correct first move.

PNG: exact pixels, at a price

PNG is lossless. It reconstructs every pixel exactly as it went in, which means saving and re-saving it a hundred times damages nothing. It also carries a full alpha channel, including partial transparency, so a soft shadow fading into nothing behaves correctly rather than turning into a grey fringe.

Those two properties make it the right answer for flat-colour work. A logo with eight colours, a screenshot of a terminal, a bar chart, a line diagram — PNG stores these compactly, because its compression is built to find long runs of identical pixels, and flat graphics are made of little else. It also keeps text crisp, where a lossy format would smear a halo of artefacts around every letter.

Point it at a photograph and the same properties become a liability. A photo has almost no repeated pixels, so there is nothing for lossless compression to exploit, and PNG dutifully stores all of it. A 3 MB JPEG converted to PNG commonly lands at 15 MB or more, with no visible improvement whatsoever. If you are wondering where an unexpectedly enormous file came from, this is one of the two usual culprits — the other one is raw pixel dimensions.

WebP: the sensible default for the web

WebP is the format that removes the old compromise. It has both a lossy and a lossless mode, and it supports transparency in both. That combination means a single format covers cases that previously forced a choice between JPG and PNG: a photograph with a transparent corner, a logo that also contains a gradient photograph inside it.

On size, Google — which developed the format — publishes the claim that WebP files run roughly 25–34% smaller than comparable JPEG files at equivalent quality. That is the format author's own published figure rather than an independent measurement, and the real number for your specific image will depend on its content, but the direction is not in dispute. WebP produces smaller photographs than JPEG.

Support is no longer a serious concern for display: current browser support data puts WebP at 96.18% globally. For images served on a web page, that is a settled question. Use it.

What it does not settle is what happens once the file leaves the browser, which is the subject of the section after next.

AVIF: smaller again, slower to make

AVIF is the newest of the four and compresses better than WebP, particularly at low quality settings where JPEG and WebP both start showing blocks. It supports transparency, has lossy and lossless modes, and handles wide colour and high dynamic range in a way the older formats do not.

It costs two things. The first is encoding time. AVIF is computationally much slower to produce than JPEG or WebP — a difference you will not notice on one image and will notice sharply on four hundred. If you are batch-converting a photo library, that cost is real and it is worth weighing against the bytes saved.

The second is a slightly thinner support base. Current browser support data puts AVIF at 94.67% globally: Chrome from version 85, Firefox from 93, Safari from 16.4, and Opera from 71. Internet Explorer and Opera Mini do not support it at all. That is high enough to use on a website with a fallback in place, and not high enough to use as your only version of an image.

The practical recommendation: serve AVIF from a <picture> element with a WebP source behind it and a JPG behind that, so each visitor gets the smallest format their browser understands. If that sounds like more infrastructure than your project deserves — and for a small site it often is — use WebP alone and spend the effort elsewhere. WebP captures most of the benefit for none of the complexity.

Displaying a file is not the same as opening it

This is the distinction that catches people, and it is worth more than every compression statistic on this page.

All of those support percentages measure one specific thing: whether a browser will render the image when a web page asks it to. They say nothing about what happens when someone downloads that file to their computer and double-clicks it.

The two situations run through completely different software. Rendering happens inside the browser, using the browser's own decoders, which update every few weeks whether the user notices or not. Opening a downloaded file hands it to the operating system, which passes it to whatever program is registered for that extension — a photo viewer from 2016, a version of Photoshop bought once and never updated, an email client's preview pane, a print shop's ancient prepress workflow, the image import dialog of some in-house application nobody dares touch.

So a WebP that displays perfectly on a web page can still arrive as an unopenable file in a colleague's downloads folder. A print shop can reject it. A form can refuse it. None of that contradicts the 96.18% figure, because the figure was never measuring that.

This is the same trap that made HEIC infamous. It is a genuinely excellent format that iPhones have used since 2017, and Windows still stumbles over it constantly, which is exactly why converting HEIC to JPG is still one of the most common conversions on the internet. Technical merit does not survive contact with software that has not been updated.

What to actually do

To make the recommendation as blunt as it can reasonably be made:

Photographs going to a person: JPG at quality 85 to 90. Not because it is the best format — it plainly is not — but because it is the only one that is guaranteed to work, and a photograph that opens beats a photograph that is 30% smaller.

Photographs on your own website: WebP. If you have the tooling for a <picture> element and enough traffic that bandwidth is a line item, add AVIF in front of it.

Logos, icons, diagrams, screenshots, anything with transparency going to a person: PNG. It is lossless, it keeps edges sharp, and its files are small precisely because those images are flat.

The same graphics on your own website: WebP in lossless mode, which typically beats PNG on size while keeping the alpha channel intact.

Four rules. They cover nearly everything, and the cases they do not cover — HDR photography, medical imaging, archival masters — will announce themselves clearly and come with their own requirements.

Common questions

Is AVIF always smaller than WebP? Usually, and the gap is widest at aggressive compression settings. It is not a guarantee — small images and flat graphics sometimes come out level or slightly larger, because AVIF's container overhead is proportionally heavier on a tiny file. For photographs of any real size, expect it to win.

Should I convert my whole photo library to WebP or AVIF? No. Your library is an archive, and archives should be in formats that will still open in fifteen years without a special decoder. Keep the originals, and convert copies for whatever specific purpose needs them. The storage you would save is cheaper than the risk.

Does converting between formats lose quality? Converting to PNG does not, since it stores every pixel exactly. Converting to JPG, WebP or AVIF re-encodes the image and loses a small amount of detail, invisible at 90% quality in most photographs. What genuinely accumulates damage is converting repeatedly between lossy formats, so always start from the original rather than from the last conversion.

Why can my browser show AVIF but not create one? Because decoding and encoding are separate pieces of software, and browsers ship the decoder long before they ship an encoder that is exposed to web pages. A browser can be entirely capable of displaying a format it cannot produce. Any honest converter running in the browser will check for the encoder and disable the options it does not find.

Which format should I upload to a form that does not say? JPG for photographs, PNG for anything with text or transparency. A form that does not state its accepted formats is usually old, and old software has the narrowest tolerance. This is not the moment to be clever about compression.

Is WebP lossy or lossless? Both, depending on how it was saved — which is a real source of confusion, since two files with the same extension can behave completely differently. Lossy WebP is the one that competes with JPEG on photographs; lossless WebP is the one that competes with PNG on graphics. Most tools choose the mode for you based on the quality setting you pick.