Check out my
new book!
HTML5 Games book
8 kilobytes of Mario
So, I had this stupid idea for a rather alternative way to compress things like Javascript using the canvas element. Using this technique, the small 14 KB Super Mario game I previously posted now only takes up about 8 KB.
The files involved are a PNG file and a small Javascript file. In short, the real Javascript is embedded in the PNG file and then read and executed by the small JS file. I will post more about this compression later.
The reason it's a somewhat stupid idea (or one of the reasons, anyway), is that it's only supported by canvas enabled browsers and only those that implement the getImageData method, which renders it pretty useless for real life use at this point.

For now, that means only Firefox, Opera Beta and the recent WebKit nightlies work.

Check it out here
⇓ 19 comments Michel

Your work is absolutely incredible. I'm a big fan.

May 4, 2008 at 7:08 AM

Problems using Fx3 (Build: 2008050206)

syntax error
Line 3

May 4, 2008 at 7:13 AM


May 4, 2008 at 8:32 AM
Jacob Seidelin


@execvator: Works fine for me. Don't know what causes your error.

May 4, 2008 at 10:35 PM

nihilogic - the best!

May 5, 2008 at 2:15 AM

Sorry about that, works great now with build 2008050406. The previous one just gave me something that looked like utf-8 'encoded' as us-ascii.
Anyway, really great idea and nice work as always!

May 5, 2008 at 5:05 AM

You sir, are crazy! Keep up the good work. Much respect. Unfortunately you're probably going to get a few hacker types fiddling with this idea now for embedding exploit code - though since IE doesn't support this, perhaps it's still fairly safe. ;)

May 5, 2008 at 8:36 AM
Mathieu 'p01' Henri

FWIW the irony of encoding a PNG in JS, encode the JS in PNG then decode the PNG in JS to generate a PNG is not lost on me :)

May 6, 2008 at 1:45 AM
Jacob Seidelin

Hah, you're quite right.

Hm. Maybe I can rework it to have code, sprites and music stored next to each other in the same PNG and just reference the offsets from the code.

May 6, 2008 at 2:08 AM

Awesome! :)

May 12, 2008 at 8:28 AM
Free Xbox 360 Elite

Aww, no flag at the end ? :(

Still, awesome that you made it even smaller than the last time.

May 15, 2008 at 3:08 AM

You sir, are a genius!
It's a pity so many people still use IE/non-canvas browsers, otherwise the web could advance much further, and with something like processing.js, do away with flash. Keep up the great experimentation.

August 23, 2008 at 6:14 AM

Marie the best !!

August 26, 2008 at 8:26 AM

Amazing :) cool idea

November 17, 2008 at 6:26 AM

That's absolutely insane, I really need to increase my programming knowledge, this is exactly the kind of stuff I want to be able to do.

October 26, 2009 at 8:17 PM

Amazing work, it's just a shame that you hide the source code so that others can learn from you.

This has everything you need to make a real game. Image loading, image moving, good use of variables, basic collision, and terrain scrolling.

Could you please make the source public so that we can learn?

November 25, 2009 at 9:29 PM

Neat, but this is just gzip compressing the code in a less efficient way than using the browsers built in gzip support (which runs on all browsers):

$ ls -lh mario_compressed.js.gz
-rw-r----- 1 hearn eng 7.1K Apr 9 2008 mario_compressed.js.gz

So you can have this size improvement just by tweaking your server config. No PNGs required.

March 2, 2010 at 5:23 AM
Jacob Seidelin


March 2, 2010 at 5:48 AM

I had problems.
1. Every block, even ones with mushrooms, give you coins.
2. I got ahead of the scroll and it locked up.
3. At the end, there was a block, no flagpole, and a big white space.

January 26, 2011 at 12:32 PM
Post a Comment