Four formats cover almost all web imagery, and choosing well is one of the easiest ways to make pages lighter. Each was designed with different priorities, so the right choice depends far more on what the image contains than on which format is newest.
JPG: the photographic workhorse
JPG has carried photographs on the web for decades. It uses lossy compression tuned for continuous-tone images, so it handles the smooth gradients of skies and skin extremely well at small file sizes. Its weaknesses are sharp edges and flat colour, where it produces visible haloing and blocky artefacts, and it has no support for transparency. For a photograph that needs to work everywhere without a second thought, JPG remains a dependable default.
PNG: sharp edges and transparency
PNG is lossless, meaning it preserves every pixel exactly, which makes it the natural fit for graphics with crisp lines, flat colour, and text — logos, icons, screenshots, and diagrams. It also supports full transparency, including soft edges. The cost is size: for a photograph, a PNG is usually far larger than a JPG of comparable appearance. Reaching for PNG on a photo is one of the most common causes of a needlessly heavy page.
WebP: a modern all-rounder
WebP offers both lossy and lossless modes and supports transparency and animation, which lets it cover the ground of both JPG and PNG. In practice its lossy mode produces meaningfully smaller photographs than JPG at similar quality, and its lossless mode often beats PNG for graphics. Browser support is now broad, so WebP is a strong default for new work, with a fallback where you must still serve very old browsers.
AVIF: the smallest files
AVIF is the newest of the four and generally produces the smallest files of all, especially for photographs, while preserving detail impressively at low sizes. It also supports transparency and wide colour. Its trade-offs are slower encoding and support that, while now good, is slightly behind WebP. For image-heavy pages where every kilobyte counts, AVIF is compelling — ideally offered alongside a WebP or JPG fallback.
How to choose
Match the format to the content first. Photographs favour AVIF or WebP for size, with JPG as the universal fallback. Graphics, screenshots, and anything with sharp text or transparency favour PNG or lossless WebP. When you want the smallest possible photographs and can provide a fallback, AVIF leads; when you want one modern format with the widest easy support, WebP is the pragmatic pick. There is rarely a single right answer for a whole site — the best results come from choosing per image.
Serving more than one format
Because support differs, many sites serve a modern format with an older fallback, letting the browser pick the first one it understands. That delivers small files to capable browsers without breaking older ones. Whatever you choose, resize the image to its display dimensions first — no format saves you from shipping pixels the layout will only shrink.