WebP vs PNG vs JPG: A Complete Comparison

Most format arguments end the same way: a JPG, a PNG and a WebP of the same picture sitting in one folder at wildly different sizes, and no obvious reason why. The right choice depends far less on which format is technically superior and far more on what is inside the image and where it is going next. This is the full three-way comparison, with a table you can skim and a decision path you can actually follow.

The quick answer

If you only have thirty seconds:

• Photos for a website you control: WebP, with JPG as the fallback if anything downstream is old software rather than a browser.
• Photos you are sending to a person, a printer, a marketplace or a government form: JPG. Nothing refuses it.
• Screenshots, logos, icons, charts, anything with flat colour or text: PNG for masters and compatibility, lossless WebP when it is headed for the web.
• Anything that needs transparency: PNG or WebP. Never JPG.
• Your editing master: PNG, or better still the original camera file. Do not keep re-saving a lossy format.

The rest of this article explains why those answers hold.

The three formats in depth

JPG: the universal photo format

JPEG was standardised in 1992 and has been the default photo format of the internet ever since. It splits the image into blocks, runs a discrete cosine transform over each one, and then throws away the high-frequency information your eye is worst at noticing. That is why a JPG of a holiday photo is small, and why every save cycle degrades it a little more.

JPG is 8 bits per colour channel, has no alpha channel at all, and normally uses chroma subsampling, meaning colour information is stored at half the resolution of brightness in each direction, so a quarter as many colour samples. That trade works beautifully on photographs and badly on sharp coloured edges such as red text on white.

Its real superpower is not compression. It is that JPG opens in literally everything: every browser, every phone, every print kiosk, every ancient bit of enterprise software.

PNG: lossless, transparent, honest

PNG arrived in 1996 as a patent-free replacement for GIF and it is lossless. Compress a PNG, decompress it, and you get back the exact pixels you started with, because the format uses per-row prediction filters followed by DEFLATE compression rather than discarding anything.

PNG comes in two practical flavours that people constantly confuse:

• Palette PNG stores up to 256 chosen colours in a lookup table. Tiny files, ideal for simple icons and flat graphics, but photographs turn blotchy.
• Truecolour PNG stores 8 or 16 bits per channel with an optional full alpha channel. This is what most editors produce, and it is why PNGs of photos are enormous.

PNG had no animation for most of its life. APNG was folded into the specification itself in the third edition published in 2025, and every major browser supports it, but plenty of other software still does not, so it is not something to rely on.

WebP: the modern all-rounder

WebP was released by Google in 2010 and has two genuinely separate compression engines under one file extension. Lossy WebP is derived from the intra-frame coding of the VP8 video codec. Lossless WebP is a different algorithm entirely, built around context modelling, colour transforms and a cache of recently used colours.

The important part is that both modes support an alpha channel. WebP is the only format here that gives you transparency and lossy photographic compression at the same time, which is genuinely useful for things like product cut-outs.

As a rough rule of thumb, lossy WebP lands around 25 to 35 percent smaller than a JPG of comparable visual quality, and lossless WebP typically comes in somewhat under an equivalent PNG, often in the region of 20 to 30 percent. Treat those as expectations rather than guarantees, because the actual figure depends heavily on the image.

WebP also supports animation, and it is capped at 8 bits per channel with a maximum of 16383 pixels in either dimension. If you need 16-bit colour depth or a gigantic canvas, PNG is still your format.

WebP vs PNG vs JPG at a glance

WebP support stopped being a practical concern once Safari added it in 2020, so every browser people actually use today handles it. The remaining gap is non-browser software: some older desktop editors, print workflows and upload forms still reject WebP, which is the single best reason to keep JPG around.

Why the file sizes come out so differently

The counterintuitive results make sense once you know what each compressor is looking for.

Lossy codecs like JPG and lossy WebP assume photographic content: smooth gradients, gentle variation, sensor noise. They work by deciding which detail can be discarded without you noticing. Give them a photograph and they do brilliantly.

PNG cannot discard anything. It finds savings by predicting each pixel from its neighbours and compressing the leftovers, which works spectacularly when large areas are identical and terribly when they are not. A photograph has almost no exactly repeating pixels because of sensor noise alone, so a PNG of a photo can easily run five to ten times the size of a good JPG of the same shot with no visible benefit.

Flip the content and the ranking flips too. A screenshot is mostly flat blocks of identical colour with hard text edges. PNG compresses that superbly. JPG handles it badly on both counts: it wastes bits trying to encode razor-sharp edges, and the result still looks smeared. This is where lossless WebP often wins outright, because its context modelling handles flat regions and repeated colours better than DEFLATE does.

