4 ms·
>Everyone loves the "responsive loading" feature, but > that's not even the novel thing about the format >(JPEG 2000 did it even better — 16 years ago)!
by ktRolster 11y ago
>Everyone loves the "responsive loading" feature, but
> that's not even the novel thing about the format
>(JPEG 2000 did it even better — 16 years ago)!
Interlaced GIFs did it ~30 years ago.
- acdha 11y agoThat's not quite the same: an interlaced GIF loads with gaps and still requires a fair amount of data to be loaded before it can start displaying. JPEG 2000's approach provides successively finer detail so the entire image can be rendered after only a small percentage of the total data has been received and then it just becomes sharper as data continues to stream in. If the rollout hadn't been so unsuccessful, this would have been a great answer for responsive images since you could have a single image served (and cached on your CDN) and clients could make ranged requests for the first n bytes based on the displayed size.
- ktRolster 11y agoJPEG 2000's approach provides successively finer detail so the entire image can be rendered after only a small percentage of the total data has been received and then it just becomes sharper as data continues to stream in. If you'd ever watched an interlaced GIF arrive over a slow connection, that's exactly how it looks.
- acdha 11y agoI've watched plenty of GIFs trickle in – over a 1200 bps modem back in the day – and it's not the same. An interlaced GIF displays every other line first, leaving a visible comb pattern between the lines until the rest of the data loads which is visually quite distracting unless the background is transparent or a compatible color with the image content. Here's what interlacing looks like, with whole areas being empty until the data is received: https://commons.wikimedia.org/wiki/File:Adam7_passes.gif https://commons.wikimedia.org/wiki/File:Adam7_passes.gif With something like JPEG 2000, you have a completely experience because the image renders immediately with less detail and becomes sharper. Using this example from Wikipedia, it'd basically start with the 1:100 frame on the bottom and rerender as data streams in until hitting the final 1:1 quality at the top: https://upload.wikimedia.org/wikipedia/commons/7/78/JPEG_2000_Artifacts_Demonstration.png https://upload.wikimedia.org/wikipedia/commons/7/78/JPEG_200...