This is a sneaky trick. It was devised by Jacob Seidelin at Nihilogic.dk and has been used by some participants in the 10K An Event Apart competition, though there is some contention as to whether it’s in keeping with the spirit of the event.
That said, it’s interesting to see how it’s done, so let’s have a look. Here are the steps:
1. Minimize your application
Web developer Cal Henderson has published his research and PHP/Perl code that converts code to an image using various formats such as 1-bit, 8-bit, 24-bit, and so on. You can view the jQuery library as a 1-bit square here.
The PNG can be reduced in size further using tools such as Smush.it and PNGOUT.
3. Extract the code from the image
We now need to load the image and convert it back to executable code. This can be achieved by loading the image into a
canvas element using the
drawImage() method. Individual pixels are then read using
getImageData(), and converted to a string that can be passed to
eval() or embedded into the DOM.
Results vary, but file size savings of 75% can be achieved. In a few cases, the image format can beat files compressed with Gzip. So you could enter the 10K competition with 40Kb of code!
Does this have a real-world use?
So, apart from cheating at contests, does this technique have any real-world application? It’s an interesting hack, but Gzipping source files on the server will normally result in better compression and it’s far easier to implement.
However, I could see the technique being used for steganography, or to encrypt sensitive code from novice hackers. Very cool, but would you use it?