WebP and AVIF: Modern Image Formats Explained

Why new formats exist

JPEG dates from 1992 and PNG from the 1990s. They were designed for the computers and networks of that time, and both leave room for improvement. Newer formats use more advanced mathematics, borrowed from video compression, to describe the same picture with less data. The result is smaller files at the same visual quality, which means faster pages and less bandwidth.

The two formats that matter most for the web today are WebP, released by Google in 2010, and AVIF, which is based on the AV1 video codec and was developed by the Alliance for Open Media.

WebP in detail

WebP is based on the VP8 video codec for its lossy mode, and has a separate lossless mode. It also supports transparency and animation. According to Google's documentation, lossy WebP images are 25 to 34 percent smaller than comparable JPEG images at an equivalent SSIM quality index, lossless WebP images are 26 percent smaller than PNG, and lossy WebP with transparency can be roughly three times smaller than PNG.

These numbers describe averages from Google's tests. For a particular picture, the saving can be smaller or larger. WebP is supported by Chrome, Firefox, Safari and Edge, so it is safe for most websites. Some older desktop software and some upload forms still do not accept it.

AVIF in detail

AVIF stores images using the AV1 codec in a container based on the HEIF family. It supports high dynamic range, wide color gamuts, transparency and, in practice, often gives smaller files than WebP at the same visual quality, particularly at low bit rates. The cost is encoding time: producing an AVIF takes more computing power than producing a JPEG or WebP.

Browser support has grown quickly. According to caniuse, global support is above 95 percent, with Chrome supporting AVIF since version 85, Firefox since 93, Safari since 16.4 and Edge since 121. Older browsers and some software still cannot display it, so a fallback is advisable for a public website.

What this tool supports

The compressor accepts JPEG, PNG and WebP files and can write JPEG or WebP. WebP output is offered only if your browser can create WebP images through the canvas, which Chrome, Edge and Firefox can. Browsers differ in what they can encode, and AVIF encoding from a canvas is not reliably available, so AVIF output is not offered in this version.

If you need AVIF, use the WebP output as a very good intermediate step: it already gives a large share of the possible saving, and it avoids compatibility problems that older software has with AVIF.

Fallbacks with the picture element

To use a new format safely, offer it together with a fallback. The picture element lets you list several sources, and the browser takes the first one that it understands: for example an AVIF, then a WebP, and finally a JPEG in the img element. Browsers that do not know the newer types simply move on.

This costs you some extra files, but you create them once. You can produce the WebP and JPEG versions with the compressor and, if you use AVIF, create it with a dedicated tool or let your build process or image service do it.

Quality versus size in practice

Compare formats by looking at the pictures, not by quoting percentages. At moderate settings, WebP and AVIF usually keep fine textures better than JPEG at the same file size; AVIF in particular often handles smooth gradients well, while lossy WebP can still show banding in dark, smooth areas. At very low settings, each format has a different look: JPEG shows blocks, WebP tends to smooth detail, AVIF tends to produce a soft, painterly look.

The best approach is to try your own images: add a few photographs to the compressor, convert them to WebP at a quality of 75, and compare the size in the list with the JPEG version. The difference is usually obvious in the numbers and hard to see on the screen.

When to switch, and when to wait

Switch to WebP now for a website with a modern audience, and for images in apps that you control. Add AVIF if you want to squeeze the last bit out and your pipeline supports it. Stay with JPEG and PNG for files that must be opened in any software, for email attachments to unknown recipients, for print workflows and for archives.

Whichever format you choose, keep your originals in a lossless or high-quality form. Formats come and go, and a good master lets you convert to the next one without losing quality again.

Choosing the right settings for your use

For a website, convert photographs to WebP or JPEG at a quality of 75 to 85, and keep PNG only for logos, icons and screenshots where sharp edges matter. For email, resize photos to around 1600 pixels and use JPEG, since every email program opens it. For archives that you may edit, keep lossless masters and create smaller copies only for delivery.

If you are unsure which of these applies, start with the most compatible choice, JPEG, and improve from there. A file that works for everyone is worth more than a file that is ten percent smaller but cannot be opened.