WebP vs AVIF vs JPEG vs PNG: Which Format Should You Use?

AVIF makes the smallest files, PNG makes the most faithful ones, JPEG opens everywhere, and WebP is the sensible default most of the time. The differences that decide between them are narrower than the benchmarks suggest.

By ZyffPublished 7 min read

The short version

  • WebP is the right default for images on a web page: much smaller than JPEG, supported everywhere current, and handles both photographs and flat graphics.
  • AVIF is smaller again and worth it for large hero images, but expect compatibility friction outside browsers.
  • JPEG remains correct for anything leaving your control — email, upload forms, print shops, older software.
  • PNG is for lossless work and hard-edged graphics, not for photographs. A photo saved as PNG is typically several times larger with no visible benefit.
  • No format saves an image that is too large in pixels. Resize first, then pick a format.

Format comparisons usually turn into a compression contest, which is the least useful way to choose. AVIF wins that contest and is still the wrong pick for an email attachment; PNG loses it badly and remains the only correct answer for a screenshot of an interface. The question is not which format compresses hardest but which one matches what the image is and where it is going.

Two properties do most of the deciding. The first is whether the format is lossy or lossless: JPEG, WebP and AVIF discard detail to save bytes, while PNG reproduces every pixel exactly. The second is what opens it — JPEG and PNG are opened by everything ever built, WebP is opened by every current browser and most current software, and AVIF is opened by current browsers but still trips up older desktop applications and a surprising number of upload forms.

Everything else follows from those two. Transparency, animation, colour depth and encode speed matter, but they narrow the field rather than decide it, and the sections below take them in the order they actually come up.

The comparison, in one table

Size figures are directional rather than absolute — the gap depends heavily on the picture, and a flat graphic behaves nothing like a photograph. Treat the ordering as reliable and the percentages as rough.

JPEGPNGWebPAVIF
CompressionLossyLosslessLossy or losslessLossy or lossless
Typical size vs JPEGBaselineMuch larger for photosAbout 25-35% smallerAbout 40-50% smaller
TransparencyNoYesYesYes
AnimationNoNoYesYes
Browser supportUniversalUniversalAll current browsersAll current browsers
Outside the browserUniversalUniversalGoodPatchy
Encode costVery lowLowLowHigher
Best atPhotos going anywhereScreenshots, logos, exact reproductionAlmost everything on a web pageLarge photos where bytes matter most
The four formats at a glance

WebP: the sensible default

WebP is the format to reach for unless something specific rules it out. It compresses photographs substantially better than JPEG at matching visual quality, it supports transparency so it can replace PNG for graphics that do not need pixel-exact reproduction, it does animation, and every browser in current use displays it. That combination is why it is the default output on Zyff's compressor.

Its one real weakness is outside the browser. WebP support in desktop software, document editors and third-party upload forms is good but not universal, so a file someone needs to open in an unknown application is safer as JPEG. Inside a web page, that concern does not apply.

AVIF: smaller, with strings attached

AVIF compresses harder than WebP — often noticeably so on large photographs, and it handles smooth gradients better, with much less of the banding that shows up in skies. It also supports wide colour and high bit depth, which matters for photography work that WebP would flatten.

The costs are real though. Encoding is slower, which is a server consideration rather than a user-visible one here. Compatibility outside browsers lags: desktop image viewers, older phones, and plenty of web forms will reject or fail to display an AVIF file. And at small sizes — icons, thumbnails, anything under a few kilobytes — the format's overhead means it often loses to WebP outright.

The practical rule is to use AVIF where the file is large, the delivery is a web page you control, and the bytes are worth the friction. For a full-width hero image that is a clear yes. For a 200-pixel avatar it is not.

JPEG: still the only universal choice for photographs

JPEG is thirty years old, compresses worse than both newer formats, cannot do transparency, and remains the right answer more often than format benchmarks imply. The reason is simple: everything opens it. Every email client, every government portal, every print shop, every phone, every piece of software with an Open dialog.

So the moment an image leaves your control, JPEG is the safe format. Attachments, application forms, files handed to a client, anything printed. Its other advantage is encode speed, which is why it is still the format cameras write.

Where JPEG genuinely falls down is hard edges and flat colour. Text, screenshots and line art develop visible haloes and blocking because the compression is built around the assumption that detail is photographic. For those images, the answer is PNG.

PNG: lossless, and frequently misused

