Quick blog article about the subject of animated images.
When designing my web-ring integration in the cellar door. We noticed something when our cron.job went to work by converting old standards of jpg png and gifs into newer standards. Simply put it stopped firefox from processing animations.
The short story is, that Firefox is aware of it. Here's the bug report. 2 years since the report. Not much progress. Read on if you want to know more.
Update 05/18/2023 - This has been resolved.
We noticed around version 113. x of Firefox that suddenly AVIF files are processing normally once again! It only took 3 years to fix and the possibility of a lot of people walking away from the browser. But hey! Better late than never. We'll keep this article up for archival sake but will be locking the comments out on this one because there's nothing really more to say here. The article does at least explain some technical information of how FFMpeg is built to produce animated files which have value in itself and in the future could serve to be a part of a tutorial on how to make animated banner advertisements.
Once upon a time.
Our banner uses AVIF support. On FireFox this will be static. Old browsers will just get GIF
Er, actually around build 92 of firefox it used to support WebP and that was it. You know what? This is completely fine! As a browser organization, we would rather the developers take their time in getting something right versus pressuring them and getting something 'out the door' as it were. Why? If you half-ass something it ruins the user experience and makes the average reader run away from one browser to embrace something like Google Chrome which lately has been rumoring about disabling ad-blocking (which trust us, if and when they do such a thing. I will divert to other browsers and if unavoidable we will be uninstalling my chrome variants completely.) But that's a discussion for another time.
The same banner but with AVIF/JXL disabled to show WebP. Old browsers will just get GIF
The really cool thing about it was. Firefox users can enjoy the full functionality of my site with WebP. Chrome users can enjoy AVIF. All is right with the world.
UNTIL!
Firefox pushed AVIF support. Didn't bother to support animated frames as that was AVIS/AVIFS. Which, is not supported either.
Now, a user COULD go into the address bar of Firefox and type in the following:
about:config
and then you can search for:
AVIF
then find the section image.avif.enabled and set it to the following:
image.avif.enabled FALSE
Reboot and enjoy WebP post build 92. But guess how many Firefox users are going to do that? It's probably less than 0.001 percent!
Reasons for AVIF.
The number one reason why AVIF has grown in popularity is similar to JXL is file size reduction. As of late the race between AVIF and JXL has been incredibly close with JXL actually coming out better during lossless and near-lossless compression tests. JXL unfortunately is still in beta which is fine for now! It's still in beta and working out issues. As a matter of fact, we re-encoded this entire site in JXL 0.8 and found even more filesize savings with it! So Kudos to the dev team of JXL. keep it up.
-rw-r--r-- 1 xxx xxx 2722308 Sep 6 09:36 S-Config-Banner.gif -rw-r--r-- 1 xxx xxx 175654 Sep 6 09:36 S-Config-Banner.gif.avif -rw-r--r-- 1 xxx xxx 2730615 Sep 7 12:14 S-Config-Banner.gif.jxl -rw-r--r-- 1 xxx xxx 5499663 Sep 6 09:36 S-Config-Banner.gif.apng -rw-r--r-- 1 xxx xxx 807458 Sep 6 09:36 S-Config-Banner.gif.webp
Unfortunately where we part ways with JXL and lean on AVIF for the future of imaging is in the case above.
Animated picture show.
GIF dominated this world for years despite only having 256 colors. APNG came out momentarily from the Japanese world which gave us transparency AND 24-bit colors. The file size was kind of sucking. WebP gave us -better- filesizes whereas AVIF just knocked it out of the park by implementing the AoMedia AV1 encoding system onto images. Takes forever to encode sure! But it certainly gets the job done by getting a file from server to client. Which is the ultimate war a web admin has to fight on a daily. Get the content to your readers, and get the content fast to your readers.
In case you are curious about how we got those files here are some commands in FFMPEG.
Note: the master started off as a lossless WebM VP9 video file @ 2.5MB file size. MP4 and other formats should work all the same:
-rw-r--r-- 1 xxx xxx 2495351 Sep 12 02:54 S-config-Banner-WEB.webm
To GIF @ up to 2.7MB with only 8-bit 256 colors:
ffmpeg -i S-config-Logo-WEB.webm -filter_complex "[0:v] palettegen" palette.png ffmpeg -i S-config-Logo-WEB.webm -i palette.png -filter_complex "[0:v][1:v] paletteuse" S-config-Logo.gif
To WEBP down to @ 800KB 24-bit color:
ffmpeg -i S-config-Logo-WEB.webm -compression_level 3 -q:v 70 -loop 1 -preset picture -an -vsync 0 S-config-Logo.webp
To APNG up to @5.4MB 24-bit color:
ffmpeg -i S-config-Logo-WEB.webm -f apng -plays 0 S-config-Logo.apng
To AVIF down to @ 175KB 24-bit color:
Note: Could have passed more flags to get better compression. But this is fine!
ffmpeg -i S-config-Logo-WEB.webm S-config-Logo-WEB.avif
To JXL up to 2.7MB 24-bit color:
Note: at the time of writing there was no way to make an animated JXL in FFmpeg. Just still pictures. so we had to switch to CJXL using the animated PNG as a reference.
cjxl "S-config-Logo-Loop-Web.gif.apng" -d 0.0 --lossless_jpeg=1 -e 9 --brotli_effort=11 "S-config-Logo-Loop-Web.gif.jxl"
Now, we've just proven two points during all of this. The ease of use of making these newer formats with ALMOST one program on command-line. And, the ease of implementation as explained in our blog. But even if you don't want to go around hacking an Nginx box you can do it just as easily with HTML code (provided of course your web-hosts MIME file has those images in place). You can do something like this below:
<picture> <source srcset="animation.jxl" type="image/jxl"> <source srcset="animation.avif" type="image/avif"> <source srcset="animation.webp" type="image/webp"> <source srcset="animation.apng" type="image/apng"> <img src="animation.gif" width="420" height="420" alt="…"> </picture>
This is important to point out because it's now out in the wild. It's being put to use. Currently, only Chrome is taking advantage of it while others blindly implement AVIF with partial support.
Politics.
The AOM, or Alliance for Open Media that makes AVIF-images and AV1-video is not JUST google. it's a lot of people coming together to make a royalty-free format for displaying video on the net. Because before this project and WebP existed; There was the OGV Ogg Vorbis video format whose compression was not really fantastic and then there were the giants, Adobe with FLV and MPEG-LA with MP4 and all of their variant videos which (at the time) you had to pay a license for. Companies that held back video production on the internet for a very long time. In the world of streaming services and video providers. That just cannot happen anymore.
Final thoughts.
To the average person, broken or partially implemented features are a terrific way of making people switch browsers. I know Opera is still out there but I do not want Firefox to die like this. Supporting these standards is important because the faster an image goes from point A to point B the better it is for practically everyone. To such ends. We will not be changing our script or removing AVIF anytime soon. I don't even typically convert animations to JXL as the savings are just not there yet. But if backed into a corner and JXL gets out of beta we might turn it on for our animated images. But ultimately Firefox needs to issue a little more importance to new imaging formats or else they will be left behind.
That's what server said.
+++
END OF LINE
nice write up
we need more of such