Animated File Format Shootout (Web Edition)

Curv can produce beautiful full color animations and needs a modern animation file format that supports this (NO GIFs!). This shootout compares APNG, WebP, AVIF, and WebM for this purpose (and also contains a GIF for comparison for you masochists out there). It is judged on the objective criteria of file size, but also on the more subjective criteria of quality, support, and ease-of-use, with image formats judged to be simpler and easier to use than video formats (i.e. WebM).

Read more about the test below, or skip to the pretty pictures.

This is the "web edition" of the shootout, meaning that it is directed at using these image files on the web and focuses on browser support. This website is part of the test itself; open it in different browsers and platforms and see how the images display (or don't). See also the corresponding reStructuredText edition to see how these animations display (or don't) within rst files, at least here on Codeberg. The main takeaway from that is that video files (e.g. WebM) are not currently supported. Otherwise, support for the animated images depends on the browser support.

The test model chosen is my spin (pun intended) on Doug Moen's colorful Twistor model, an image of which is shown at the top of the project Readme, and a small 50 px version is in the upper right corner of this page. This model was selected because it is simple (only 5 short lines of Curv code) yet visually interesting and pretty, but also because the wide color range and continuously changing color gradients should make quality and compression issues more apparent. The model was modified slightly from the original by changing the color from an sRGB HSV hue map to a more perceptually uniform OKLCH hue map, and an animated spin was added to the model. The modified file "OKtwistor" also features parametric sliders to adjust the Lightness and Chroma; the model used for this testing had a Lightness of 0.75 and Chroma of 0.40.

The period of the color cycling is 8 seconds, and the model spins with a period of 4 seconds. 8 seconds was used as the duration of the animation to capture the entire color cycle, which will also capture two full revolutions of the model. A frame rate of 25 fps was used, giving a total of 200 frames. An image size of 512 px square was used, large enough to capture some detail and provide a decent basis for comparison. A continuously looping animation was created, using -loop 0 for most image files (-play 0 for APNG), or adding autoplay muted loop in the html video tag for the WebM files (some browsers will not autoplay a video unless it is muted, even if the video does not contain audio).

The platforms and browsers tested currently include:

Both lossless and lossy files were evaluated. For the lossy compression, the goal was not to produce the absolute smallest file size, but to to find some good default settings that will produce high quality files with a significant reduction in file size from lossless, and hopefully are not overly complicated (e.g. requiring multiple passes). Transparency support or handling was not evaluated, as Curv currently cannot produce files with transparency. The well-known cross-platform open source tools ffmpeg version "2024-04-10-git-0e4dfa4709-full_build-www.gyan.dev" and ImageMagick version "7.1.1-29 Q16-HDRI x64 0deac72:20240225" were used to create the animated files, as well as the open source APNG Optimizer version 1.4. The commands used to create the animated files are also provided below, so that you may replicate this work or use it as the basis for your own conversions.

The number and size of the files was starting to grow uncomfortably large on this page, and I was worried that bandwidth and resource issues might impact the results, so the image files have been split over several pages. This page shows the four best lossless formats, which may be all you need. The large (unoptimized) file size APNGs were moved to the large APNG page. The lossy formats were moved to the lossy page.

Command to generate the image sequence from Curv:
curv -o "img_*.png" -O xsize="512" -O animate="8" -O fdur="1/25" "OKtwistor.curv"
Total file size of image sequence (200 PNG files): 17,274 KB.


Lossless Compression


(1) - Lossless ffmpeg APNG, file size 21,254 KB.

Command:
ffmpeg -i "img_%03d.png" -r 25 -plays 0 -f apng OKtwistor_ffmpeg.apng

View on the large APNG page.

This looks excellent, and is the basis for subsequent quality comparisons. However, it is also the largest file size of those tested, so there is certainly room for improvement. It is surprising how much larger the APNG is than the source image sequence. Works fine on Windows 10 and iOS.


(2) - Lossless(?) ImageMagick APNG, file size 19,372 KB.

Command:
magick -delay 1x25 -loop 0 img_*.png APNG:OKtwistor_IM.apng

View on the large APNG page.

There are visible artifacts in the color gradients, indicating that this is not a lossless conversion! Has it been quantized? Despite the loss in quality, the file size is barely smaller than the ffmpeg APNG. Otherwise works fine on Windows 10 and iOS.


(3) - Lossless ffmpeg APNG optimized with open source APNG_Optimizer, file size 9,199 KB.

Command:
apngopt OKtwistor_ffmpeg.apng OKtwistor_ffmpeg_opt.apng

The quality looks the same as the original ffmpeg APNG, but the file size is less than half! Definitely a good trade-off. Works fine on Windows 10 and iOS.


(4) - Lossless ffmpeg WebP, file size 7,943 KB.

Command:
ffmpeg -i "img_%03d.png" -r 25 -loop 0 -lossless 1 -compression_level 6 OKtwistor_ffmpeg_lossless2.webp

The file size is the smallest of any of the lossless options. Works fine in Windows 10. The animation struggled and played very slowly on iOS, both in 16.7 and 17.4.


(5) - Lossless ffmpeg AVIF, file size 8,738 KB.