PNG reproduces every pixel exactly. That makes it correct for screenshots of interfaces, logos, line art, diagrams, anything with sharp edges and flat areas of colour, and any image that will be edited and re-saved repeatedly — because lossy formats accumulate damage each time they are re-encoded, and PNG does not.

It is also, routinely, the wrong choice. A photograph saved as PNG is often three to five times larger than the same photograph as a good-quality JPEG, with no difference a viewer could point to. Photographic content is exactly what lossless compression is bad at, because there are no repeated patterns to exploit.

One consequence of losslessness catches people out: a quality slider cannot make a PNG smaller. Zyff disables the slider for PNG output rather than quietly quantising the image, because the usual way of adding a PNG quality control is to reduce the image to a limited colour palette — which changes the picture while claiming to be lossless. If a PNG is too large, the honest options are fewer pixels or a different format.

How to choose, in practice

Work from what the image is and where it is going rather than from a benchmark.

  • Photograph on a web page you control: WebP. AVIF if it is large and bytes matter.
  • Photograph going to someone else: JPEG, quality 80 or above.
  • Screenshot, logo, diagram, or anything with text in it: PNG.
  • Graphic needing transparency on a web page: WebP. PNG if edges must be pixel-exact.
  • Image you will keep editing: PNG while working, then export to a lossy format once.
  • Favicon: ICO, which is its own format and a separate discussion.
  • Animation: WebP, or a video format if it is longer than a couple of seconds.

Serving more than one format

You do not have to choose one. HTML's picture element lets a browser pick the first format it understands, so a page can offer AVIF, fall back to WebP, and fall back again to JPEG for anything ancient. That is the arrangement large sites use, and it gets the smallest file to each visitor without excluding anyone.

It costs three encodes and three files per image, which is worth it for a template that serves millions of views and rarely worth it for a one-off. If you are only going to ship one format, ship WebP — it is the best single compromise available today.

Try it on Format Converter

Free, no signup, no watermark. Runs on Zyff’s servers, so you get the same result on a phone as on a desktop.

Open the tool

At a glance

Compressor outputWebP, JPEG, PNG, AVIF
Converter outputJPEG, PNG, WebP, AVIF, TIFF, GIF, ICO, PDF
Converter inputJPG, PNG, WebP, AVIF, HEIC/HEIF, TIFF, GIF, BMP, SVG
Lossless formatsPNG always; WebP and AVIF optionally
TransparencyPNG, WebP, AVIF
PriceFree, no account needed

Frequently asked questions

Is AVIF better than WebP?

AVIF produces smaller files at the same visual quality, typically by a further 15 to 25%, and handles gradients with less banding. WebP is better supported outside browsers, encodes faster, and usually wins at very small sizes where AVIF's overhead dominates. Use AVIF for large images on pages you control, WebP for everything else.

Should I use WebP instead of JPEG?

On a web page, yes — WebP is roughly 25 to 35% smaller at matching quality and every current browser displays it. For a file you are sending to someone else, stay with JPEG. WebP support in email clients, upload forms and desktop software is good but not universal, and a file nobody can open has no size advantage.

Why is my PNG so much bigger than the JPEG?

Because PNG is lossless and the image is a photograph. Lossless compression looks for exact repetition, and photographic detail has almost none, so there is very little to remove. JPEG discards detail the eye is unlikely to miss, which is why it can be several times smaller with no visible difference. PNG's advantage only shows on flat colour and hard edges.

Can I reduce a PNG's file size with a quality setting?

Not without changing the image. PNG has no lossy quality dial; the usual way tools add one is palette quantisation, which reduces the number of colours and is a real alteration despite being presented as compression. Zyff disables the quality slider for PNG output rather than do that silently. To shrink a PNG, reduce its dimensions or switch to WebP.

Which image format is best for a website?

WebP as a single choice, because it is much smaller than JPEG and supported by every current browser. If you can serve more than one, use a picture element offering AVIF first, WebP second and JPEG last — that gets each visitor the smallest file their browser can read without excluding anyone.

Does converting between formats lose quality?

Converting to a lossy format — JPEG, or WebP and AVIF in their default mode — discards some detail, and doing it repeatedly compounds the damage. Converting to PNG never loses anything, but it cannot recover what an earlier lossy save already removed. Always convert from the highest-quality original you have rather than from a file that has been through the process before.

Is WebP supported by all browsers?

Yes, by every browser in current use, and has been for several years. The remaining gaps are outside the browser: some desktop applications, some email clients and a good number of web upload forms still reject it. That is the reason to keep using JPEG for files you hand to other people.

Sources and further reading

More guides