I recently experienced this as follows: https://www.sublimetext.com https://www.sublimetext.com has an animation which is drawn via JavaScript. In essence, it l

I recently experienced this as follows: https://www.sublimetext.com https://www.sublimetext.com has an animation which is drawn via JavaScript. In essence, it loads a huge .png [1] that contains all the image parts that change during the animation, then uses <canvas> to draw them. I wanted to recreate this for the home page of my file manager [2]. The best I could come up with was [3]. This PNG is 900KB in size. The H.264 .mp4 I now have on the home page is only 200 KB in size (though admittedly in worse quality). It's tough to beat a technology that has seen so much optimization! 1: http://www.sublimetext.com/anim/rename2_packed.png http://www.sublimetext.com/anim/rename2_packed.png 2: https://fman.io https://fman.io 3: https://www.dropbox.com/s/89inzvt161uo1m8/out.png?dl=0 https://www.dropbox.com/s/89inzvt161uo1m8/out.png?dl=0