Lossy vs lossless: the one idea that matters
Here is a fact that surprises most people the first time they see it: the same photograph can be a 2 MB PNG and a 150 KB WebP, and on screen the two look identical. Same pixels, same colors, roughly one-tenth the weight. The difference is not magic and not quality — it is how each format decides which information to keep and which to throw away. Once you understand that one idea, every format choice gets straightforward.
The core split is lossy versus lossless. Lossy compression, which JPEG and one mode of WebP use, throws away image data the human eye is unlikely to miss — subtle color variations, fine noise — and the file gets dramatically smaller. Lossless compression, which PNG and the other WebP mode use, keeps every single pixel exactly as it was, and the file stays larger. Neither is “better” in general. They are answers to different questions: how small can this be, versus how exact must this be.
JPEG is the old workhorse, and it is still excellent at exactly one job: photographs. A JPEG takes a photo with millions of smooth color gradients — skies, skin, scenery — and squeezes it down by discarding fine detail your eye glosses over anyway. At a quality setting around 75 to 85, a typical JPEG looks indistinguishable from the original at a fraction of the size. That is why every camera and phone on earth speaks JPEG.
JPEG: the photograph specialist
JPEG's weaknesses show up the moment you leave photography. It has no transparency at all — no alpha channel, so every JPEG is a full rectangle. It mangles sharp edges: text, logos, line drawings, and flat-color graphics come out with smudgy artifacts around the edges and muddy flat areas. If you have ever seen a company logo on a website with a faint dirty halo around the letters, you were looking at a JPEG doing a job it was never meant to do.
PNG is JPEG's opposite in temperament. It is lossless, so every pixel survives exactly, and it supports full transparency, which makes it the natural home for logos, icons, screenshots, diagrams, and any graphic with text or sharp lines. The price is file size: that same photograph that JPEG shrinks to a few hundred kilobytes can easily be several megabytes as a PNG, because PNG refuses to throw anything away. PNG is a perfectionist, and perfectionists are expensive to host.
WebP is the format Google built to end the argument. It does lossy compression like JPEG and lossless compression like PNG, in one format, plus transparency in both modes, plus animation. In practice a lossy WebP is typically around 25 to 35 percent smaller than a comparable-quality JPEG, and a lossless WebP is typically around a quarter smaller than the equivalent PNG. It is not a small improvement — it is the rare format that is better at both jobs.
WebP: built to end the argument
Let us make this concrete with a worked example. Take a typical 12-megapixel phone photo, straight off the camera. As a high-quality JPEG it might weigh roughly 3 to 5 MB. Export it as WebP at visually equivalent quality and you are typically looking at roughly 1 to 2 MB. Now take a 1080p screenshot of a settings page full of text: as PNG it might be around 400 to 600 KB; as lossless WebP, often 250 to 400 KB, pixel-identical. These are rough figures — real numbers depend on the image — but the pattern holds across nearly everything: WebP wins on size at equal quality.
Transparency is where the decision gets interesting. PNG gives you perfect, lossless transparency — ideal for a logo that must sit on any background color. WebP also gives you transparency, and in its lossless mode it is just as exact, at a smaller file size. JPEG simply cannot do it. So the transparency question is never “JPEG or something else” — it is “PNG or WebP,” and WebP usually wins unless you need compatibility with something ancient.
Animation deserves a quick word because GIF still haunts the web. GIFs are limited to 256 colors and compress badly, which is why a ten-second GIF can weigh 15 MB. WebP supports animation with millions of colors and far better compression — the same clip is often a fraction of the size. If you are still exporting animated GIFs for the web, switching to animated WebP is one of the highest-value format changes you can make.
Browser support is a solved problem
Browser support used to be WebP's weak spot, and it is worth knowing the history so old advice does not confuse you. A few years ago you needed fallback images for older Safari. That era is over: every current browser — Chrome, Firefox, Safari, Edge — has supported WebP for years now. Unless your audience is on truly ancient devices, you can serve WebP directly with no fallback dance — MDN's image file type and format guide tracks the current support picture. This is the single fact that makes the rest of this guide actionable.
Here is the decision flow, in plain order. First question: is it a photograph or photorealistic image? If yes, use lossy WebP at a quality that looks identical to the original — start around 80 and compare. JPEG is your fallback only if some specific tool in your pipeline cannot handle WebP. Second question: does it need transparency? Use WebP lossless, or PNG if the destination demands it. Third: is it a graphic with sharp text or lines and no transparency? WebP lossless or PNG. Fourth: is it animated? WebP, not GIF.
Quality settings deserve a concrete rule of thumb because this is where people either bloat their pages or wreck their images. For lossy WebP or JPEG photos, a quality of 75 to 85 is the sweet spot for web use — below that, banding and blockiness creep into skies and shadows; above that, file size climbs fast for improvements almost nobody can see. The right way to find your number: export at 80, zoom to 100 percent, and look at the smooth gradients. If they are clean, try 75.
Quality settings without the guesswork
There is one more JPEG habit worth breaking: exporting at quality 100 “to be safe.” Maximum quality on a lossy format mostly just buys you a bigger file — the visible difference between quality 90 and quality 100 is negligible, while the size difference is not. Save quality 100 for archival masters you keep on your own drive, never for files you put on a website.
Format choice is only half the battle; sizing is the other half. A 4000-pixel-wide hero image displayed at 800 pixels is wasted weight no matter the format. Resize images to the largest size they will actually display at — FreeToolsBox's Image Resizer handles this — and for responsive sites, serve multiple sizes so phones do not download desktop-sized images. The best image format for web is the right format at the right dimensions, not just the right extension.
Compression tools fit in right after resizing. If you already have JPEGs and PNGs you cannot easily re-export, running them through a good compressor strips metadata and re-encodes them efficiently — FreeToolsBox's Image Compressor does this in the browser. And when you need to switch formats entirely, say a folder of PNG screenshots that should be WebP, FreeToolsBox's Image Format Converter handles the batch conversion without installing anything (we walk through compressing images without looking cheap in a separate guide).
The mistakes everyone makes
Let us talk about the mistakes, because they are specific and common. Mistake one: photographic hero images saved as PNG, quietly adding megabytes to every page load. Mistake two: logos saved as JPEG, with the telltale smudge halo around the text and a white box where transparency should be. Mistake three: screenshots saved as JPEG, turning crisp interface text into mush. Each of these is a five-minute fix once you know what to look for.
Metadata is a quiet bonus of converting. Photos carry EXIF data — camera model, sometimes GPS coordinates, thumbnails — that adds weight and can leak location information. Most converters and compressors strip EXIF by default when re-encoding. If you publish photos of your home, your kids, or your business premises, stripping location metadata is not just optimization, it is basic hygiene.
When is JPEG still the right answer? Compatibility edge cases: email clients, old desktop software, print shops, and stock-photo pipelines that expect JPEG. JPEG is the lingua franca of images — everything opens it. If a file needs to survive being opened by unknown software on unknown machines, JPEG's universality beats WebP's efficiency. For anything that lives on the modern web, though, that argument gets weaker every year.
When JPEG or PNG still wins
When is PNG still the right answer? When you need pixel-perfect lossless quality and the destination specifically wants PNG — app store screenshots, images destined for further editing, graphics for software that does not accept WebP yet. Also favicons and simple icons in contexts where WebP is not supported. PNG is not obsolete; it is just no longer the default.
You will hear about AVIF, the newer format that compresses even better than WebP. It is real and impressive, but encoding is slower, tooling support is spottier, and the gains over WebP are modest for typical web photos. Think of AVIF as the future arriving gradually: worth knowing about, not worth reorganizing your workflow around today. If you want the full technical picture, web.dev's Learn Images is the best free deep-dive. WebP is the pragmatic choice right now.
One practical testing habit ties all of this together. When you convert an image, do not trust the file size alone — open the original and the converted version side by side at 100 percent zoom and look at the hard parts: smooth gradients, fine text, hair and fabric texture, transparency edges. If you cannot see a difference at full zoom, your visitors will not see one at normal size, and the smaller file wins.
Test at 100 percent zoom
If you remember nothing else, remember this: photos go to lossy WebP, crisp graphics and anything transparent go to lossless WebP or PNG, animation goes to WebP instead of GIF, and JPEG survives as the universal fallback for files that must open anywhere. Get those four right and your images will load fast and look sharp — which is the entire job.