Command:
ffmpeg -i "img_%03d.png" -r 25 -loop 0 -crf 0 -c:v libaom-av1 OKtwistor_ffmpeg_lossless2.avif

Seems like the animation stuttered slightly under all three browsers on Windows 10, but it could be my imagination. On iOS 16.7 the image has a pink background, the colors are distorted, and the animation stutters and plays very slowly. On iOS 17.4 the background is white and the colors are correct, but the animation plays just as poorly.


(6) - Lossless ffmpeg WebM, file size 9,918 KB.

Command:
ffmpeg -i "img_%03d.png" -r 25 -lossless 1 OKtwistor_ffmpeg_lossless2.webm

The file size is larger than the optimized APNG, not to mention the WebP and AVIF lossless files. It played fine in Firefox and Chrome, and played fine in Edge after I added "muted" following "autoplay" in the video tag. However, it did not play in either iOS 16.7 or iOS 17.4, despite it supposedly being supported in the latter.


Lossy Compression


(7) - Lossy ImageMagick GIF, file size 5,556 KB.

Command:
magick -delay 1x25 -loop 0 img_*.png OKtwistor_IM.gif

View on the lossy page.

Yuck, the quantization artifacts are highly visible in the gradients. However, its file size is smaller than any of the lossless options, so at least there's that.


(8) - Lossy ffmpeg WebP, file size 4,447 KB.

Command:
ffmpeg -i "img_%03d.png" -r 25 -loop 0 -quality 100 OKtwistor_ffmpeg_lossy12.webp

View on the lossy page.

These settings are not recommended for use at this time. Something seems to be off about the version of ffmpeg tested, or I'm missing an option. I first compressed it using an old version of ffmpeg by mistake (it was earlier in my path), and the file size was much lower and the quality much better. When I recompressed using the latest version and the same settings, the file was much larger and worse quality. I had to set the quality to 100 or else horrible artifacts were evident right away, especially in the greens. It played fine in Windows 10, but iOS performance was similarly poor as the lossless version.


(9) - Lossy ffmpeg AVIF, file size 371 KB.

Command:
ffmpeg -i "img_%03d.png" -r 25 -loop 0 -crf 32 -c:v libaom-av1 OKtwistor_ffmpeg_lossy1.avif

View on the lossy page.

Similar performance as the lossless AVIF, but much smaller file size. The quality looks excellent, I'm having trouble identifying any perceptible visual artifacts.


(10) - Lossy ffmpeg WebM, VP9 codec, file size 730 KB.

Command:
ffmpeg -i "img_%03d.png" -r 25 -crf 32 -c:v libvpx-vp9 OKtwistor_ffmpeg_lossy3.webm

View on the lossy page.

Similar performance as the lossless WebM, but much smaller file size. The quality looks excellent, I'm having trouble identifying any perceptible visual artifacts. Did not play on either iOS version tested.


Conclusions


Lossless


For the best all-around support and quality, ffmpeg APNG optimized with apngopt is recommended as the animated file format of choice at this time. It's taken a while (20 years?), but APNG finally seems to be well-supported just about everywhere, including Apple devices. But always remember to optimize your APNGs! The difference can be dramatic. I was surprised by just how competitive file size-wise an optimized APNG file was to the more modern and advanced formats, and it was even smaller than WebM.

Lossless WebP is a great up-and-coming choice. It had the smallest file size of any of the lossless formats, at 86% of the size of the optimized APNG, and has decent browser support, but lost out for the top spot due to poor iOS support. Check back in a few years and this might just be in the top spot. It is still a great choice if you don't need to support iOS.

Lossless AVIF had a file size that was 95% that of the optimized APNG, which isn't really a great improvement, and its performance is worse, especially on iOS. This format may need more time for hardware and software support to catch up.

The biggest loser award has to go ImageMagick APNG, as not only did it not produce lossless files (automatic disqualification in the lossless category), but still had the 2nd to largest file size! Using ImageMagick to create APNGs is not recommended at this time; stick with the ffmpeg APNG option. Lossless WebM also deserves some shade for producing a larger file size than WebP, AVIF and the optimized APNG, with the added difficulty and reduced support of a video format.


Lossy


To start, it should be noted that none of the advanced formats played acceptably on iOS, so these are really only an option if iOS support is not required.

Both lossy WebM and lossy AVIF performed extremely well, producing high quality files under a megabyte, and the compression level is easy to tweak with a single number (-crf). AVIF did have a file size about half that of WebM, and as an image format is easier to use than a video format, so that would be my choice of the two. However, they are both great choices if you are able to use them.

As noted above, something is quite off with my current version of ffmpeg when it comes to lossy WebP, and these settings are not recommended to be used at this time. However, any combination of settings I tried with any version of ffmpeg always produced files larger and of worse visual quality than either WebM or AVIF, so this format is certainly the worst of the three. This makes sense, as its codec is older and less advanced then the other two

GIF is terrible, mostly because it cannot support full color, but if you absolutely need a lossy animation format with the widest support, it may still be the best (or only) choice. But really, try to use one of the other options in this shootout if at all possible.

Feedback

Did I get something wrong? Are there better commands I should be using? Let me know by opening an Issue on my Codeberg Pages!