Feature request: AVIF images

All suggestions about TPFC should be posted here. Discussions about changes to TPFC will also be carried out here.
Post Reply
Message
Author
User avatar
webfork
Posts: 10818
Joined: Wed Apr 11, 2007 8:06 pm
Location: US, Texas
Contact:

Feature request: AVIF images

#1 Post by webfork »

So this is an aspirational post because it's not yet supported by every browser out there yet, including two big ones: MS Edge and Safari. I'd still like to open up support to AVIF (full discussion thread). One way to encourage its use is when websites like ours that highlight software using the format.

Who cares?

File size and quality. I'm seeing the same quality along with major size reductions. Just a few examples:

Current PNG image - 25k (see entry)
AVIF conversion - 15k - reduced by 40%

Current Pixia JPEG image - 222k (see entry)
AVIF conversion 79k - Reduced by 65%

Needless to say, that's a lot of bandwidth saved over time.


Why not some other format like WEBP or HEIC?

HEIC has mixed support and has patent issues, likely not seeing support from Firefox or Chrome. WebP is certainly an improvement over JPEG, but AVIF appears to have higher quality and lower file size.


What about animation?

We have a lot of animated GIF and PNG (slideshow style) files here on the site. AVIF supposedly supports animation, but I haven't found any available tools that support that animation yet. Or at least Firefox isn't yet playing animated AVIF files, I'm not sure.

---

It's also possible to add fail-over so that AVIF files are available but drop in favor of JPEG or PNG if there's no browser support.

User avatar
SYSTEM
Posts: 2041
Joined: Sat Jul 31, 2010 1:19 am
Location: Helsinki, Finland

Re: Feature request: AVIF images

#2 Post by SYSTEM »

For screenshots WebP is a better format than AVIF.

You want screenshots to be lossless (they compress well, unlike photographs). Both WebP and AVIF have lossless modes, and WebP achieves smaller file size in lossless mode: https://siipo.la/blog/whats-the-best-lo ... nd-jpeg-xl Obviously, there is no quality difference in lossless images.
My YouTube channel | Release date of my 13th playlist: August 24, 2020

User avatar
webfork
Posts: 10818
Joined: Wed Apr 11, 2007 8:06 pm
Location: US, Texas
Contact:

Re: Feature request: AVIF images

#3 Post by webfork »

SYSTEM wrote: Thu Nov 25, 2021 11:37 am For screenshots WebP is a better format than AVIF.
I'm very available to be wrong about this but my own testing on the topic wasn't encouraging. Here are my status using Converseen and WEBP:

Current PNG image - 25k
WEBP conversion - 76k (worse)
AVIF conversion - 15k

Current Pixia JPEG image - 222k
WEBP conversion - 161k (better but not as good as AVIF)
AVIF conversion 79k

Maybe I need to be using a different WEBP converter?
SYSTEM wrote: Thu Nov 25, 2021 11:37 am You want screenshots to be lossless (they compress well, unlike photographs). Both WebP and AVIF have lossless modes, and WebP achieves smaller file size in lossless mode: https://siipo.la/blog/whats-the-best-lo ... nd-jpeg-xl Obviously, there is no quality difference in lossless images.
Not sure about my testing use of AVIF in terms of "lossless" compression. The tools I have don't appear to support fully lossless.

This makes my testing even less reliable as I've been using "lossy" compression options on PNG files via tools like PhotoDemon and FileOptimizer.

Image

User avatar
SYSTEM
Posts: 2041
Joined: Sat Jul 31, 2010 1:19 am
Location: Helsinki, Finland

Re: Feature request: AVIF images

#4 Post by SYSTEM »

I made my own tests with the official command-line converters configured to use lossless compression:
Image Original image WebP AVIF
FileZilla 25k 19k 47k
Pixia 222k 752k 830k
In the FileZilla image, lossless AVIF amazingly loses even to PNG. WebP meanwhile needs less space than in lossy mode, beating the original PNG. (Lossless images sometimes end up smaller than lossy ones because the used compression algorithm is completely different and a good fit for sharp images like screenshots.)

