JPG vs PNG vs WebP: Which Image Format Should You Actually Use?
A designer sends a client a logo. It looks perfect on their screen. In the client's Outlook inbox it is a grey box with a torn-page icon, and the client's first impression of the work is that it is broken.
That is the whole problem with image formats in one scene. JPG vs PNG vs WebP is not a ranking with a winner at the top — it is a question about where the file is going to end up. WebP genuinely produces smaller files than both of the others. It is also the one that breaks, and it breaks in the places that matter most for business: email, print, and government upload portals.
This guide gives you the real numbers, then the four situations where the modern answer is the wrong one.
JPG vs PNG vs WebP: The Short Version
| JPG / JPEG | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy | Lossless | Both |
| Transparency | No | Yes | Yes |
| Animation | No | No | Yes |
| Best for | Photographs | Logos, screenshots, flat graphics | Anything shown in a browser |
| Typical size, same photo | Baseline | 3–6× larger | 25–34% smaller than JPG |
| Browser support | Universal | Universal | ~97% globally |
| Works in email | Yes | Yes | Unreliable |
| Accepted by upload portals | Almost always | Often | Rarely |
| Print / CMYK | Yes | Yes | No |
If you want a single rule that will be right most of the time: WebP for your website, JPG for anything you send or upload, PNG for anything that needs a transparent background or crisp text.
The rest of this is when that rule bends.
What Each Format Is Actually Doing
The differences are not arbitrary. Each format throws away different things.
JPG discards detail your eye is bad at noticing
JPEG compression breaks a photo into 8×8 pixel blocks and drops the fine variations within each block. Your eye is far more sensitive to brightness than to colour, so JPEG keeps luminance detail and quietly discards colour detail. On a photograph the result is invisible at quality 80–90 and produces a file a fraction of the original size.
On flat graphics it falls apart. Sharp edges — text, a logo outline, a screenshot border — become fuzzy halos, because a hard edge is exactly the kind of high-frequency detail JPEG is designed to throw away.
The other JPEG trap is generation loss. Every time you open a JPG, edit it and save it again, you re-compress an already-compressed image. Do that five or six times and the artefacts stack visibly. Edit from an original, export to JPG once.
PNG keeps every pixel exactly
PNG is lossless. Decompress a PNG and you get back the identical pixels you put in, which is why it is the right format for a screenshot, a chart, a logo, or anything containing text.
It also supports a full alpha channel — 256 levels of transparency, so edges anti-alias smoothly against any background colour rather than showing a jagged fringe.
The cost is size. A 12-megapixel photograph saved as PNG will typically be three to six times larger than the same photo as a good-quality JPG, because there is no perceptual shortcut being taken. PNG for photos is the single most common cause of a 15 MB image on a web page.
WebP does both, better, in a narrower world
WebP supports lossy and lossless compression in one format, plus transparency and animation. Google's compression study measured lossy WebP at 25–34% smaller than JPEG at an equivalent SSIM quality score, and lossless WebP at 26% smaller than PNG.
Those savings are real and they compound across a page. A product listing with forty images drops from 4 MB to under 3 MB with no visible change, which is the kind of thing that moves a Largest Contentful Paint score.
The catch is that WebP was designed for the web and remains, in practice, a web-only format.
The Four Places WebP Is the Wrong Choice
We would rather you know these now than find out from a client.
1. Email. Outlook on Windows renders mail through Microsoft Word's engine, which never added WebP support, so a WebP image appears as a broken box. Gmail's support is partial and in some paths it converts WebP to JPEG before delivery, which silently destroys transparency. Can I Email's compatibility table is the reference worth bookmarking. Use JPG or PNG in email, without exception.
2. Upload portals. Passport applications, visa forms, university admissions, job boards, banking KYC — the overwhelming majority specify JPEG, and a fair number will not accept anything else. India's Passport Seva portal is JPEG-only, and it is representative rather than unusual. Our passport photo size guide covers the per-country specifics.
3. Print. WebP has no CMYK support and no dependable colour profile embedding — it is an sRGB format. Send a WebP to a commercial printer and the best case is that they convert it themselves and the colours shift. Print wants TIFF, PDF, or high-quality JPEG.
4. Documents and older software. Microsoft Office only gained native WebP support in Microsoft 365 version 2402, and the browser-based versions of Word and PowerPoint still lag behind the desktop apps. Anyone on an older Office build, or on desktop software from before roughly 2021, will not be able to open your file.
One more limit worth knowing: WebP stores image dimensions in 14-bit fields, so the format caps at 16,383 × 16,383 pixels. That is far beyond normal web use, but it will reject a large panorama or a stitched scan.
How to Choose in Practice
Work down this list. The first match is your answer.
- Is it going in an email? JPG for photos, PNG for logos and graphics. Nothing else.
- Is it being uploaded to a form or portal? JPG, and check the file size limit before you check anything else.
- Is it going to print? JPG at high quality, or ask the printer what they want. Not WebP.
- Does it need a transparent background outside your own website? PNG.
- Is it a photo on your own website? WebP, with a JPG fallback if your platform supports one.
- Is it a logo, icon, screenshot or chart on your own website? Lossless WebP if you can, PNG if you cannot.
- Are you unsure where it will end up? JPG for photos, PNG for graphics. Both will work everywhere.
The pattern underneath: the more control you have over where the file is displayed, the more aggressive you can be about format. Your own website is the one place you fully control.
Converting between them
Format conversion is not the same as compression, and mixing them up wastes quality.
Converting a JPG to lossy WebP re-encodes an image that has already lost data — you keep the original artefacts and add a second round. It is usually still worth it for web delivery, but convert from the original file where you have one. Converting a PNG photograph to WebP or JPG is nearly always a straight win. Converting a PNG logo to JPG is the one to avoid: you lose transparency and gain edge artefacts on exactly the content JPEG handles worst.
You can do all of this in the browser with our compressor, which converts between formats while you set a target quality, and the resizer if the dimensions need changing too. Both run entirely on your device — the file never uploads anywhere, which matters more than it sounds like it should for anything containing an ID document, a contract or an unreleased product shot. We have written about why client-side processing is the right default for file tools over at NoCubical.
When you need to hit a specific kilobyte number rather than a quality setting, that is a different job, and our guide to landing inside a file-size limit covers it properly.
What About AVIF?
AVIF is the next format along, and the honest answer is: not yet, unless you have a pipeline.
AVIF produces files roughly 30–50% smaller than WebP at comparable quality, with better colour depth and HDR handling. But global browser support sits around 92–93% against WebP's 97%-plus, and AVIF encoding is dramatically slower — noticeable even on a single image, painful across a batch.
That makes AVIF a good progressive enhancement: serve it inside a <picture> element with a WebP or JPG fallback, and browsers that support it get the smaller file. It makes a poor sole format. If you are managing images by hand rather than running them through a build step or a CDN, WebP is the sensible place to stop.
Frequently Asked Questions
Is WebP always better than JPG and PNG?
For images displayed in a web browser, usually yes. Google's own compression study puts WebP at 25-34% smaller than JPEG at matching SSIM quality, and 26% smaller than PNG for lossless images. Outside the browser it is often worse, because WebP is not accepted by most email clients, most print workflows, and a lot of government and job portals that only take JPEG. The format is not better in the abstract; it is better in the place it was designed for.
Which format should I use for a logo with a transparent background?
PNG, unless you control where it will be displayed. PNG transparency works everywhere - websites, email, Word, print, decades-old software. WebP supports transparency too and the file will be smaller, but Gmail converts WebP images to JPEG in some paths and JPEG has no transparency, so your background turns white. If the logo is only ever served from your own website, WebP is fine. If anyone will ever email it or drop it into a document, send PNG.
Does converting JPG to WebP lose quality?
Yes, if you convert to lossy WebP - you are re-encoding an image that has already been compressed once, so you inherit the JPEG artefacts and add new ones. The size saving is usually worth it for web display, but do the conversion from the original file rather than from an already-compressed copy where you can. Converting to lossless WebP avoids new quality loss but gives you a much larger file, which defeats the point for photos.
Why does my WebP image not open or show as a broken box?
Almost always the software, not the file. Outlook on Windows renders email through Microsoft Word's engine, which never adopted WebP, so a WebP in an email shows as a broken image. Office desktop apps only gained WebP support in Microsoft 365 version 2402 and the browser versions of Word and PowerPoint still lag. Older photo software, print RIPs and many upload portals reject it outright. Converting the file to JPG or PNG fixes it in every case.
Should I use AVIF instead of WebP?
Only if you can serve both. AVIF files are roughly 30-50% smaller than WebP at similar quality, but AVIF sits near 92-93% global browser support against WebP's 97%+, and AVIF encoding is dramatically slower. That combination makes AVIF a good progressive enhancement inside a picture element with a WebP or JPEG fallback, and a bad choice as your only format. If you are hand-managing images rather than running an image pipeline, WebP is the pragmatic stopping point.