Compression using Canvas and PNG

This is one crazy web coding idea to compress web data! If you want to compress JavaScript and CSS you could reverse engineer a packing algorithm in JavaScript or you could use a lossless packing system that is already in use and supported in browsers (and designed for completely different things).

Compression using Canvas and PNG-embedded data article presents a method that allows packing the 124 kilobyte Prototype library embedded in a 30 kilobyte 8 bit PNG image file. The data inside PNG image is and read out with JavaScript using the getImageData() method on the canvas element.

Want to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvas provides some practical code examples to do that.

It is pretty amazing how efficient this way of packing is. PNG picture standard selected good loss-less coding system and it is used here.