For the Pixia image, the original JPEG is significantly smaller than either lossless image. I guess it contains too much detail to be efficiently compressed, and to make matters worse, WebP and AVIF are also required to exactly reproduce JPEG artifacts in the original.

I also tried lossy compression for the Pixia image and got 109k for WebP and 147k for AVIF. However, the resulting WebP image is of way worse quality than the AVIF.
My YouTube channel | Release date of my 13th playlist: August 24, 2020

User avatar
webfork
Posts: 10818
Joined: Wed Apr 11, 2007 8:06 pm
Location: US, Texas
Contact:

Re: Feature request: AVIF images

#5 Post by webfork »

Sort of inspired from TP109's testing from a few years ago, I spent some time on this and got some more detail. As noted above, I don't have a way to test for lossless image quality, but I did a test with standard settings on some images I grabbed off the web, including a 2-color PNG file and a screenshot (listed below).

Image

Results

AVIF consistently performed better with both converters and image quality change was barely visible. On the down side, my 3 year old i5 laptop took almost 5 minutes to convert just 3 images to AVIF, whereas WEBP took about 15 seconds.

Data
(Positive results are highlighted green.)

Image

===

Background

Test setup

* Default settings for conversion, no special settings or tweaks.
* PNG files were compressed using PNGOptimizer


Software used in this process:

* Paint.net
* Converseen
* PNG Optimizer
* MultiCommander - (used the feature Tools - To Clipboard - Name, Size, Date to get all the file sizes down)
* LibreOffice Calc

User avatar
SYSTEM
Posts: 2041
Joined: Sat Jul 31, 2010 1:19 am
Location: Helsinki, Finland

Re: Feature request: AVIF images

#6 Post by SYSTEM »

Yeah, AVIF is known to be superior to WebP in lossy compression. Both image formats are built around video codecs (VP8 for WebP, AV1 for AVIF). AV1 is a two generations newer codec than VP8 and easily outperforms it.
My YouTube channel | Release date of my 13th playlist: August 24, 2020

User avatar
Andrew Lee
Posts: 3048
Joined: Sat Feb 04, 2006 9:19 am
Contact:

Re: Feature request: AVIF images

#7 Post by Andrew Lee »

https://www.smashingmagazine.com/2021/0 ... avif-webp/
AVIF may not be able to compress non-photographic images as well as PNG or lossless WebP.

User avatar
webfork
Posts: 10818
Joined: Wed Apr 11, 2007 8:06 pm
Location: US, Texas
Contact:

Re: Feature request: AVIF images

#8 Post by webfork »

Andrew Lee wrote: Fri Nov 26, 2021 3:48 am https://www.smashingmagazine.com/2021/0 ... avif-webp/
AVIF may not be able to compress non-photographic images as well as PNG or lossless WebP.
Here's a direct comparison of the converted images, again with default settings:

PNG version:
https://i.imgur.com/lGavwZY.png

AVIF version (using Converseen):
https://drive.google.com/file/d/13C6p7i ... sp=sharing

If you look closely at the AVIF file you can see some very minor artifacts but I think it might be worth the trouble, given the size difference. And for those entries that we would have posted in JPEG because they're photographic, that's a lot of bandwidth saved.

Again, this is an aspirational feature request, I just want to make the point that there's something worth looking at. I understand if this doesn't exactly electrify anyone into action.

User avatar
Andrew Lee
Posts: 3048
Joined: Sat Feb 04, 2006 9:19 am
Contact:

Re: Feature request: AVIF images

#9 Post by Andrew Lee »

No worries! It prompted me to do some reading of my own, because I am not familiar with this format.

I have a rough idea of how support can be added, but it will involve generating redundant images in JPEG/PNG for browsers that do not yet support the format (or require the author to upload them as part of the process).

User avatar
SYSTEM
Posts: 2041
Joined: Sat Jul 31, 2010 1:19 am
Location: Helsinki, Finland

Re: Feature request: AVIF images

#10 Post by SYSTEM »

You should be able convert the images server-side with the gmagick library.

I myself have used Magick.NET at work to convert images extracted from Photoshop PSD files (and also from a highly obscure image format called TLG) to PNG and add padding to them.
My YouTube channel | Release date of my 13th playlist: August 24, 2020

Post Reply