WebP Basically Won the Format Wars
I'm going to save you some reading: if you're building for the web in 2026, you should probably be using WebP for almost everything. But "almost everything" is doing a lot of heavy lifting in that sentence, so let me explain.
I've been working with image optimization for years, and the number of times I've seen someone upload a 4MB PNG screenshot to their production website is... honestly depressing. So let's talk about what each format actually does well, why it exists, and when you'd still reach for it.
JPEG: The Cockroach of Image Formats
JPEG has been around since I was in elementary school, and it's still everywhere for a reason. It was designed for photographs, and for photographs it's still perfectly fine. The lossy compression it uses throws away visual information your eyes mostly can't detect anyway — color variations in smooth gradients, subtle texture details. For a photo of your dog or a product shot, nobody is going to notice the difference between a well-compressed JPEG and the original.
The problem is that people use JPEG for everything. Screenshots with crisp text? JPEG smears them into a blurry mess. Logos with flat colors? JPEG adds weird halos around the edges (those are called compression artifacts, and once you start seeing them you can't unsee them). Anything with transparency? JPEG literally cannot do it — there's no alpha channel.
But here's the thing: JPEG still has a place. Email clients are a nightmare for image support. Some ancient CMS platforms only handle JPEG and PNG. And if you're dealing with photography workflows where files move between Lightroom, Photoshop, and various print services, JPEG is the universal language everyone speaks. It's not exciting, but it works everywhere.
PNG: When Every Pixel Matters
PNG was the answer to a specific problem: GIF's patent issues back in the 90s. But it turned into something much more useful — a lossless format with transparency support. Every pixel you put in is exactly the pixel you get out. That makes it perfect for screenshots, UI mockups, logos, icons, and anything where you need crisp edges and exact colors.
The tradeoff is size. A PNG of a photograph can easily be 5-10x larger than a JPEG of the same image at reasonable quality. That's because PNG's compression is designed to preserve everything, not to be small. It's great at compressing flat areas of color (a screenshot of a text editor compresses beautifully), but a photo with millions of slightly-different pixels? PNG just faithfully stores every single one of them.
If you're still saving website images as PNG in 2026, you're probably wasting bandwidth. The one exception is when you genuinely need pixel-perfect lossless quality — like a favicon, an SVG fallback, or sprite sheets for a game. For everything else on the web, there are better options now.
WebP: The One Format to Rule Them All (Mostly)
Google released WebP back in 2010 and it took over a decade for it to actually become usable everywhere. Safari was the last holdout, finally adding support in 2022. Now that every modern browser handles it, there's very little reason not to use it as your default.
WebP does lossy compression better than JPEG (typically 25-35% smaller at the same visual quality) and lossless compression better than PNG (typically 20-30% smaller). It supports transparency. It supports animation. It basically looked at what JPEG and PNG each do well and said "I'll do both, but smaller."
I switched an entire e-commerce site from JPEG to WebP last year and the page weight dropped 30% overnight. Same visual quality, same images, just a different format. The Lighthouse score jumped from 62 to 84 on performance alone. That's not a subtle improvement — that's the kind of change that actually affects bounce rates.
The Numbers
Theory is nice but let's look at actual file sizes. Here's what I typically see when compressing the same source image:
| Scenario | JPEG | PNG | WebP |
|---|---|---|---|
| Photo (4000x3000) | 800 KB | 12 MB | 550 KB |
| Screenshot (1920x1080) | 350 KB | 450 KB | 200 KB |
| Logo with transparency | N/A | 45 KB | 28 KB |
| UI icon (64x64) | 5 KB | 3 KB | 2 KB |
These are rough numbers — your mileage will vary depending on image content, compression settings, and how aggressively you optimize. But the pattern is consistent: WebP wins or ties in basically every category.
Browser Support
This used to be the argument against WebP. It's not anymore.
| Browser | JPEG | PNG | WebP |
|---|---|---|---|
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes (14.1+) |
| Edge | Yes | Yes | Yes |
| IE 11 | Yes | Yes | No |
If you're still supporting IE 11 in 2026... I have questions. But also, you can use a <picture> element with a JPEG fallback and move on with your life.
How I Actually Decide
Here's my mental flowchart, and it's embarrassingly simple:
Does it need transparency? WebP. Is it a photograph? WebP lossy. Is it a screenshot or graphic? WebP lossless. See the pattern?
The only times I deviate: if I need to send an image in an email (JPEG, because email clients are chaos), if I'm creating assets for a design tool that doesn't support WebP (PNG), or if I'm dealing with a legacy system that only accepts JPEG and PNG.
For social media, it's worth knowing that most platforms re-encode your images anyway, so upload the highest quality source you have and let them handle the compression. Twitter, Instagram, Facebook — they're all going to mangle your carefully optimized WebP into whatever format they prefer internally.
The AVIF Question
You might be wondering about AVIF, the newer format based on AV1 video codec. It's technically superior to WebP in many cases — even smaller files, better quality at low bitrates. But support is still catching up (Safari only added it recently), and encoding is significantly slower. It's one to watch, but WebP is the safe default for now. I wrote a full WebP vs AVIF comparison if you want the detailed breakdown.
Actually Converting Your Images
Knowing which format to use is one thing. Actually batch-converting hundreds of images without losing your mind is another.
You can use command-line tools like cwebp or ImageMagick, but honestly, for most people that's overkill. CanYouSmoosh lets you drag in a folder of images, pick your format and quality, and convert everything at once. I use it when I'm migrating sites between formats or optimizing a batch of product photos — it's faster than writing a shell script every time.
The key thing regardless of what tool you use: don't just blindly convert at default settings. A JPEG at quality 80 and a WebP at quality 80 are not the same visual result. WebP's quality scale is different. I usually find that WebP at 75-80 matches JPEG at 85-90, which is where a lot of the size savings come from.
The Short Version
Use WebP. If you can't use WebP, use JPEG for photos and PNG for graphics. Don't overthink it — the difference between a well-optimized JPEG and a well-optimized WebP matters at scale, but picking any reasonable format and actually compressing your images is better than serving unoptimized originals in the "perfect" format.
The biggest image optimization win isn't the format — it's just bothering to optimize at all. If you want specific numbers and techniques, check out my guide on reducing image size without losing quality.