Compress and convert images to WebP

What WebP buys you

WebP is a Google format, now supported by every browser in current use, including Safari since 2020. Against a JPEG of the same visual quality it typically saves 25 to 35 percent. Against a PNG of a flat graphic it often saves more, sometimes far more, because it can do lossy compression on images that PNG has to store pixel by pixel. It supports transparency, which JPEG does not, and animation, which is why it has largely replaced the animated GIF.

This is the format to reach for if you want one file that works everywhere and you do not want to maintain multiple sources. It is the pragmatic default. Convert your JPEGs and your PNGs to WebP, serve the WebP, and move on to a different problem.

Lossy WebP and lossless WebP are different things

WebP has two modes. Lossy WebP works like JPEG, discarding detail to save bytes, and is what you want for photographs. Lossless WebP works like PNG, keeping every pixel, and is what you want for logos and screenshots where an artifact would be obvious. The quality slider on this page drives the lossy encoder. At quality 80, photographs look identical to the original at normal viewing size while landing roughly a third smaller than the equivalent JPEG.

One thing to watch. Converting an already-compressed JPEG to WebP means the image is compressed twice, once by the JPEG encoder and once by the WebP encoder, and the artifacts of the first pass become detail the second pass has to preserve. The saving is still real, but it is smaller than it would be if you converted from the original. Where you have the original, convert from that.

Serving WebP without breaking anything

If you support only current browsers, you can serve WebP directly and be done. If you need a fallback for something old, use a picture element with a WebP source and a JPEG or PNG fallback in the img tag. The browser picks the first source it understands and never downloads the others. This is the correct way to do it and it costs nothing on modern browsers.

The other place people trip is the server. Make sure your host sends image/webp as the content type. A WebP served as image/jpeg will still often render, because browsers sniff, but caches and CDNs behave badly around it and some image proxies will refuse it outright.

WebP or AVIF

AVIF is smaller. On photographs it commonly beats WebP by another 20 to 30 percent, and it handles gradients and dark scenes better. It is also slower to encode and, on very large images, slower to decode on low end phones. Browser support is now good but not universal in the way WebP's is. The sensible position in 2026 is that WebP is the safe default and AVIF is the upgrade you make when page weight is the metric you are being judged on. Serving both from a picture element is not much extra work, and you can generate both here from the same source in two passes.