[HN Gopher] PNG files can be animated via network latency
___________________________________________________________________
PNG files can be animated via network latency
Author : aleyan
Score : 295 points
Date : 2021-06-21 14:54 UTC (2 days ago)
(HTM) web link (www.da.vidbuchanan.co.uk)
(TXT) w3m dump (www.da.vidbuchanan.co.uk)
| ganzuul wrote:
| 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.
| zitterbewegung wrote:
| Motion JPEGs are widely used in surveillance systems. If you
| can hack into the system using an GIF you can loop the output
| since the website doesn't enforce file type.
| mananaysiempre wrote:
| The reason is patents. The JPEG people made sure everything
| they produced after JPEG proper was irrelevant for the open Web
| by patenting it to hell and back. (Even JPEG is only recently
| freely implementable in full, because it has a better mode with
| arithmetic coding instead of Huffman that nobody uses in order
| to avoid patents.) I've heard there's also a small issue where
| a naive JPEG 2000 decoder would produce images that look less
| sharp even if they're nominally better (cf. similar issues with
| H.264, mentioned at
| <https://news.ycombinator.com/item?id=16615962>), but the
| patents is the big one.
|
| Now browsers (specifically Firefox) making sure MNG (the
| better-designed animated sibling of PNG) never got off the
| ground is not such a good look for them.
| anfractuosity wrote:
| Neat :) There's no way to do something similar with jpegs
| interlacing is there?
| IncRnd wrote:
| 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.
| yobert wrote:
| But can I play Doom on it?
| thepete2 wrote:
| Great question. So you're limited by the 5 or so frames you
| have at maximum. I would just put the png in a html page that
| auto-refreshes every second. And then a bit of javascript for
| the controls. But at that points it's more doom on HTML5 than
| png doom ...
| remram wrote:
| No need to refresh, you can use multipart/x-mixed-replace to
| keep serving new images forever over the same HTTP request.
| This is not specific to PNG though.
| rozab wrote:
| poor unappreciated APNG :(
| chrismorgan wrote:
| And it's even supported across the board now:
| https://caniuse.com/apng
| orliesaurus wrote:
| I think imgur was using apng for a while before moving to
| webm/mp4
| emptyparadise wrote:
| I hate how every website is replacing gifs with videos you
| can't just right click to download.
| recursive wrote:
| Images and videos can both be downloaded by right click.
| Also, both of them can be configured not to work that way
| by html/css structure. It's not a difference between image
| vs video.
| egfx wrote:
| Yes this was one of the reasons I built gif.com.ai - GIFs
| are a special format and my intention for the app was to
| retain a gif as just that. When you generate a gif you get
| an Imgur copy and it sometimes formats the gifs to videos
| but that's not a problem because you can get the original
| gif format back by adding "i" in the url prefix and adding
| ".gif" to the end of the url.
| Black101 wrote:
| For the same quality, the videos take a lot less space then
| the gifs though... Also, you can unblock the right-click
| blocking
| swebs wrote:
| I just tried it on Imgur and was able to right click ->
| "Save video as". But yeah, I have seen a lot of more scummy
| sites do what you described.
| cooljacob204 wrote:
| I have seen a few overlay empty divs over an image/video.
| Very frustrating behavior.
| duskwuff wrote:
| That's hardly new, though. Flickr has been doing that for
| ages.
| jrockway wrote:
| I've kind of expected that you have to open the DOM
| inspector to find image links these days. Not sure what
| they think they're protecting, but the protection doesn't
| work.
|
| (Reminds me of sites that disable pasting in passwords
| from your password manager, so you have to have xdotool
| type them for you. Again, not sure what they think
| they're saving me from. And I'm not sure why browsers
| have APIs that allow this sort of thing.)
| Lammy wrote:
| But then you might be able to re-share "their" content
| without subjecting your friends to that website's ads and
| that website's tracking (but I repeat myself)
| exikyut wrote:
| That's just using the blob API likely. Nothing stopping you
| src'ing an <img> tag with one of those.
|
| If the page you're on can survive a reload, you can often
| find the interesting mp4/m3u8 request in the devtools
| network tab. You probably knew this already.
| nsgi wrote:
| Videos are much more efficient than apngs or gifs, though,
| and it's just as easy to allow downloads (unless they're
| using variable bitrates which are a bit pointless for short
| animations anyway)
| staplers wrote:
| Most messaging platforms/chatrooms won't autoplay video.
| Which in the context of quick "reactions" doesn't work
| well at all.
| gsich wrote:
| Unless they have a loop indicator in the file it's not a
| GIF replacement.
| ben0x539 wrote:
| It's just as easy to allow downloads, but it seems a lot
| more common for sites to go out of their way to disallow
| video downloads than gif downloads. Also a bunch of them
| use video tags that don't point to an actual video file
| but get fed video content out of band.
| ganzuul wrote:
| (Are we talking about Reddit's terrible videos?)
|
| I would have expected them to have fixed the obvious
| issue with their UI by now.
| soheil wrote:
| 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.
| jmkjaer wrote:
| 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.
| chronotis wrote:
| 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.
| tyingq wrote:
| 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.
| teknopaul wrote:
| .gif and quite a few formats support this kinda trick. It's by
| design. In the olden days the Web was not served at 400mb/s.
|
| Even the day--old jpeg xl support such hacks.
| bawolff wrote:
| I think the difference is that png uses a more complex
| interlacing algorithm (adam7) which makes it easier to do
| these kind of effects.
| [deleted]
| masswerk wrote:
| 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.)
| bawolff wrote:
| If you mean multipart/x-mixed-replace, that's still a part of
| the html5 spec.
| ComputerGuru wrote:
| Barely. Google nerfed it and now it is only supported for
| images. You could do full-on chat without JS by using it for
| the html itself previously.
| bawolff wrote:
| I remember back in the day using cgi:irc, i guess it must
| have used something like that.
| masswerk wrote:
| I actually wrote such a chat (infamously named "chat-
| stream"), about 2 pages of Perl... :-)
| statico wrote:
| An example of that is the clock on this page:
| https://www.plover.com/~mjd/swatch.html
| masswerk wrote:
| I wouldn't know a browser that would still support it.
| Because of said issues, it didn't see any significant use
| (apart from a few enthusiastic experiments early on.)
| thepete2 wrote:
| A great example of doing something unintended by exploiting one's
| knowledge of the system. Awesome!
| The_rationalist wrote:
| Apng or animated webp are more suited for this though
| ben0x539 wrote:
| mjpeg really, right?
| soheil wrote:
| Can it be used to playback a movie?
| barbazoo wrote:
| I can roughly imagine how this works but is there a technical
| explanation anywhere how this is done?
| colejohnson66 wrote:
| 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.
| thepete2 wrote:
| 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').
| duskwuff wrote:
| 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.
| progval wrote:
| > 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.
| firethief wrote:
| That might have more to do with the variety of screen
| resolutions than progressive loading per se
| cowvin wrote:
| 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-...
| roberttod wrote:
| 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)
| balancemayvary wrote:
| 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.
| bawolff wrote:
| For background https://en.m.wikipedia.org/wiki/Adam7_algorithm
| codetrotter wrote:
| Safari on iPhone X / iOS 14.6
|
| All I see is a slow loading blank page and then the final frame.
| thepete2 wrote:
| It no longer works for me either. Try again later, it could
| just be overloaded.
| omoikane wrote:
| This progressive delivery technique was also used here:
| https://www.ioccc.org/years.html#2013_mills
| faeyanpiraat wrote:
| Is there a video of that working?
| [deleted]
___________________________________________________________________
(page generated 2021-06-23 23:00 UTC)