WebP vs JPG vs PNG: which format is best for websites?

Web images have to do three things: look right, stay small, and open everywhere. JPEG is unbeatable at the third. PNG owns transparency and sharp edges. WebP was designed specifically to cover both jobs, and since browser support settled, it does.

If you want the four-way comparison including AVIF, read JPG vs PNG vs WebP vs AVIF. This one is about choosing what to ship on a website.

Side by side

The size figures depend heavily on the image, and anyone quoting a single percentage is oversimplifying. The direction, though, is consistent: at matched visual quality WebP files come out smaller than JPEG, and much smaller than PNG for anything screenshot-like.

Why WebP is the default for the web

WebP is the only one of the three that handles every case a website has. Lossy mode for photographs, lossless mode for graphics, an alpha channel for cutouts and logos. One format, one pipeline, fewer decisions per image.

The largest single win on most sites is converting PNG screenshots and UI images. Those are frequently the heaviest files on a page, and lossy WebP at quality 85–90 holds text crisply while cutting the size substantially.

Do you still need a JPEG fallback?

Every actively maintained browser has supported WebP for years, so for ordinary website images a fallback is no longer the default requirement it once was. Serving WebP directly is a reasonable decision for most sites.

There are still reasons to keep one. If your analytics show meaningful traffic from very old devices, or the images are also consumed by email clients, feed readers, or third-party software you do not control, a fallback is cheap insurance. The <picture> element handles it without JavaScript:

• <picture> with a <source type="image/webp"> and an <img> pointing at the JPEG.
• The browser takes the first source it understands, so newer ones get WebP and everything else gets the JPEG.
• Keep width and height on the <img> either way — that is what reserves the space and prevents layout shift.

Choosing per image

Converting your existing images

1. 1Start with the heaviest filesSort by size in your browser's Network tab. A handful of images usually account for most of the page weight.
2. 2Resize before convertingDimensions save more bytes than the format does. Cap the long edge first.
3. 3Convert in one passOpen the Image Converter, drop in a folder, choose WebP, set quality 80 and download the ZIP.
4. 4Spot-check the awkward onesSaturated reds, fine text and subtle gradients are where lossy WebP can shift. Check those at 100% zoom.
5. 5Update the referencesFilenames keep their stems, so the change is usually a search and replace of the extension in your templates or content.

Two rules that cover almost everything

1. On a website you control: WebP. Quality 80 for photographs, 85–90 for anything with text, lossless for flat graphics.
2. For a file leaving your website: JPG for photos, PNG for graphics. Compatibility beats a few kilobytes when you do not know what will open it.

Image Optimizer applies the first rule in one step — capping dimensions, converting and stripping metadata with web defaults already set.