JPEG and PNG have carried the web for decades. WebP and AVIF are the modern replacements, and the differences in file size are larger than most people expect.
For most of the web’s history, image optimisation meant choosing between JPEG and PNG and turning a quality slider. WebP and AVIF changed that. Both formats deliver dramatically smaller files at the same visual quality, and both are now widely supported in browsers. Understanding where each one fits lets you cut image payload substantially without changing what users see.
Why JPEG and PNG show their age
JPEG was designed in the early 1990s. It compresses photographs well but has no alpha transparency, no animation, and no support for modern coding tools. PNG is lossless and supports transparency, but its files are large for photographic content because it does not exploit the way human vision tolerates small errors. Neither format was built for the constraints of modern mobile networks.
What WebP adds
WebP, introduced by Google, supports both lossy and lossless compression, alpha transparency, and animation in a single format. A lossy WebP of a photograph is typically 25–35% smaller than a JPEG at the same visual quality. A lossless WebP is smaller than the equivalent PNG. Because it covers all three use cases — lossy photos, lossless graphics, and transparency — WebP can replace both JPEG and PNG in most situations. Browser support is now effectively universal.
What AVIF adds
AVIF is based on the AV1 video codec and is the newer of the two. It out-compresses WebP, often producing files 20–50% smaller than an equivalent WebP at the same quality, especially at low bitrates where JPEG and WebP start to show blocking. AVIF also supports 10-bit and 12-bit colour, high dynamic range, and film grain synthesis. Its main drawback is encoding speed — AVIF is slower to encode than WebP — and slightly less universal support, though all current major browsers now handle it.
When to use which
- Photographs for the web: AVIF first, WebP as a fallback, JPEG as the final fallback.
- Graphics with sharp edges and flat colour (logos, screenshots): lossless WebP or PNG.
- Animated images: WebP or AVIF instead of GIF — far smaller files.
- Images needing wide-gamut or HDR: AVIF, which supports higher bit depth.
- Maximum compatibility with old systems: JPEG, but serve modern formats to modern browsers via <picture>.
Serving both with a fallback
You do not have to pick one format. The <picture> element lets you list AVIF and WebP sources with a JPEG fallback, and the browser uses the best one it supports. Convert your originals with Image Convert, then compress each version with the Image Compressor. This gives modern browsers the smallest possible file while keeping older browsers working.
The quality-to-size relationship
The gain from modern formats is not linear. At high quality settings (90%+), JPEG, WebP, and AVIF are all fairly close in size, because there is little to compress away. The gap widens as you lower quality: at 60–70%, AVIF can be half the size of a JPEG that looks no better. For web images, where 80% quality is usually plenty, the savings from AVIF and WebP are large and consistent.
Practical conversion
The cleanest workflow is to keep a high-quality master (PNG for graphics, JPEG at 100% for photos) and export web versions from it. Convert the master to WebP and AVIF, compress each to the target quality, resize to the display dimensions, and serve them through <picture>. Re-compressing an already-compressed file — especially across formats — compounds artefacts, so always start from the highest-quality source you have.
WebP and AVIF are not experimental. They are the current best practice for web images, and the payload reductions they offer directly improve Core Web Vitals. If you are still serving JPEGs and PNGs to every browser, switching is one of the easiest performance wins available.