TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

PNG files can be animated via network latency

511 pointsby aleyanalmost 4 years ago

22 comments

DavidBuchananalmost 4 years ago
Author here - this was just a quick PoC, I&#x27;m pleasently surprised that it seems to be handling all the HN traffic.<p>It&#x27;s served from a python script using aiohttp, behind nginx, on a $16&#x2F;year VPS.<p>I might make a github repo with more details, but in the meantime, here&#x27;s the server script: <a href="https:&#x2F;&#x2F;pastebin.com&#x2F;ykUeppqc" rel="nofollow">https:&#x2F;&#x2F;pastebin.com&#x2F;ykUeppqc</a> (apologies for pastebin, I don&#x27;t have access to my github account at present)<p>Just in case the server dies, there&#x27;s a video of it here: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;David3141593&#x2F;status&#x2F;1388602027484356614" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;David3141593&#x2F;status&#x2F;1388602027484356614</a>
评论 #27612806 未加载
评论 #27614114 未加载
评论 #27615747 未加载
masswerkalmost 4 years ago
Fun fact: similar things, but much more general, were in the HTTP&#x2F;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.)<p>(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&#x27;t type a HTTP request manually in a terminal anymore.)
评论 #27609771 未加载
thepete2almost 4 years ago
A great example of doing something unintended by exploiting one&#x27;s knowledge of the system. Awesome!
评论 #27612275 未加载
tyingqalmost 4 years ago
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 &quot;sleep(2)&quot; or similar when it encounters a fcTL (frame control) chunk.<p>See <a href="https:&#x2F;&#x2F;pyokagan.name&#x2F;blog&#x2F;2019-10-14-png&#x2F;" rel="nofollow">https:&#x2F;&#x2F;pyokagan.name&#x2F;blog&#x2F;2019-10-14-png&#x2F;</a> for a good overview of how you might walk over PNG chunks.
评论 #27607288 未加载
bawolffalmost 4 years ago
For background <a href="https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Adam7_algorithm" rel="nofollow">https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Adam7_algorithm</a>
rozabalmost 4 years ago
poor unappreciated APNG :(
评论 #27606877 未加载
评论 #27606912 未加载
IncRndalmost 4 years ago
This reminds me of adding an animated gif (that&#x27;s a video of someone else) as my background in Zoom or other conferencing software. The result is that people won&#x27;t see &quot;me&quot; but someone else when my camera is turned-off.
jaffathecakealmost 4 years ago
Shameless self promotion: Did a video recently that explores how various image formats look as they load <a href="https:&#x2F;&#x2F;youtu.be&#x2F;-7k3H2GxE5E" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;-7k3H2GxE5E</a>.<p>Includes adam7 PNG (used here), but covers other browser image formats + JPEG-XL.
评论 #27614522 未加载
评论 #27624673 未加载
jmkjaeralmost 4 years ago
This is cool! It&#x27;s interesting to see how programs handle this - the thumbnail in a specific gallery app on my Android phone is the first &quot;frame&quot;, while it&#x27;s the finished image in my file explorer.
chronotisalmost 4 years ago
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.
ganzuulalmost 4 years ago
Long ago I was making node server which served partials of progressive JPEG files, stopping at IIRC the SOS headers. I had an &#x27;enhance&#x27; button that worked. :)<p>It would have worked even better with JPEG 2000, but browsers killed that off for some reason. I miss the old Netscape days.
评论 #27609545 未加载
评论 #27609284 未加载
yobertalmost 4 years ago
But can I play Doom on it?
评论 #27607776 未加载
omoikanealmost 4 years ago
This progressive delivery technique was also used here: <a href="https:&#x2F;&#x2F;www.ioccc.org&#x2F;years.html#2013_mills" rel="nofollow">https:&#x2F;&#x2F;www.ioccc.org&#x2F;years.html#2013_mills</a>
评论 #27608087 未加载
barbazooalmost 4 years ago
I can roughly imagine how this works but is there a technical explanation anywhere how this is done?
评论 #27606799 未加载
评论 #27606944 未加载
评论 #27606815 未加载
anfractuosityalmost 4 years ago
Neat :) There&#x27;s no way to do something similar with jpegs interlacing is there?
评论 #27613195 未加载
codetrotteralmost 4 years ago
Safari on iPhone X &#x2F; iOS 14.6<p>All I see is a slow loading blank page and then the final frame.
评论 #27606952 未加载
exabrialalmost 4 years ago
Hah! From the right tool for the job dept!
ellis0nalmost 4 years ago
optimize the png bitfields for gan transcoder and you got low cost twitch stream network<p>ps: eos
crestinfosysalmost 4 years ago
Oh, really! Is this true?
soheilalmost 4 years ago
Can it be used to playback a movie?
The_rationalistalmost 4 years ago
Apng or animated webp are more suited for this though
评论 #27611598 未加载
soheilalmost 4 years ago
Amazing hack, this is totally in the spirit of Hackernews, I wish there were more posts like this and less political, news centric stories.<p>I wonder if it is possible to completely remove opacity of old frames.