Support Progressive AVIF

[tongyuantongyu]

Is your feature request related to a problem? Please describe. It's widely considered a weakness that AVIF does not support progressive rendering. But actually, AVIF does support it. Try the following image, which will render progressively on Chrome, if you are on a slow connection.

Describe the solution you'd like The support for encoding progressive image is in libavif for quite a while. Squoosh can leverage that to provide options to produce progressive AVIF images.

Does other service/app have this feature? libavif API support this feature. I have an open PR to support progressive encoding from avifenc command line: https://github.com/AOMediaCodec/libavif/pull/1450. With that PR the image above can be encoded with the following command:

convert photo.jpg -resize 2% -blur 0x2 -resize 3872x2592! photo-blur.png
avifenc -s 3 -j 24 -y 420 -a denoise-noise-level=50 -a end-usage=cbr --sharpyuv --cicp 1/13/1 --layer 3 --ignore-exif \
 -q 50 --scaling-mode 1/4 photo-blur.png \
 -q 10 --scaling-mode 1/2 photo.jpg \
 -q 50 --scaling-mode 1 photo.jpg photo.avif

Additional context "Progressive" in AVIF works quite different from progressive in other formats. A better way is to think it as a video (or animation), but marked as display_next_frame_as_soon_as_possible and stop_at_last_frame. This also means:

• The rendering is progressive, but not incremental. You can have at most 4 progressive stages (called layer in AVIF).
• You can set each layer to have different quality.
• Different layers can have different resolutions.
• Layers do not necessarily to be the same. The AV1 encoder will try to save size if it found something reusable between layers, or encode whatever given if failed to do so, just like encoding videos.
• You probably want -a end-usage=cbr so that change to quality setting is immediately and fully reflected in the next encoded layer.