WebP

JPEG, for photographs. WebP's lossy mode produces smaller files at equivalent perceived quality, and the saving is largest on images with smooth gradients.

PNG, for graphics and screenshots. WebP's lossless mode is typically 20 to 30 percent smaller, and it supports alpha transparency in both modes.

GIF, for short animations. An animated WebP is dramatically smaller than the equivalent GIF, though a video file is smaller still for anything longer than a moment.

It does not replace SVG. A vector graphic should stay vector: it scales without loss and is usually smaller than any raster version.

Every current browser supports it, and has done for several years. Safari added support in 2020, which was the last significant gap.

The `<picture>` element provides a fallback: a `source` with `type="image/webp"` and an `img` with the original format, which the browser selects between.

Content negotiation is the alternative: the server reads the `Accept` header and returns whichever format the client accepts, from one URL.

Whether a fallback is still worth maintaining depends on the audience. For most public sites it is now unnecessary complexity.

Lossy WebP at quality 75 to 85 is visually indistinguishable from JPEG at similar settings for most photographic content, at a smaller size.

AVIF compresses better again — typically 20 to 30 percent smaller than WebP — at the cost of substantially slower encoding and slightly narrower support.

A common arrangement serves AVIF first, WebP second and JPEG last, through `<picture>`, giving each client the best format it accepts.

For a site with a small number of images, WebP alone is a reasonable stopping point. The additional gain from AVIF is real and smaller than the gain from WebP itself.

The browser's network panel shows the type of each image response, which is the direct answer.

`curl -I https://example.com/image.webp | grep -i content-type` should report `image/webp`. A server returning `application/octet-stream` for the extension will cause some clients to download rather than display it.

Compare the byte sizes of the same image in each format. If the WebP is not smaller, it was probably converted at too high a quality setting.

Check that the image dimensions match the display size as well. A correctly formatted image served at four times the needed resolution is still oversized.