PNG renders top to bottom but the interlaced mode increase significantly the file size. WebP too at 28%.

AVIF has a progressive flag for it. It creates two layers. One at 1/8th resolution and minimum quality and one at full resolution and good quality. The first layer has 5.8kB as example, and the full image is 151kB. It's still experimental with avifenc.

JPEG XL (abbreviated JXL) renders on Chrome at 39% of the file.

The AVIF image provided as example is 56.4kB, which is incredible for a more than HD image.
For many images, there's little benefit to progressive rendering (the fox with many details is an exception). So progressive rendering is often a mix of good and bad luck.

The author claims JXL progressive rendering promises won't work, because there is a significant lag between each of the progressive rendering steps. It can work efficiently with srcset for example.

JXL still looks promising, but the AVIF progressive rendering of the fox is somewhat better than the 17-27kB alternative of JXL.

Note: a post-processed blur on a scaled down image results in 2kB. 10kB makes the image "acceptable" for the human eyes. The image is still pretty good for previews. The post-process blur would need to be part of the format, rather than left to something like CSS to make JXL.

and because it's an entirely separate image, the decoding overhead is zero if the browser doesn't see a benefit to displaying the preview. As in, in cases where the browser has the whole file, it can just skip the preview.

I will have to look after the AVIF format, because it seems to be the best of Webp (20-30% better compression), GIF (with animation) and better image quality than JPEG.
See the german wikipedia page or the english one

oavif is a tool for target quality AVIF encoding using fssimu2, a fast perceptual image quality metric.

The project is hosted at https://github.com/gianni-rosato/oavif