PNG files can be animated via network latency

  • Author here - this was just a quick PoC, I'm pleasently surprised that it seems to be handling all the HN traffic.

    It's served from a python script using aiohttp, behind nginx, on a $16/year VPS.

    I might make a github repo with more details, but in the meantime, here's the server script: https://pastebin.com/ykUeppqc (apologies for pastebin, I don't have access to my github account at present)

    Just in case the server dies, there's a video of it here: https://twitter.com/David3141593/status/1388602027484356614

  • Fun fact: similar things, but much more general, were in the HTTP/1.1 standard from 1997. However, HTTP frames relied on HTTP chunks, which were fundamentally broken in the Win-HTTP-stack implementation. (Third party browsers like Netscape Navigator or Opera implemented a HTTP-stack of their own, but IE relied on the built-in implementation.)

    (Because of this flaw, keep-alive was broken, as well, and requests stalled until they timed out. Which is, why everyone set the request timeout to just a short period and you couldn't type a HTTP request manually in a terminal anymore.)

  • A great example of doing something unintended by exploiting one's knowledge of the system. Awesome!

  • Pretty neat. That sent me on a brief hunt out to see how it might work. It seems that PNG (including APNG) has a fairly easy to follow pattern of chunks. So this could be a fairly simple cgi-bin type script that just does a "sleep(2)" or similar when it encounters a fcTL (frame control) chunk.

    See https://pyokagan.name/blog/2019-10-14-png/ for a good overview of how you might walk over PNG chunks.

  • For background https://en.m.wikipedia.org/wiki/Adam7_algorithm

  • poor unappreciated APNG :(

  • This reminds me of adding an animated gif (that's a video of someone else) as my background in Zoom or other conferencing software. The result is that people won't see "me" but someone else when my camera is turned-off.

  • Shameless self promotion: Did a video recently that explores how various image formats look as they load https://youtu.be/-7k3H2GxE5E.

    Includes adam7 PNG (used here), but covers other browser image formats + JPEG-XL.

  • This is cool! It's interesting to see how programs handle this - the thumbnail in a specific gallery app on my Android phone is the first "frame", while it's the finished image in my file explorer.

  • I am having flashbacks to the dial-up BBS days of the late 80s, where I made a decent local living designing animated logon screens for various sites in exchange for access to said sites. Had to optimize character animations based on the baud rate of the inbound modem connection, separate versions for 1200 and 2400 baud.

  • Long ago I was making node server which served partials of progressive JPEG files, stopping at IIRC the SOS headers. I had an 'enhance' button that worked. :)

    It would have worked even better with JPEG 2000, but browsers killed that off for some reason. I miss the old Netscape days.

  • But can I play Doom on it?

  • This progressive delivery technique was also used here: https://www.ioccc.org/years.html#2013_mills

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

  • Neat :) There's no way to do something similar with jpegs interlacing is there?

  • Safari on iPhone X / iOS 14.6

    All I see is a slow loading blank page and then the final frame.

  • Hah! From the right tool for the job dept!

  • optimize the png bitfields for gan transcoder and you got low cost twitch stream network

    ps: eos

  • Oh, really! Is this true?

  • Can it be used to playback a movie?

  • Apng or animated webp are more suited for this though

  • Amazing hack, this is totally in the spirit of Hackernews, I wish there were more posts like this and less political, news centric stories.

    I wonder if it is possible to completely remove opacity of old frames.