Back to Interop 2027 proposals

Progressive image rendering for JPEG XL and AVIF

When we looked into JPEG XL, I asked developers why they were interested in the format, and the most common answer was "progressive rendering". This is now working in Firefox and Chrome, but doesn't work in Safari.

In addition to this, AVIF's progressive decode became much more viable this year following enhancements to the avifenc encoder. Currently, Chrome is the only browser that supports rendering the intermediate steps (demo).

I propose this as a focus area, so we get good progressive decoding support across both formats.

Discussion on GitHub (4)

What's the status of this for older formats such as JPEG and PNG which also have progressive capabilities? additionally If not done so already I feel like there would be merit in also checking basic incremental decoding capabilities across all the formats that support such a thing (formats which support it as a fallback when encoded in a non-progressive way or just in general if a format lacks fancy progressive fully but can do incremental) such as BMP, GIF, JPEG, PNG, WebP, and JXL (AVIF from what I have seen does not support incremental decoding? unsure if this is a format or implementation limit).

One of the reasons I bring up incremental decoding (aka top-down/interlaced) is because browsers seem to struggle a tiny bit with consistency in this regard. for example on a site like https://google.github.io/attention-center/ when loading formats such as non-progressive baseline JPEGs, basic PNGs, and static GIFs everything seems to work fine across browsers, however when trying any WebP files nothing shows up unless the slider is at 100%. this issue does not show up when using https://random-stuff.jakearchibald.com/apps/partial-img-decode/ or when WebP files are getting streamed over the network.

What's the status of this for older formats such as JPEG and PNG which also have progressive capabilities?

See https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/.

(AVIF from what I have seen does not support incremental decoding? unsure if this is a format or implementation limit).

It does. Here are the WPTs I filed https://github.com/web-platform-tests/wpt/pull/62764

this issue does not show up when using https://random-stuff.jakearchibald.com/apps/partial-img-decode/ or when WebP files are getting streamed over the network.

This sounds like a failure in the other test page. https://random-stuff.jakearchibald.com/apps/partial-img-decode/ uses real browser internals to partially render the image.

What's the status of this for older formats such as JPEG and PNG which also have progressive capabilities?

See jakearchibald.com/2025/present-and-future-of-progressive-image-rendering.

I meant more so in the context of WPT. for example it was recently discovered that Chrome's new Rust based decoding of PNGs wasn't setup to properly progressively decode Adam7 interlaced encodes which was only found out because someone randomly discovered it wasn't working and reported it rather then any tests catching the problem. (formal issue ticket created after off-site informal report: https://issues.chromium.org/issues/544376750)

(AVIF from what I have seen does not support incremental decoding? unsure if this is a format or implementation limit).

It does. Here are the WPTs I filed web-platform-tests/wpt#62764

I'm not quite sure if this is the same thing? by "incremental" I meant pieces/parts of the full/final image coming in instead of any type of lower quality bits/pieces coming in and then getting refinement. for example non-Adam7 PNGs, baseline JPEGs, non-interlaced static GIFs, and WebPs load top-down while interlaced static GIFs seem to load every other line/scanline, and non-progressive JXLs load full tiles.

this issue does not show up when using random-stuff.jakearchibald.com/apps/partial-img-decode or when WebP files are getting streamed over the network.

This sounds like a failure in the other test page. random-stuff.jakearchibald.com/apps/partial-img-decode uses real browser internals to partially render the image.

I wasn't sure if the failure was generic enough to warrant a further investigation or not. fwiw here's what the failing site is doing: https://github.com/google/attention-center/blob/main/docs/index.md?plain=1