So the honest answer to “which format is smallest” is that it depends on whether your image looks more like a camera photo or more like a drawing. For the deeper version, how to compress images without losing quality goes through the levers in detail.

Transparency and the white background trap

This is the single most common way people ruin an image.

JPG has no alpha channel. When you convert a transparent PNG or WebP to JPG, the transparency has to go somewhere, and it gets composited onto a solid background, almost always white. A logo designed to sit on a dark navy header turns into a logo in a white box. Soft drop shadows, which are semi-transparent rather than fully transparent, turn into grey smears against whatever fill colour was chosen.

There is no fix after the fact. Once the alpha is gone it is gone, and converting back with WebP to PNG will not bring it back, because the transparency information is no longer in the file.

What to do instead:

• Keep the transparent version as PNG or WebP and only make a JPG when you know the final background.
• If you do need a JPG, composite the image onto the correct background colour in an editor first, then convert.
• For web use, PNG to WebP keeps the alpha channel and usually shrinks the file at the same time.

Quality and the artefacts each format produces

Each format fails in its own recognisable way, and knowing the signature tells you which format was wrong for the job.

JPG produces blocking, the faint 8 by 8 grid that shows up in skies and shadows at low quality settings. It also produces ringing, sometimes called mosquito noise, which is the halo of fuzz around hard edges and text. Chroma subsampling adds colour bleeding, which is why saturated red text on white looks particularly rough. And JPG suffers generation loss: every open-and-resave cycle compounds the damage.

PNG produces no compression artefacts, because it does not compress destructively. The one artefact you can get is banding, when a gradient is reduced to a 256-colour palette and the smooth transition breaks into visible steps. Dithering hides it at the cost of a larger file.

WebP in lossy mode tends to smooth rather than block. Instead of a visible grid you get a loss of fine texture: skin pores, fabric weave and film grain soften away, and heavily compressed areas can look slightly waxy. Most people find that less objectionable than JPG blocking at the same file size, but it is a real trade. Lossless WebP, like PNG, has no artefacts at all.

Which should you choose

Work down this list and stop at the first match.

• Does it need transparency? PNG, or WebP if it is web-bound. JPG is out.
• Is it a screenshot, diagram, chart, logo or anything with text in it? PNG, or lossless WebP for the web. Avoid lossy anything.
• Is it a photo going onto your own website? WebP. Use JPG to WebP and keep the JPG as a backup. The full reasoning is in the best image format for a website in 2026.
• Is it a photo going to a person, a print service, a job application or an upload form? JPG at quality 85 to 95. Do not make them deal with WebP.
• Is it a photo for print or long-term archiving? Keep the original camera file. If you must convert, use a high-quality JPG rather than compressing twice.
• Are you combining several images into one document? Skip the format question and use image to PDF.
• Is the file simply too big? Resize before you re-compress. A 4000 pixel wide image displayed at 800 pixels wastes far more bytes than any format choice. The image resizer and image compressor handle that in the right order.

If you are working with iPhone photos, HEIC sits outside this comparison entirely and has its own trade-offs, covered in HEIC vs JPG and how to open HEIC files on Windows.

Converting between formats without regret

Three rules cover almost every mistake people make.

Always convert from the best source you have. Each lossy encode starts from whatever you feed it. Going from a pristine original to WebP once beats going original to JPG to WebP.

Lossy is one-way. Converting a JPG to PNG restores nothing. It produces a large, lossless, perfectly faithful copy of an image that has already lost detail. Do it when you need alpha support or a format a specific tool demands, never to improve quality.

Avoid round trips. Every extra hop through a lossy format costs you a little more. Pick your destination format once and convert directly.

Tinyvert covers the four directions people need most: PNG to WebP, JPG to WebP, WebP to JPG and WebP to PNG. All of them run inside your browser tab using your browser’s own image decoders and the Canvas API, so nothing is uploaded, there is no queue and no account, and the page keeps working offline once loaded. Two things to know before you start: metadata including EXIF is stripped during conversion, which is good for privacy but means you should keep originals if you need capture dates or GPS tags, and an animated WebP converts to a single still frame. The free tier handles 5 files per batch; Pro, a one-time US$9 licence, will lift that limit once checkout opens.

The formats are not really competing. JPG is the one everything accepts, PNG is the one that never lies to you, and WebP is the one that makes your pages load faster. Use each for what it is good at.