Hacker News Reader

Comment by barbazoo | Hacker News Reader

I can roughly imagine how this works but is there a technical explanation anywhere how this is done?

Adam7[0] is an interlacing algorithm for PNG files. Without explaining what it does, it basically allows lower speed connections to see an image progressively get sharper instead of line by line. This made sense in the days of dialup speeds, but not much anymore.[a]

The trick here involves Adam7, but modern connections are too fast. So the network is artificially slowed so each subimage is a “frame”.

[0]: https://en.wikipedia.org/wiki/Adam7_algorithm

[a]: For example, a 56k modem loading a 100k image would take a quarter of a minute. Adam7 made that problem no so annoying.

I've just been trying to understand this. I believe the trick is in how with Adam7 there are progressively more pixels displayed with each pass. This allows you to make big changes from one pass to the next, even from almost completely white to almost completely black.

If you then interrupt the connection at the right point - directly after one pass - you can get these animations. But unlike a gif, once loaded they are no longer animated since they are done loading.

Edit: Also important here is the cache policy ('Cache-Control: no-store').

> This made sense in the days of dialup speeds, but not much anymore.[a]

I have Javascript disabled by default, and I notice a lot of websites (especially newspapers) initially have a blurry <img/>, and later replace it with the sharp image using JS. So there is clearly still a need for this feature, even if web developers don't know about it.

That might have more to do with the variety of screen resolutions than progressive loading per se

The HTML IMG tag also has a "lowsrc" attribute, that is sadly deprecated now.

There's also a proposal for a loading="lazyload" attribute value to allow images to load when scrolled into view https://css-tricks.com/a-native-lazy-load-for-the-web-platfo... https://caniuse.com/loading-lazy-attr

A bit late of a reply, but <picture> allows specifying multiple sizes of images. Which one will be downloaded depends on the criteria the developer set (generally based on the page or rendered image dimensions).

Part of the problem with Adam7 interlacing is that it interacts poorly with compression. The compressor operates on the image data after filtering and interlacing; enabling interlacing means that there is a much weaker relationship between each pixel and the neighboring pixels in the image stream.

As a lot of these replies mention - it's using interlacing to print frames using PNG.

Something I think is interesting here also, the server is holding each frame for two seconds before it sends that chunk to the browser, so the animation would look similar regardless of connection speed (2 seconds per frame + your browser's actually latency to the server)

It'd be nice to control the interval via a get parameter. Sure one could record and frame-by-frame it, but it'd be pretty easy on their side to have the uri default to something like `/interval/2/`. Maybe they thought of this, maybe it increases surface are...I think it'd be worthwhile for accessibility.

I believe he's just taking advantage of how interlacing works in png to create this effect. As you load the higher resolution, the image changes drastically in this case.

https://graphicdesign.stackexchange.com/questions/6677/what-...

Reply on news.ycombinator.com