AVIF for graphics and screenshots
AVIF handles flat colour and smooth gradients well, and it carries transparency, so it is a real alternative to PNG for web graphics. We tried two typical files. A 1440 by 900 screenshot with 787 different colours was about 38 KB as a PNG and about 20 KB as an AVIF at the default quality. A 128 pixel logo with soft transparent edges went from about 9 KB to about 4 KB.
The quality slider sets the trade. For the screenshot, which was 37.8 KB as a PNG, the AVIF was 9.3 KB at quality 30, 15.2 KB at 50, 20.0 KB at 65, 25.0 KB at 80 and 30.9 KB at 90, scoring 37.8, 41.3, 43.6, 44.3 and 45.0 dB as PSNR against the PNG. For the logo with transparency the sizes were 2.0, 3.2, 4.1, 4.9 and 6.3 KB. Each step up costs more bytes and buys less. A JPEG of the same screenshot at quality 90 was 70.1 KB and scored 42.4 dB, so at quality 65 the AVIF was about three and a half times smaller and slightly closer to the original.
Savings are less certain than for photographs. A PNG that has already been optimised, or a tiny icon, may not shrink at all: a 16 by 16 icon went from 370 bytes to 681 bytes as an AVIF, and 32 and 48 pixel icons were 45 and 21 percent larger. The list shows both sizes for every file, so you can decide per file.
How transparency is stored
AVIF keeps the colour picture and a separate alpha picture. We opened the file the converter made for the logo with libavif's own tool. It reported an alpha picture that is not premultiplied, a bit depth of 8, colour stored as YUV 4:2:0, and no ICC profile, Exif or XMP.
Both pictures are compressed with loss at the default quality. We compared the decoded AVIF with the source logo. The alpha channel differed by 0.7 of a level on average and by at most 16 levels, and the colour, after multiplying by alpha, scored a PSNR of 42.2 dB. That is fine for a logo on a web page, but if exact edges matter, for example for a sprite sheet that will be cut up, stay with PNG.
Text, thin lines and colour
Because the colour is stored at half resolution, a thin line of one colour on another can spread a little into its surroundings, and small coloured text looks softer than in the PNG. In our screenshot the PSNR was 43.6 dB, the average difference 0.56 of a level and the largest 62 levels out of 255. Almost half of the pixels (48.6 percent) came back identical, and 1.45 percent were off by more than 8 levels.
Coloured text is the hardest case. A 900 by 500 picture of small coloured text shrank furthest, from 62.5 KB to 8.6 KB (87 percent), but scored only 34.9 dB, with 7.25 percent of its pixels more than 8 levels off. Raising the quality to 90 gave 14.0 KB and 35.3 dB, so extra quality does little here: the half resolution colour, not the quality setting, limits it.
Raising the quality helps only a little, and it does not make the AVIF exact. At quality 100 the screenshot was about 65 KB, roughly 70 percent bigger than the PNG, and still not identical, with a PSNR of 45.4 dB. If the picture has to be exact, use PNG, or lossless WebP through PNG to WebP.
Using the result on a website
Support is Chrome 85, Firefox 93, Safari 16.4 and Edge 121, about 96 percent of browser use worldwide according to caniuse. MDN advises a fallback in WebP, JPEG or PNG with the picture element, because support is not yet comprehensive.
For a favicon or an app icon, keep ICO, PNG or SVG files; the Favicon Generator makes them. Remember too that an AVIF cannot display progressively (MDN) and that the converter writes it without metadata.