Yes, if you look at the demo, the "progressive" AVIF loads a visible image at 8.5KB, and at that point, it looks better than the progressive JXL. However, that is ALL the AVIF shows until the image has fully loaded. At around 98KB, the JXL looks significantly better, and at around 240KB already looks really close to the final image, while the AVIF still looks terrible. At 280KB when the AVIF finally loads, they look identical.
BTW, you can configure the AVIF encoder to have another in-between pass or two so the quality jump isn't as big. The JXL folks just happened to go with only two total passes.
I prefer the UX of the AVIF example here. I think it's better to have a progressive phase where the image is obviously "not ready", yet you can still determine important details like the subject of the image (unlike a blurhash), rather than a phase that you could mistake for complete, but looks bad in parts.
Progressive rendering is just a different way to layout the pixel data. Embedding a thumbnail is storing two distinct images. In other words, progressive rendering should be more efficient space and bandwidth-wise.
The DC coefficients in a progressive JPEG are literally an embedded thumbnail (a 1:64 copy of the original) right? Is the question if the second "layer" replaces the thumbnail or layers corrections on top of it? It wasn't clear to me which AVIF does.
Of course it does, with one you have to render twice and store two layers which costs you both compute and storage. With the other you can just take the image mid decode at a point and display it. Single decode operation, no layer mess.
You have to render twice and have 2 different layers in both scenarios. Writing to a buffer / layer is not an atomic operation so they need to be separated.
The difference matters, as it means that AVIF's "progressive decoding" serves no technical benefit and is only a minor ergonomic benefit: On a website, you could achieve the same effect simply by layering two <img> elements on top of each other, one with the thumbnail and one with the final image.
If layering to <img> elements is fine for your use case, then it simply means you have no need for progressive decoding.
Yes, if you look at the demo, the "progressive" AVIF loads a visible image at 8.5KB, and at that point, it looks better than the progressive JXL. However, that is ALL the AVIF shows until the image has fully loaded. At around 98KB, the JXL looks significantly better, and at around 240KB already looks really close to the final image, while the AVIF still looks terrible. At 280KB when the AVIF finally loads, they look identical.
BTW, you can configure the AVIF encoder to have another in-between pass or two so the quality jump isn't as big. The JXL folks just happened to go with only two total passes.
Won't that increase the total size of the image for each pass?
3 replies →
I prefer the UX of the AVIF example here. I think it's better to have a progressive phase where the image is obviously "not ready", yet you can still determine important details like the subject of the image (unlike a blurhash), rather than a phase that you could mistake for complete, but looks bad in parts.
Which sounds very useful if your connection is slow enough to make use of progressive image decoding. (Often enough the case for me.)
Progressive rendering is just a different way to layout the pixel data. Embedding a thumbnail is storing two distinct images. In other words, progressive rendering should be more efficient space and bandwidth-wise.
The DC coefficients in a progressive JPEG are literally an embedded thumbnail (a 1:64 copy of the original) right? Is the question if the second "layer" replaces the thumbnail or layers corrections on top of it? It wasn't clear to me which AVIF does.
Of course it does, with one you have to render twice and store two layers which costs you both compute and storage. With the other you can just take the image mid decode at a point and display it. Single decode operation, no layer mess.
You have to render twice and have 2 different layers in both scenarios. Writing to a buffer / layer is not an atomic operation so they need to be separated.
The difference matters, as it means that AVIF's "progressive decoding" serves no technical benefit and is only a minor ergonomic benefit: On a website, you could achieve the same effect simply by layering two <img> elements on top of each other, one with the thumbnail and one with the final image.
If layering to <img> elements is fine for your use case, then it simply means you have no need for progressive decoding.