I recently experienced this as follows: 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!
You could give FLIF [1] a try. With the help of Poly-FLIF [2] you can render it in the browser. Don't forget to try the lossy mode, it gives better compression with negligible loss in quality.
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
2: https://fman.io
3: https://www.dropbox.com/s/89inzvt161uo1m8/out.png?dl=0