I spent some time between projects today exploring the idea of progressive image decoding using the VP9 video codec -- sort of a mashup of progressive JPEG and WebP.

Like a progressive JPEG, each resolution step (a separate frame of the "video") encodes only the differences from the previous resolution step. Like WebP, it's more space-efficient than the ancient JPEG codec.

This sort of technique might be useful for lazy-loading images in our modern internet, where screen densities keep going up and network speeds can vary by a factor of thousands. On a slow network the user sees immediate feedback during load, and on a fast network they can reach full resolution quickly, still in less bandwidth than a JPEG. And since JS would have control of loading, we can halt cleanly if the image scrolls offscreen, or pick a maximum resolution based on actual network speed.

Detail notes on my blog:

Sample page if you just want to look at some decoded images at various resolutions (loading not optimized for slow networks yet!):

It looks plausible, and should be able to use native VP9 decoding in Firefox, Chrome, and eventually MS Edge in some configurations with a JavaScript fallback for Safari/etc. Currently my demo just plops all the frames into a single .webm, but to avoid loading unneeded high-resolution frames they should eventually be in separate files.

-- brion