Pixel art, episode 2: Display the map 1-1 of Super Mario Bros

Question

Last challenge (Pixel-art, episode 1: display Super Mario) was just a training... (and you completed it in amazing ways, thanks!)

This time, you have to work a little bit more. You have to display all the first overworld map of Super Mario bros on NES, without enemies, and without Mario.

Your program or function must display all the pixels of the following image OR produce an image file similar to it (BMP, PNG, or GIF).

Your program must not access the internet in any way.

The output can be zoomed if you want, and the pixels can be ASCII or HTML elements if you want, as long as they have the right color.

Here's the model you have to follow:

• The whole image: https://i.sstatic.net/2kfVc.png

• The tileset (if you need it): http://img.ctrlv.in/img/14/10/19/5443f44c7eb78.png
  You can produce your own tileset, subset or superset of this one.
  You can use your tileset as a separate image file or include it in your code (for example, in base64). If it's separate, add its size in bytes to your score.

• The map with coordinates: http://goo.gl/c8xJIx or http://img.ctrlv.in/img/14/10/19/544373adc9f64.png

• The colors:

Sky blue: #5C94FC
Black: #000000
Pink: #FCBCB0 (for the blocks and the castle)
Brown: #C84C0C (for the blocks and the castle)
Orange: #FC9838 (for the "?" block)
Light green: #80D010 (for bushes, mountains, flagpole, warp)
Dark green: #00A800 (for bushes, mountains, flagpole, warp)
White: #FCFCFC (clouds)
Light blue: #3CBCFC (clouds)

Shortest answer wins.

EDIT: There will be two score boards, one where scores are counted in bytes and one where they are counted in characters.

Good luck!

P.S: Here are some notes that could help you optimizing your program:

• Clouds, bushes and mountains have a repeating pattern (every 48 columns)
• Flying blocks are only present on lines 4 and 8
• Each tile or sprite of the map uses at most 4 colors (including blue or transparent, depending on how you see it)
• Bushes are just "top of clouds" with a diferent color palette
• Single, double and triple bushes/clouds can easily be formed using the same mini set of 16x16px pieces. This is also true for the single and triple mountains

Answer 1

x86 Machine Code, 1729 1619 1468 1382 Bytes

How it works: Tiles are generated by a combination of RLE compression, 2bit images, and procedural code. Once the tiles are generated in memory, the program then creates a matrix of tile indexes. This is first loaded with the repeating background. After that, the pipes, floating blocks, pyramids, and the flag pole are drawn procedurally. The pipes, hills, bushes, and pyramids can extend below the ground, but are covered up when the rock tiles get written next. Finally, the castle tile values are simply copied into the correct location. To generate the image file, the BMP header and palette is stored in the file as data, and is written first. The program then runs through the matrix, writing the appropriate row from the corresponding tile for each position.

Usage: Run mario.com, it will generate "m.bmp", a standard BMP image file. The file is created as a hidden file, since that ended up being less bytes.

Download a ZIP file containing the source code and binary, plus output.

Assembly code to generate the executable file:

org 100h
code_start:

;xor    cx,cx
mov    cx,12+14+256*3
mov    dx,filename
mov    ah,0x3c
int    21h
mov    bx,ax
push   ax


;mov    dx,BITMAPFILEHEADER
inc    dx
inc    dx
mov    ah,0x40
int    21h


mov di,tiles
xor ax,ax
mov ch,48
rep stosw

cwd             ; load the cloud sprite
mov si,cloud
call    DrawSprite
call    DrawHill

mov dx,14*256+12*16
PipeTileLoop:                ;Pipe
mov si,pipe0
call    DrawSprite
sub dh,2
jns PipeTileLoop

mov dx,32+12*16
call    DrawSprite
mov dh,13
;mov     si,pipe2
call    DrawSprite

cwd
xor ax,ax                ; move to the tile array
mov cl,6
MoveTileLoop:
call    MoveTile
loop    MoveTileLoop
mov word [BITMAPFILEHEADER+5+2],0x607     ; bushes
sub dl,3*16
mov cl,13
jnc MoveTileLoop

mov dx,0x1004
mov si,ball
call    DrawSprite
mov dl,0
call    MoveTile

xor bx,bx       ; pole
pole:
mov word[bx+tiles+22*256+7],0x707
add bl,16;
jnc pole

mov word [BITMAPFILEHEADER+5+2],0x805      ; qbrick
mov si,qbrick
call    DrawSprite
call    MoveTile

mov byte[BITMAPFILEHEADER+5+3],4

mov al,1            ; bricks & castle
call    Clear
mov al,23
call    MoveTile        ; black door
mov dx,0x800+64
BrickLoop:
xor dh,8
mov si,bricks
call    DrawSprite
sub dl,dh
jg  BrickLoop

cwd
call    MoveTile         ; left window
call    MoveTile         ; castle brick
mov al,3
mov di,image+15*256+16
mov cl,16
rep stosb
mov al,26
mov dl,16
call    MoveTile         ; reg brick

;mov     dl,32
;mov     si,door
call    DrawSprite
;mov     dl,32
call    MoveTile        ; door top
mov dx,48 +8*256
;mov     si,cren
call    DrawSprite
push    si

mov dh,0
call    MoveTile        ; crenulation 1
mov si,image+48+256  +4
mov di,image+48+256*9+4
mov bl,7
CrenLoop:
mov cl,7
rep movsb
mov dl,256-7
add si,dx
add di,dx
dec bx
jnz CrenLoop
mov dl,3*16
call    MoveTile        ; crenulation 2

pop si
mov cl,3
jmp skip
LastLoop:
;call    MoveTile        ; right window
                 ; block
                 ; rocks
call    DrawSprite
skip:
call    MoveTile
loop    LastLoop



xor ax,ax              ; Begin drawing world using the tiles
call    Clear
mov bl,48*4
BackgroundLoop:
lea di,[bx+image+2*256]
SmallHill:
mov al,10
mov cl,5
HillRow0:
stosb
inc ax
loop    HillRow0
mov dword [di+256-4],10+11*256+256*256*14
mov byte [di+512-3],15
sub di,256-10
cmp di,image +256
ja  SmallHill

mov si,fluff         ; draw clouds, bushes
FluffDrawLoop:
lodsw
add ax,bx
add ax,image
xchg    ax,di
lodsb
aam
mov cl,ah
;call    DrawFluff;

mov ah,1
FluffLayer2:
stosb
inc ax
push    cx
rep stosb
inc ax
stosb
pop cx
add di,256-2
sub di,cx
inc ax
dec ah
jns FluffLayer2

cmp si,pa
jl  FluffDrawLoop

sub bl,48
jnc BackgroundLoop

;mov     si,pa
mov cl,6
PipePlace:
lodsw
xchg    bx,ax
mov di,image
mov word [bx+di],18+19*256
PipeLoop:
dec bh
mov word[bx+di],16+17*256
jnz PipeLoop
loop    PipePlace

;mov     si,dba          ; draw the various floating blocks
mov cl,4
DrawBlockLoop:
lodsw
xchg    ax,bx
mov ah,bl

cwd
lodsb
BlockLoop:
mov bl,al
mov byte [bx+di],ah
lodsb
cmp al,dh
mov dh,al
ja  BlockLoop

dec si
loop    DrawBlockLoop

mov bx,198+256*12
FlagPole:             ; Draw flag pole
mov byte [bx+di],22
dec bh
jg  FlagPole
inc si
;mov     si,pyr            ; pyramid blocks
mov cl,8
PyrMainLoop:
lodsw
shr ah,1
cwd
inc dx
jnc NoNeg
neg dx
NoNeg:
mov bx,ax
PyrDrawLoop:
mov byte [bx+di],32
dec bh
jnz PyrDrawLoop
add ax,dx
dec ah
jnz NoNeg
loop    PyrMainLoop


;mov     si,ground        ; ground blocks
;mov     di,image
mov bl,4
push    di
GroundLoop:
lodsb
xchg    ax,cx
mov al,33
rep stosb
lodsb
add di,ax
dec bx
jnz GroundLoop
push    si
inc ch
mov si,di
sub si,cx
rep movsb

pop si
pop di
;push    di
;mov     si,copy         ; Draw Castle, flag ball
mov  dl,6
CopyLoop:
lodsw
mov cx,ax
shr cx,12
and ah,15
xchg    bx,ax
CopyRun:
lodsb
mov [bx+di],al
inc bx
loop    CopyRun
dec dx
jnz CopyLoop;

xor ax,ax
xor bx,bx ; image y        ; write the image to file
pop dx
WriteTileStep:
WriteRowStep:
mov bl,0 ; image x
WriteStep:
pusha
mov ah,[bx+di]
mov bx,dx
add ax,tiles
xchg    ax,dx
mov cl,16
mov ah,0x40
int 21h
popa
inc bx
cmp bl,212
jb  WriteStep
add al,16
jnz WriteRowStep
inc bh
cmp bh,14
jl  WriteTileStep
;pop     bx
;mov     ah,0x3e
;int     21h

;ret


DrawSprite: ; dx=x,y, si=data
pusha
mov bp,dx
;cwd
mov di,temp
push    di
lodsw              ; w, h*2+flag
mov dl,al
shr ah,1
pushf
mul ah
xchg    bx,ax
popf
jc  BitMapped
RunLoop:
lodsb
mov cl,al
shr cx,2
sub bx,cx
rep stosb
jnz RunLoop
jmp MoveData
BitMapped:
BitMappedLoop:
lodsb
mov cl,4
BitMappedQuad:
stosb
shr ax,2
loop    BitMappedQuad
sub bx,4
jg  BitMappedLoop
MoveData:
mov bx,sp
mov [bx+4],si
pop si
mov bx,di
lea di,[bp+image]
mov dh,-1
MoveLoop:
mov cl,dl
rep movsb
sub di,dx
cmp si,bx
jl  MoveLoop
popa
ret

MoveTile: ; dx =x,y, bx=y,ax=t-1
inc ax
pusha
mov si,dx

xchg    al,ah
xchg    di,ax
mov ax,16
TileLoop:
mov cl,16
TileTrans:
mov bx,[si+image]
inc si
and bx,3
mov bl,[bx+BITMAPFILEHEADER+5]
mov [di+tiles],bl
inc di
loop    TileTrans
add si,256-16
dec ax
jnz TileLoop
popa
add dl,16
ret

Clear: ; al = value
mov di,image
mov ch,48
rep stosb
ret;

DrawHill:
pusha
xor bx,bx
mov al,3
HillLoop:
lea di,[bx+image+6*16]
inc byte [di]
inc di
mov cl,16*5-2
sub cl,bl
sub cl,bl
rep stosb
inc byte [di]
inc bx
inc bh
cmp bl,16
jl  HillLoop

mov si,spot
push    si
mov dx,32-7+256*8 + 6*16
call    DrawSprite
mov dl,32+17    + 6*16
pop si
call    DrawSprite
mov dx,5*16      + 6*16
call    DrawSprite
popa
ret

filename: db 'm','.'
BITMAPFILEHEADER: db 66,77,'P',0,12,0,1,2,3,0,26,3,0,0
BITMAPCOREHEADER: db 12,0,0,0,64,13,224,0,1,0,8,0
colors: db 252,148,92,0,0,0,252,252,252,252,188,60,176,188,252,12,76,200,0,168,0,16,208,128,56,152,252

;pal: db 0,1,2,3
cloud: db 88,32,224,5,114,5,228,5,122,5,224,5,122,5,228,9,106,5,6,5,240,102,5,4,5,240,5,86,5,10,5,252,5,78,5,4,5,6,5,252,4,13,66,5,8,5,92,13,16,17,136,5,14,7,42,5,100,9,14,5,4,9,18,9,4,9,120,5,14,11,14,7,18,5,96,5,26,5,34,5,10,9,116,5,26,7,22,5,84,13,18,11,18,15,34,9,108,5,38,5,6,5,84,5,22,27,6,23,38,108,5,34,5,4,5,88,5,10,19,14,19,18,7,34,5,108,9,26,5,92,5,10,7,10,7,26,7,54,5,120,5,18,5,92,5,10,7,46,7,46,5,128,17,56
spot: db 6,17,245,95,255,245,93,87,127,245,87,127,245,223
hilltop: db 16,3*2,0x9, 0x33, 0x9, 0x8, 0xD, 0x1B, 0xD, 0x1C, 0x19, 0x14
ball: db 8,17,80,5,244,31,253,127,253,127,249,127,249,127,228,31,80,5
pipe0: db 64,5,0x90,0xFA,0xAA,0xAE,0xFF,0xFF,0xBB,0x06,0xA9,0xAF,0xAA,0xEB,0xFF,0xFF,0xBB,0x6B,0x90,0xFA,0xAA,0xAE,0xFF,0xFF,0xAE,0x06,0xA9,0xAF,0xAA,0xEB,0xFF,0xFF,0xEF,0x6A
pipe1:db 32,4,8,113,8,129
pipe2:db 32,12,5,23,26,79,9,122,133
qbrick: db 16,33,85,85,85,85,254,255,255,127,222,255,245,119,254,191,246,127,254,191,254,127,254,255,245,127,254,191,246,127,254,191,86,127,254,215,106,127,254,218,107,127,254,218,107,127,254,90,233,127,254,171,250,127,222,255,255,119,254,255,255,127,168,170,170,42
bricks: db 8,16,33,14,5,30,5,30,5,18,33,30,5,30,5,30,5
door: db 16,32,0xFD, 0xFD, 0x89, 0x6, 0x39, 0xA, 0x39, 0x6, 0x41, 0xA, 0x31, 0x6, 0x5, 0xE, 0x29, 0xA, 0x5, 0x16, 0x19, 0x12, 0x5
cren: db 16,17,213,255,255,85,234,0,192,170,234,0,192,170,234,0,192,170,234,0,192,170,234,0,192,170,234,0,192,170,255,0,192,255
block: db 16,32,61,6,7,53,6,5,11,45,6,9,15,37,6,13,19,34,17,19,34,17,19,34,17,19,34,17,19,34,17,19,34,17,19,34,17,19,34,17,15,6,35,17,11,6,43,13,7,6,51,9,6,59,5
rocks: db 16,33,86,149,87,149,171,106,171,90,171,127,171,106,251,85,171,106,95,170,173,106,165,170,173,106,171,170,182,106,171,170,182,106,171,170,182,106,171,170,246,127,171,170,102,149,171,170,118,106,171,170,182,106,171,170,182,106,171,170,182,106,254,255,231,191
fluff: db 8,10,11,     19,11,11,       27,10,31,       36,11,21,    11,1,34,    23,1,14,       41,1,24
pa: db 28,3,38,4,46,5,57,5,163,3,179,3
dba:db 21,5
qb: db 16,21,23,78,106,109,112,170, 21,9
qb2: db 22,94,109,129,130, 27,5
ba: db 20,22,24,77,79,94,100,101,118,129,130,168,169,171  , 27,9
ba2: db 80,81,82,83,84,85,86,87,91,92,93,121,122,123,128,131,0
pyr: db 137,5*2+1,140,5*2,151,5*2+1,152,5*2+1,155,5*2,188,9*2+1,189,9*2+1,198,4
ground: db 69,2,86-69-2,3,153-86-3,2,256-153-2,0
copy: db 202,2+5*16,26,26,24,26,26,   202,3+5*16,26,26,28,26,26,    202,4+5*16,29,30,30,30,29,   203,5+3*16,31,26,25,  203,6+3*16,29,29,29, 198,12+16,20
temp: rb 256*48
tiles: rb 34*16*16
image:

Answer 2

Javascript minified (*): 1285 1258 1253 1205 1186 1171 characters

(*) Minified using Closure, RegPack and ObfuscaTweet, as suggested by xem

Unicode version is 4549 bytes in size, without ObfuscaTweet (Closure and Regpack only), size is 2251 bytes.

History:

1285 -> 1258: variable A for 48 (thx @hsl), merged some of the for loops, merged mt() and mu(), using tile indices instead of tile strings, optimized png with PNGOUT

1258 -> 1253: merged some more for loops; renamed mt() to r(); removed unnecessary braces; variable B for 16; defining 16 unused CSS sprites (replaces 32 with A); showing 1 unused row (replaces 14 with B); removed function e(); shortened t(), g(), c(); using for(i=0;i<n;)f(i++) instead of for(i=0;i<n;i++)f(i) where possible

1253 -> 1205: moved body style to CSS part instead of <body style=...>; replaced some for loops with f calls; optimized functions r,q; </head><body> seems to be unnecessary, <html><head> too; function t(i) for CSS mapping removed; CSS names b0..b31 instead of a..z,aa..ff

1205 -> 1186: function n renamed to N; new function n that operates on an array with delta coding

1186 -> 1171: hills and warps can be drawn "big" anytime, the lower parts get overdrawn by stone blocks; use d for both clouds and bushes; removed some unnecessary semicolons

This is a procedural attempt. There are patterns everywhere, one of the magic numbers is 48 (tile gap between clouds, bushes and mountains). The tileset is encoded as Base64 data url string and used as a CSS stylesheet. In Javascript, the 212x14 array m is filled with tile indices. See the commented unminified version for more details.

Works in Chrome 38 (Ctrl+T for new tab, Ctrl+Shift+J for javascript console, paste code there) and Firefox 33 (if wrapped with HTML javascript tags). There's a JS bin version, too.

There's still some room for optimizations, I'll post updates and it would be nice if some JS/CSS/HTML people could suggest optimizations/corrections.

Minified:

eval(unescape(escape('𩡯𬠨𧰽𙰠𨱬𨑳𬰽𠁹𚰫𚡗𚱸𙠩𞰣𘱦𘐽𜀻𨁦𫱲𚁟𘱟𪑠𧠣𫠨𦰟𛀴𗠩𮰝𝐳𗀬𝰛𚁡𖡦𭑮𨱴𪑯𫠠𖐨𜠘𘱧𖀗𖠬𨠖𛁥𕐮𭁯𤱴𬡩𫡧𚀔𚀱𔰣𬠓𞀒𘱎𔐚𚰐𮱢𨑣𪱧𬡯𭑮𩀏𛀳𓠞𚐬𩀌𭰨𘠼𒰬𜀣𒐫𚰩𒀟𨐫𜠱𑱁𠑁𠐆𚱩𚡁𑐬𜐄𕠕𗐃𛀲𐠩𯐙𐑗🐲𜐲𞱁🐴𞀻𠠽𜐶𞱭👛𧐻𖑷𖠝𩁯𨱵𫑥𫡴𛡷𬡩𭁥𖠁𣠖𗑭𦱡𧐽𘡢𘠫𨠔𐑮𕠝𮡠𧰤𘁩𫠠𨐩𮠫👡𦰤𧐬𣠨𮠬𨠁𩠃𧱫👡𞱫🀽𨐫𨠻𚑎𚁫𚰫𕐁𩰃𧱸👡𙑗𞱸🀽𨠥𥰻𮀈𧱹👡𛱗𯀰𞱹🁢𛱗𯀰𞰩𣠨𙠕𐑣𐱎𖠕𘐐𜐬𨠭𜐕𚰱𔐐𨠫𜐕𚰲𐑤𐱣𕠕𘱣𔁗𛁢𕐫𜐶𐑰𖠝𣠐𜠬𞀇𜰂𜐱𧐂𜰇𝀂𜐱𐡝𐠴𑰵𐠱𜱝𐠵𔐐𝀲𝠬𞐁𬐚𗑎𖠄𜀑𔀱𑀱𘱬𔁗𓠂𝠣𫀐𜠱𜰎𐠷𐑲𕠝𧱪𨀴🡪𞱪𒁦𔁢𚠨𜰭𪠩𚱪𚡗𛁪𛀰𐑬𐱟𪱠𪰼𨠻𪰈𣠐𪰪𥰕𚑽𩠨𜀂𞐶𝰛𧠴🡩𞱩𒁤𖀳𜐅𑀌𖀴𞀅𐠌𚀴𝐱𑐎𓀨𝀳𜠅𑀌𖀳𝀳𑐎𑀷𚐬𩀘𜰵𝐅𑀄𝰩𛁤𖀳𝰳𑐂𑀷𘱤𚀶𜠴𑀞𔐘𗀹𑀹��𝰰𖰲𑀵𐠰𑀛𜰴𛀵𐠬𝐵𐠸𓠎𛀵𞁝𓠡𚀹𜠸𖰂𘐨𞐳𞐂𐠡𚀹𝠹𐠂𗰹𝰶𓠛𜰷𐠂𛀜𐠄𝐬𝠄𞀄𜐄𓠸𑀂𧐂𔐓𞐰𜀬𠠗𜰲𜠂𗀵𛁂𕰳𜠵𐠜𞀬𠠡𔰶𞀷𐠄𜰑𔰸𞐹𐠹𔐓𞐰𜐎𜐡𖀱𜐰𗠄𜰡𖀱𜐱𐠄𝐑𖀳𜠴𑀴𔐘𗀶𓠰𧠵🡩𞱩𒁰𔰹𜀸𑐩𛁰𖀱𜰵𑐣𬐓𝰴𜠣𬐓𝰜𘱱𔰹𝀶𘱱𖀱𝀸𘱱𖀲𞀳𘱱𖀲𞐹𔠳𜀄𔠴𝀄𔠷𝰄𘱲𔰰𜰳𑀒𜰶𒑲𔰸𝐱𒑧𔰸𞀱𐠵𜠰𒑬𔰰𜰷𗠉𫀓𞀴𞀞𒑬𔰸𞀵𗠉𣠨𝀱𜀄𜠣𫀨𝠲𜠬𞐂𞀑𖀜𜀉𩠘𝐴𝀞𜠳𑀗𝠱𜰂𞀲𝠛𕰶𜰰𐠸𝀴𖰗𝠹𝰂𞐱𜀛𘰋𬱴𮑬𩐾𨡯𩁹𮱷𪑤𭁨𞠳𝀰𜁰𮁽𩁩𭠏𞡵𬡬𚁤𨑴𨐺𪑭𨑧𩐯𬁮𩰻𨡡𬱥𝠴𛁩𥡂𣱒𭰰𢱇𩱯𑡎𤱕𪁅𥑧𠑁𠑑𑡁𩱂𠑍𑡐𪀷𭡘𑡇𜑂𣑖𡑖𨱬𤁷𑡁𬑁𡁉𥁁𮑁𜁂𡀸𛱐𮠸𭡌𡀸𫑄𩰸𭡐𮑑𥱌𣁕𠑁𠑃𭱫𫁅𤑖𤠴𦁲𥱗𤰴𬡪𣑂𠱇𦁣𮁪𬡦𢱪𩐲𜱨𠐴𭱒𢡎𭁊𞁁𡑭𪐴𢡳𥁕𡀷𬁨𩀹𩱫𠱏𤁓𥱎𝑏𪑒𭁴𬱸𞁸𡱊𜡃𢱰𪠹𞑓𢡣𥡏𥰸𨡤𭠫𫑩𢁤𚱕𝑖𩡸𤡡𤑄𡐯𮐶𜑪𮠹𜑆𬑰𢁲𡡓𤁢𛱲𡡒𨱴𦁅𥰸𢱆𝠶𞁅𜰱𨠫𭰯𣁇𚱂𠑏𢑘𠡏𫱨𝁵𡁘𜑣𝁉𫑃𣁉𥡆𮁣𫑡𡑋𨡓𣑙𨰴𡡘𥱺𞁑𠑃𢱸𣁆𠡋𮑑𣁓𜀲𦑃𨑁𪱅𨡁𤐴𠱡𠡪𛰯𡱵𥡊𩱁𣡅𤱮𬡹𤡧𠡌𬑪𦡌𬑵𮑸𢡁𪀹𬡸𞑇𢑅𭁇𢱣𭱋𪀶𫠸𢀫𤐲𡰱𡁷𤑡𦑧𡡙𢡓𠱐𚱓𤁯𜁖𢱚𚱈𪱫𠑪𜑗𩱣𡁲𩐵𞁉𥑃𣰲𢡌𠑳𫱐𥐴𢠳𡁭𡁌𦑭𩱉𝑍𢑎𞁄𨠶𞁱𡑁𠐶𦀫𫁋𬀲𨱔𭱂𩡎𝁉𤰯𡁧𤱹𦐯𪡥𝀱𜡧𝁥𬠰𤡁𣀫𚱐𬡶𤡙𩐯𫡨𩑙𥁧𡑧𣱑𤱳𥁑𠱏𥑩𭱌𥱋𥑘𡡔𨱩𫡁𤑡𞁯𪁇𬡅𮑧𣡴𜑧𥱕𠑪𠱷𤱇𢡯𡰹𡡷𠱡𣱊𡡙𫁙𠑘𭱅𞁯𞑉𪁍𪡸𩡢𪡉𢐫𡑄𝡃𢁸𤑧𮁌𫱅𤱩𭡧𬰰𥱈𭡹𝀰𡱩𫱵𬡳𩁉𩱆𬱸𭑬𦑍𡁑𥱣𪱯𜁉𪑇𢑭𩱓𥱂𡑓𜀹𡡺𩁪𥱧𪀯𪡂𬑋𪑁��𡡍𠱚𦀰𣱑𥑳𭱉𭑏𭑱𝑺𢁹𭱉𤑬𠑘𤠱𬁡𤁉𤀲𝑮𛱉𤡰𩀰𨑚𪑩𤡫𪑧𪁘𤑖𬁡𣱤𜠰𮠫𠐴𠡉𜱷𚰲𛱘𠡺𡁂𜱈𬱫𥑐𤁮𦑰𫱺𡱣𝐵𠑋𥑌𫱇𭱦𠱈𥁤𥑷𣁉𫑹𪑌𝁇𫱕𬡬𪱃𢑌𜡁𡡅𞁭𩱉𝐷𬱙𡑒𢑯𜱧𩁱𦁢𪡒𜱩𠱍𬐷𤑄𭑦𠑈𝱃𭁄𭁪𩱣𣑨𡑓𠑵𩡺𭑺𠑶𣑮𜡷𡑬𬱯𫑙𥁓𠐸𠑥𡡊𩑃𮡑𬁑𞁂𪱁𜰴𦡑𣑑𨑑𠡴𜡚𬀵𢡯𡑖𠑪𨡃𫱸𢁉𣑪𩱒𜁷𥀱𤑘𫱂𨑒𡁐𢡊𡁴𠑗𠠷𢡨𣱁𪁧𤑓𢑑𤑌𦡓𮡑𬡴𞁄𩑒𛱁𩑶𫰯𫡓𩱁𬁮𛱍𤑓𨑉𝱘𜁁𠡳𞁂𜡈𝡥𥑩𨐰𜠯𭁁𤁕𮡕𤱷𢑧𣐸𥁭𤁪𠑅𢁇𠡤𠑅𮐷𭁑𛱧𡑆𢱌𩁑𡑷𦑬𬱦𩱃𡡇𬡁𭑁𨑚𣑅𛱱𣑁𮑉𩑉𨡘𜡧𪡧𤑏𨑷𣡧𜡲𥠷𝁃𞑋𤐫𮁹𣡄𤑯𬱷𑡂𢡒𥐵𡑲𪱊𩱧𩰽🐩𯐢𧡩🁁𞱩𒁪👩𙑂𚠭𠠬𪰽𜐵🁩🰭𠠺𜀬𭰨𘠮𨠢𚱩𕀩𚰢𓰭𬁯𬱩𭁩𫱮𞠢𚱪𚰢𬁸𘀢𚱫𚰢𬁸𞱷𪑤𭁨𞠱𝡰𮀻𪁥𪑧𪁴𞠱𝡰𮀻𩡬𫱡𭀺𫁥𩡴𞱽𘠣𒰯𬱴𮑬𩐾𘠣𧱸𨁸🁗𞱸𒁻𒱳𬁡𫡀𨠰🠢𘱟𮑠𮐼𠠻𚐋𩁩𭡀𘠫𫑛𙡝𚰢🠼𛱤𪑶🠢𘰋𛱳𬁡𫠾𘠩𯐻𙰻𩰽𛱛𐐭𗱞𛑠𘐣𙡀𧐯𛡥𮁥𨰨𧰩𞰩𭱩𭁨𚁟𛡳𬁬𪑴𚁧𚐩𧰽𪡯𪑮𚁳𪁩𩡴𚀩𚐻𩑶𨑬𚁟𚐠').replace(/uD./g,'')))

Unminified and commented:

// map width
W=212;
// helper constants
A=48;B=16;
// array containing the map, generated at runtime
m=[];
function w(s){document.write(s)}
// set a map tile
function N(i,s){m[i]="b"+s.toString()}
function n(i,s){z=0;for($ in i){z+=i[$];N(z,s)}}
// set a row of map tiles (index a..a+b)
function f(a,b,s){for(k=a;k<=a+b;)N(k++,s);}
// set a block of map tiles (index a and b define upper left and lower right corner)
function g(i,j,s){for(x=i%W;x<=j%W;x++)for(y=i/W|0;y<j/W|0;)N(y++*W+x,s)}
// helper for clouds and bushes - j=1..3 sets map tiles to XYZ, XYYZ or XYYYZ
function c(i,j,a){N(i,a);f(i+1,j-1,a+1);N(i+j+1,a+2)}
// clouds/bushes
function d(i,j,a){c(i,j,a);c(i+W,j,a+16)}
// hill
function p(i){N(i+2,8);n([i+213,211],23);n([i+214,211,2],24);n([i+215,213],25);N(i+426,9)}
// warps
function q(i){N(i,10);N(i+1,11);l(i+W,3,26);l(i+213,3,27)}
// stairs - d=1 for upwards, d=0 for downwards
function r(i,d){for(j=0;j<4;j++)f(i+d*(3-j)+j*W,j,0);}
// set a column of map tiles (index i, height j)
function l(i,j,s){for(k=0;k<j;k++)N(i+k*W,s);}
// fill map with sky tiles
f(0,2967,7);
// clouds and bushes - some of the bushes will be overdrawn by blocks and the castle, so draw them first
for(i=0;i<4;i++){d(231+i*A,1,4);d(248+i*A,2,4);d(451+i*A,3,4);d(432+i*A,1,4);d(2343+i*A,3,17);d(2355+i*A,1,17);d(2373+i*A,2,17)}d(624,1,4);N(2539,19)
// '?' blocks
n([870,72,15,20,1,734,5,2,55,28,3,3,58],3)
// brick blocks and castle
f(928,7,2);f(939,2,2);f(969,2,2);n([976,3,737,2,2,53,2,15,6,18,11,1,38,1,2],2);N(1900,B);g(2322,2535,B);g(2325,2538,B);f(1687,2,13);N(1899,29);N(1901,31);f(2110,4,13);f(2111,2,15);N(2324,14);N(2536,30)
// big and small hills - one of the big hills will be overdrawn by the stairs, the small hills are big hills overdrawn by stone blocks
for(i=0;i<5;i++){p(1908+i*A);p(2135+i*A)}
// warps (often overdrawn by stone blocks), stairs and block below pole
q(1742);q(1753);q(1946);q(2148);q(2283);q(2299);r(1830,1);r(1844,1);r(1877,1);r(1033,1);r(1836,0);r(1851,0);g(1881,2520,0);l(1037,4,0);l(1848,4,0);l(1885,4,0)
// pole
N(410,12);l(622,9,28);N(2530,0)
// lower row of stone blocks
f(2544,423,1);
// gaps in stone blocks
g(2613,2826,7);g(2630,2844,7);g(2697,2910,7)
// HTML start and CSS spritesheet base (tileset PNG encoded as base64)
w("<style>body{width:3400px}div{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAgBAMAAAAPh7vXAAAAG1BMVEVclPwAAAAAqADITAyA0BD8/Pz8vLD8mDg8vPyQWLLUAAACwklEQVR4XrWWS4rjMBCGXcxjrfKje23hA4wRJNtJ8AEmi4JsTUD7phd9gkCOPSWN5OiRttsx8xGJ2CKpj99SJcVOW8bdv+miHd+U5VfxRaQDE/y61jz91FqpHrFSPb/rFRctXEW8KF668E31b+w/LG+BAOIXBOoh4uDX1c4ImCLIVFxcmaEKbSMYc4FXWz8QACKxLFBKyQLS02YCaAkEbAQ4CaBj//GuVJgANESnryRgBLqjZLquyxJAh9rx9GIEtGKcwKh6n8H+Q2G1DwQaYgFYJSCP+SPo0VKZ+HkkAj1WgcDre58IUCO2JLAsoPU4J3DmDLYmgI5MIN8Db68qEAA6X+lKp2cTwBfN4IS/DgSyY/je412g4er0RAL++PrvRYe/nheYTgEgOQSsTQCOUiwLWKUXFTcinAQa8ohGrEygNt1gWUAjCwSGJoG9FwCaOJFYlYAXwE8o9IhMjxfbjII+ED6CHxQgxLoESivgs0WHvy40GioursdIgFsxulYMDQWcko0IiGImgSWBES09FzdjWgh/jBqKiAXQFMCZX0OQUswIuOuq5zHywIQlAXR1paPIP25n/IRpd0aZiiRkighXQVpaOd20z+A4BI3w+2/XBzDB3HskUPPnYpozGc55AKULoGwfCHTdUwLImyiL4GoUrlkCIL2AFE8mgI57sYERIo3gdqXbjR3iCMq7QDufAH7CtDtjgcMhESAufzuzAvMn2wElsomYTSA8AeFJeCzQpQ8BkA34ZQMQaQBt2Zp5JoEVAjbCoxHIMjgR0wT1QXoBaRDPJJDtAWB7JhOAhgQSIQQLZSzQrt8DeR/Aevo/nSgApn/MQSaI7X0ABs8B2H6eUia02/tAPUzUSwIgM8TmPjAEHGBdAEy7tQ/gEFKLdQEwYlsfgCFGrAuAaZME/qMAyIeIbX2gjgQOawNg2rV74C9KQ+xyNDQoswAAAABJRU5ErkJggg==)}")
// generate CSS classes 'b0'..'b31' for the 32 used tiles
// this actually generates 16 additional unused classes to reuse the constant A and save 1 byte
for(i=0;i<A;i++){j=(i%B)*-B;k=i>15?-B:0;w(".b"+i.toString()+"{background-position:"+j+"px "+k+"px;width:16px;height:16px;float:left;}")}
// some more HTML
w("</style>")
// body of HTML contains all tiles as <div> elements arranged in <span> columns
for(x=0;x<W;x++){w("<span class=b0>");for(y=0;y<B;){w("<div class="+m[y++*W+x]+"></div>")}w("</span>")}

Answer 3

Javascript, 1069 1072 1024 characters (1957 bytes)

RegPacked and Obfuscatweeted

eval(unescape(escape('𩡯𬠨𧰽𙰨𬱠𨀬𧡝𚑀𜐶𙡷𪑤𭁨𞠣𪱬𘐵𝠟𜠳𗠰𜀝𛀢𗀝𜀛𗀛𖡨𪐙🐢𘠻𩡯𬠨𖀩𚠦𚰢𬁸𕰠𬱴𮑬𩐽𧀧𕡁𠐕𗁡𨠔𫡯𬀓𖑩𪑪𔰒𬑲𔑮𫰹𫰐𝰷𓰏𝰎𜠲𓀢𛀋𒰶𗀉𬡥𭁵𬡮𒀩𚱒𚁃𧡛𑰋𞀜𑠎𝰅𒰱𑀕𕐃𠀬𝀩𚱃𧡛𝠜𐡦𭑮𨱴𪑯𫠠𐐁𤡞𭀩𮰈𘁮𩑷𘁁𬡲𨑹𚁴𚰱𚐮𪡯𪑮𨀩𯐁𨠨𫠩𮰈𘠼𩁩𭠖𨡡𨱫𩱲𫱵𫡤𞠠𭑲𫀨𩁡𭁡𞠻𨡡𬱥𝠴𛁩𥡂𣱒𭰰𢱇𩱯𐱎𤱕𪁅𥑧𕑁𤐃𠑧𠡁𣐃𤁨𝱶𦀃𡰱𠡍𥡅𥡣𫁐𭰃𠑱𠑄𢑔𠑹𠐰𠡄𞀯𤁺𞁶𣁄𞁭𡁧𞁶𤁹𤑗𣁌𥐕𠑃𭰡𡑑𥡒𝁘𬡗𥱓𝁲𪡍𠡃𡱘𨱸𪡲𩡋𪡥𗡨𠐴𭱒𢡎𭁊𞁁𡑭𪐴𢡳𥁕𡀷𬁨𩀹𩱫𠱏𤁓𥱎𝑏𪑒𭁴𬱸𞁸𡱊𜡃𢱰𪠹𞑓𢡣𥡏𥰸𨡤𭠫𫑩𢁤𚱕𝑖𩡸𤡡𤑄𡐯𮐶𜑪𮠹𜑆𬑰𢁲𡡓𤁢𛱲𡡒𨱴𦁅𥰸𢱆𝠶𞁅𜰱𨠫𭰯𣁇𚱂𠑏𢑘𠡏𫱨𝁵𡁘𜑣𝁉𫑃𣁉𥡆𮁣𫑡𡑋𨡓𣑙𨰴𡡘𥱺𞁑𠑃𢱸𣁆𠡋𮑑𣁓𜀲𦑃𨑁𪱅𨡁𤐴𠱡𠡪𛰯𡱵𥡊𩱁𣡅𤱮𬡹𤡧𠡌𬑪𦡌𬑵𮑸𢡁𪀹𬡸𞑇𢑅𭁇𢱣𭱋𪀶𫠸𢀫𤐲𡰱𡁷𤑡𦑧𡡙𢡓𠱐𚱓𤁯𜁖𢱚𚱈𪱫𠑪𜑗𩱣𡁲𩐵𞁉𥑃𣰲𢡌𠑳𫱐𥐴𢠳𡁭𡁌𦑭𩱉𝑍𢑎𞁄𨠶𞁱𡐕𝡘𚱬𢱰𜡣𥁷𠡦𣠴𢑓𛱄𩱓���𛱪𩐴𜐲𩰴𩑲𜁒𠑌𚰫𤁲𭡒𦑥𛱮𪁥𦑔𩱅𩱏𤑓𬱔𤑃𣱕𪑷𣁗𢱕𦁆𥁣𪑮𠑑𨐸𫱨𡱲𡑹𩱎𭀱𩱗𥑁𪡃𭱓𡱊𫱇𞑆𭱃𨑏𢡆𦑬𦑁𦁷𡐸𫰹𢑨𣑪𮁦𨡪𢑉𚱅𡀶𠱈𮁑𩱸𣁯𡑓𪑶𩱳𜁗𢁶𮐴𜁇𪑯𭑲𬱤𢑧𡡳𮁵𫁙𣑄𤑗𨱫𫰰𢑩𡱉𫑧𤱗𠡅𤰰𞑆𮡤𪡗𩱨𛱪𠡱𢱩𠑘𤑆𣑃𦡘𜁏𤑕𬱷𢑵𣱵𬐵𮡈𮑷𢑑𫁁𦁒𜑰𨑐𢑐𜠵𫠯𢑒𬁤𜁡𦡩𪑒𪱩𩱨𦁑𥡰𨑏𩀲𜁺𚱁𝁂𢐳𭰫𜠯𦁂𮡄𠠳𢁳𪱕𤁐𫡙𬁯𮡇𨰵𝑁𢱕𣁯𡱷𩡃𢁔𩁕𭱌𢑭𮑩𣀴𡱯𥑲𫁫𠱉𣀲𠑆𡐸𫑧𢐵𝱳𦑅𤡉𫰳𩱤𬑘𨡪𤠳𪑃𣑱𝱑𡁵𩡁𢀷𠱴𡁴𪡧𨱍𪁅𤱁𭑦𮡵𮡁𭡍𫠲𭱅𫁳𫱭𦑔𤱁𞁁𩑆𢡥𠱺𤑰𤐸𠡫𠐳𝁚𤑍𤑡𤑂𭀲𦡰𝑊𫱅𥡁𪡢𠱯𮁈𢑍𪡧𤠰𭱔𜑑𦁯𠡡𤡄𤁊𢡄𭁁𥱂𝱊𪁏𠑨𩱑𤱉𤑑𣁚𤱺𤑲𭀸𡁥𤠯𠑥𭡯𛱮𤱧𠑰𫠯𣑑𤱡𢐷𦀰𠑂𬰸𠠲𢀶𩑕𪑡𜀲𛱴𠑐𥑺𥑓𭱉𩱍𞁔𫑐𪡁𡑈𡱂𩁁𡑹𝱴𤐯𩱅𡡋𣁤𤑅𭱙𫁳𩡧𠱆𡱲𠑵𠑡𦡍𡐯𬑍𠑹𢑥𢑢𦀲𩱪𩱑���𭱎𩰲𬡖𝰴𠰹𢱑𚱸𮑎𡁑𫱳𭰃𠡊𤡕𝑅𬡫𢠩𛐢𚰨𫠥𙠗𘀭𘠫𚁮𛰦𯀰𕰻𘰦𬁸𞱨𩑩𩱨𭀺𙡰𮀻𩡬𫱡𭀺𫁥𩡴𯑜𙰾🀯𩁩𭠾𘡽𐑍𨀩𮱭𖁟𘁩𫠠𬰩𫐫👢𚁰𨑲𬱥𢑮𭁠𦱟𧐬𜰲𚐩𞰈𘁭𯐁𠱞𨐩𮱣𖀤𘁩𫠠𨐩𨰫🐤𙐲🱍𚁡𦰤𠀺𤡞𨑛𙁀𞰈𘁣𯑤𫱣𭑭𩑮𭀮𭱲𪑴𩐨𘠼𨡯𩁹𕠣𜰳𞐲𬁸𧀧🠢𚱒𨀽𨠨𝰩𛀲𜐲𑰱𞐜𝀟𑀴𗀴𝐟𒰸𐡣𑀳𧐇𞀜𝀟𑠡𫐅𝰴𝐵𗰅𘑬𫐋𞀂𬰷𝀟𒰹𧐇𞀜𘑭𑀶𗀡𫁬𫐄𝠂𬰷𘑭𒰳𜐜𜰋𝐷𗀌𓀌𓀎𓀞𑀴𗀳𑀱𗀌𜠅𗠳𜠋𗰜𗐆𬰋𜠝𖠆𬰄𞐹𖠰𑡳𑀹𞀚𗐆𬰅𩁤𩀋𓀜𜰎𗠞𜠋𜠱𕀋𞐔𑀸𗀞𜠄𝀜𜠅𝰲𑐷𜰏𜰏𜰅𝰲𑀰𗀌𒐰𓰰𑀰𗀝𓰰𑀲𗀌𜰲𑀲𖠛𑡳𑑴𩱶𑠸𒰳𝐔𒐑𓰸𒐑𒰳𞐜𞀋𜰷𗀝𓰝𑐸𓠛𓰝𒰲𝠚𖰰𑐸𓡳𓡤𩡦𩡤𒐓𑀳𗀸𑀰𕀆𔐉𔐷𔰋𝐜𔐉𞀋𜰱𗀓𑀳𗀸𒰲𜐚𓰛𓰓𝰛𜀏𖰎𞀷𨑢𑀴𕀷𖰛𗐎𔰏𬰎𩱧𩑧𩰏𞀏𔁰𒐒𑐙𪠏𔐆𔐷𖑩𪠷𔐐𬀅𔐒𑐙𪠄𝐜𖑩𪠎𔁰𒐒𒰴𗀙𪠄𜠚𜁩𪐛𜀐𖰝𓰛𜁪𔰑𓰙𪠋𞐜𔐛𖰛𓰐𬀷𜀎𩱧𭑧𩱪𔰷𘡀𚱒𚁃𚁢𚀱𚐬𦰶𞐜𓰄𝐜𓠋𝠴𗀏𒰵𝱀𛀲𚐩𞰧𞱧🐯𦰁𛐟𘐣𙡀𧡠𧐯𛡥𮁥𨰨𧰩𞰩𭱩𭁨𚁟𛡳𬁬𪑴𚁧𚐩𧰽𪡯𪑮𚁳𪁩𩡴𚀩𚐻𩑶𨑬𚁟𚐠').replace(/uD./g,'')))

Unobfuscated code

I hid this code because there's ungolfed code below.

function R(s,t){return new Array(t+1).join(s)}
function b(n){return"<div style='background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAgBAMAAAAPh7vXAAAAG1BMVEVclPwAAAAAqADITAyA0BD8/Pz8vLD8mDg8vPyQWLLUAAACwklEQVR4XrWWS4rjMBCGXcxjrfKje23hA4wRJNtJ8AEmi4JsTUD7phd9gkCOPSWN5OiRttsx8xGJ2CKpj99SJcVOW8bdv+miHd+U5VfxRaQDE/y61jz91FqpHrFSPb/rFRctXEW8KF668E31b+w/LG+BAOIXBOoh4uDX1c4ImCLIVFxcmaEKbSMYc4FXWz8QACKxLFBKyQLS02YCaAkEbAQ4CaBj//GuVJgANESnryRgBLqjZLquyxJAh9rx9GIEtGKcwKh6n8H+Q2G1DwQaYgFYJSCP+SPo0VKZ+HkkAj1WgcDre58IUCO2JLAsoPU4J3DmDLYmgI5MIN8Db68qEAA6X+lKp2cTwBfN4IS/DgSyY/je412g4er0RAL++PrvRYe/nheYTgEgOQSsTQCOUiwLWKUXFTcinAQa8ohGrEygNt1gWUAjCwSGJoG9FwCaOJFYlYAXwE8o9IhMjxfbjII+ED6CHxQgxLoESivgs0WHvy40GioursdIgFsxulYMDQWcko0IiGImgSWBES09FzdjWgh/jBqKiAXQFMCZX0OQUswIuOuq5zHywIQlAXR1paPIP25n/IRpd0aZiiRkighXQVpaOd20z+A4BI3w+2/XBzDB3HskUPPnYpozGc55AKULoGwfCHTdUwLImyiL4GoUrlkCIL2AFE8mgI57sYERIo3gdqXbjR3iCMq7QDufAH7CtDtjgcMhESAufzuzAvMn2wElsomYTSA8AeFJeCzQpQ8BkA34ZQMQaQBt2Zp5JoEVAjbCoxHIMjgR0wT1QXoBaRDPJJDtAWB7JhOAhgQSIQQLZSzQrt8DeR/Aevo/nSgApn/MQSaI7X0ABs8B2H6eUia02/tAPUzUSwIgM8TmPjAEHGBdAEy7tQ/gEFKLdQEwYlsfgCFGrAuAaZME/qMAyIeIbX2gjgQOawNg2rV74C9KQ+xyNDQoswAAAABJRU5ErkJ)-"+(n%16)*16+"px -"+(n/16|0)*16+"px;width:16px;height:16px;float:left}'></div>"}
function M(s){m="";for(_ in s)m+=b(parseInt(s[_],32));return m}
function C(s,a){c="";for($ in a)c+=$%2?M(a[$]):R(s,a[$]);return c}
O="<body style='width:3392px'>";
O+=R(s=b(7),212);
O+=R(C(s,[19,"456",14,"4556",8]),4);
O+=C(s,[6,"c",13]);
O+=R(C(s,[8,"456",8,"klm77777455567777kllm",8]),4);
O+=C(s,[6,"s7456",9]);
O+=R(C(s,[8,"klm",16,"klllm",16]),4);
O+=C(s,[6,"s7klm",31,"3",57,"222222227772223",14,"3",11,"22277772332",56,"00",8,"s",200,"000",8,"s",199,"0000",8,"s",198,"00000",8,"s7777ddd",22,"377723232",21,"ab",9,"ab",18,"232",14,"2777772777773773773777772",10,"22",6,"0770",10,"00770",12,"2232",12,"000000",8,"s7777tgv",8,"8",35,"ab",6,"qr778",6,"qr",39,"8",37,"007700777787770007700",26,"000000077778777s777dfffd",6,"nop",13,"8",10,"ab",8,"qr",6,"qr7nop",5,"qr",6,"8",31,"nop",13,"8",21,"0007700077nop700007700077787ab",14,"ab700000000777nop77s777ggegg77877no9op",6,"hiiijnop7777hij77qr",8,"qr7hiij7qrno9op7777qrhiiijnop7777hij",15,"hiij777no9op",6,"hiiijnop",4,"hij",12,"0000ii0000no9o00000770000jnopqr77hij",9,"qr00000000077no9op70777gguggjnop7"]);
O+=R(C(b(1),[69,"77",15,"777",64,"77",57]),2);
document.write(O);

Ungolfed code

function repeat(s, t) { var S=s; while(t-- > 1) S += s; return S; }
function block(n) { return "<div style='background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAgBAMAAAAPh7vXAAAAG1BMVEVclPwAAAAAqADITAyA0BD8/Pz8vLD8mDg8vPyQWLLUAAACwklEQVR4XrWWS4rjMBCGXcxjrfKje23hA4wRJNtJ8AEmi4JsTUD7phd9gkCOPSWN5OiRttsx8xGJ2CKpj99SJcVOW8bdv+miHd+U5VfxRaQDE/y61jz91FqpHrFSPb/rFRctXEW8KF668E31b+w/LG+BAOIXBOoh4uDX1c4ImCLIVFxcmaEKbSMYc4FXWz8QACKxLFBKyQLS02YCaAkEbAQ4CaBj//GuVJgANESnryRgBLqjZLquyxJAh9rx9GIEtGKcwKh6n8H+Q2G1DwQaYgFYJSCP+SPo0VKZ+HkkAj1WgcDre58IUCO2JLAsoPU4J3DmDLYmgI5MIN8Db68qEAA6X+lKp2cTwBfN4IS/DgSyY/je412g4er0RAL++PrvRYe/nheYTgEgOQSsTQCOUiwLWKUXFTcinAQa8ohGrEygNt1gWUAjCwSGJoG9FwCaOJFYlYAXwE8o9IhMjxfbjII+ED6CHxQgxLoESivgs0WHvy40GioursdIgFsxulYMDQWcko0IiGImgSWBES09FzdjWgh/jBqKiAXQFMCZX0OQUswIuOuq5zHywIQlAXR1paPIP25n/IRpd0aZiiRkighXQVpaOd20z+A4BI3w+2/XBzDB3HskUPPnYpozGc55AKULoGwfCHTdUwLImyiL4GoUrlkCIL2AFE8mgI57sYERIo3gdqXbjR3iCMq7QDufAH7CtDtjgcMhESAufzuzAvMn2wElsomYTSA8AeFJeCzQpQ8BkA34ZQMQaQBt2Zp5JoEVAjbCoxHIMjgR0wT1QXoBaRDPJJDtAWB7JhOAhgQSIQQLZSzQrt8DeR/Aevo/nSgApn/MQSaI7X0ABs8B2H6eUia02/tAPUzUSwIgM8TmPjAEHGBdAEy7tQ/gEFKLdQEwYlsfgCFGrAuAaZME/qMAyIeIbX2gjgQOawNg2rV74C9KQ+xyNDQoswAAAABJRU5ErkJ)-" + (n%16) * 16 + "px -" + (n/16|0) * 16 + "px; width: 16px; height: 16px; float: left; }'></div>"; }
function blocks(s) { var S=""; for(var i in s) S += block(parseInt(s[i], 32)); return S; }
var output = "<body style=width:3392px>";
output += repeat(block(7), 212);
output += repeat(blocks("777777777777777777745677777777777777455677777777"), 4);
output += blocks("777777c7777777777777");
output += repeat(blocks("7777777745677777777klm77777455567777kllm77777777"), 4);
output += blocks("777777s7456777777777");
output += repeat(blocks("77777777klm7777777777777777klllm7777777777777777"), 4);
output += blocks("777777s7klm777777777");
output += blocks("777777777777777777777737777777777777777777777777777777777777777777777777777777772222222277722237777777777777737777777777722277772332777777777777777777777777777777777777777777777777777777770077777777s7777777777777");
output += blocks("777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777700077777777s7777777777777");
output += blocks("777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777000077777777s7777777777777");
output += blocks("777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777770000077777777s7777ddd777777");
output += blocks("7777777777777777377723232777777777777777777777ab777777777ab7777777777777777772327777777777777727777727777737737737777727777777777227777770770777777777700770777777777777223277777777777700000077777777s7777tgv777777");
output += blocks("77877777777777777777777777777777777777ab777777qr778777777qr7777777777777777777777777777777777777778777777777777777777777777777777777777700770077778777000770077777777777777777777777777000000077778777s777dfffd77777");
output += blocks("7nop777777777777787777777777ab77777777qr777777qr7nop77777qr77777787777777777777777777777777777777nop777777777777787777777777777777777770007700077nop700007700077787ab77777777777777ab700000000777nop77s777ggegg77877");
output += blocks("no9op777777hiiijnop7777hij77qr77777777qr7hiij7qrno9op7777qrhiiijnop7777hij777777777777777hiij777no9op777777hiiijnop7777hij7777777777770000ii0000no9o00000770000jnopqr77hij777777777qr00000000077no9op70777gguggjnop7");
output += repeat( repeat(block(1), 69) + blocks("77") + repeat(block(1), 15) + blocks("777") + repeat(block(1), 64) + blocks("77") + repeat(block(1), 57), 2);
document.write(output);

I first made tiles into sprites with @schnaader's minified data URI. 0 ~ v (which is 0 ~ 31 in base 31) represents each tile.

And I converted map to tiles by hand. This data has 212 characters per row.

Then I replaced repeating character (like 7(sky) and 1(ground)) with repeat().

I found 7s and some blocks, and another 7 pattern is repeated. So I made another function to make it compact. You can see it at unobfuscated source code.

Finally I RegPacked, and Obfuscatweeted my 2341 bytes golfed code.

It was very funny challenge. Thanks! And thanks to @xem for more tricks.

Answer 4

Python3 1638 1576 1616 1513 bytes

581 code + 932 data

↑ This top is the original level. In the middle is the PPM generated by this script. At the bottom is a diff, and this shows that the palette and the map do not agree exactly! I put this down to data glitch and not my script ;)

# 759808 is 212*14 tiles at 16*16 each - the size of the map
import lzma;B,E,R,X=bytearray,759808,range,16
D=B(lzma.decompress(open("i","rb").read())+B(E)) # put canvas on end of data array
i,P=8218,lambda x,y:8622+y*54272+x*X # 8622 is length of decompressed data
def Q(s,n,d): # copies a 16x16 tile from s to d
 # n is the stride for the source s, which is different for put and copy
 for m in R(0,256,X):e=d+m*212;D[e:e+X]=D[s+m*n:s+m*n+X]
for j in R(4): # there are 4 command sections
 j&=1;i+=1+j;r=D[i-1]<<8 # j is now truthy if this is a copy buffer
 for k in R(D[i]): # this many commands
  a,b,w,h,c,d=D[i+1:i+7];q=h>32 # unpack it; put doesn't use all these
  # do the put/copy
  for z in R(((a,h-32)[q],w*h)[j]):Q((D[(i+4+z,i+5)[q]]<<8,P(a+z%w,b+z//w))[j],1+211*j,
      (P(b+z,w),P(c+(z%w,w-z%w-4)[r&1],d+z//w))[j])
  i+=((3+a,5)[q],6)[j&1];r>>=1 # move i to next command
for y in R(2,11):Q(28<<8,1,P(198,y)) # special case flagpole
o=open("o","wb");o.write(b"P6 3392 224 255 ") # header for PPM
for c in D[8622:]:o.write(D[8192+c*3:][:3]) # decompress palette to RGB

(bytes counted without comments, line-unwrapped and second level indent being \t)

Data (base64-encoded to be pasted; decode and save as a file named "i"):

/Td6WFoAAATm1rRGAgAhARwAAAAQz1jM4CGtA2JdAACA3BlsBrac0zEPcSPZ/qSCuw0fuG0WYiRk
w+pNfoBEsFJBEXgxJ73nEPREKmuJUHyg+jhBTQcbUI0gChatJ7D6ZqYmLz4P34OFSxUMWF+aGhm2
+8mNqw264w0JIjW9ogeNpJX6pgH/xJ/D2qlfqfCuz0cOR1sPAAcMrue1y9joUaDauFLj8QhbExen
lQkUMfMePbMnn4nJ0aVXBeHdKIwSeFQdFz/Aj695kKi0x8+MXR84cpNh3U8y7deiyjbNyIgu7vLn
WBxzXhEtrV9svBETfQpxj2qYI11ALgWlhoxdoABE3ocVgE1Qo35dnoJe+1DJFvqIzFOoxSJEckUk
T89RIjARdA/Ax6UTiitivZp4EhM+xczasrm+2XFy68mA96xmEMKp9ZpoApNIU0ShMMW1Im0QFeuS
aCl43qJuintArMAeDiOlmkbDNzMzHZIgDFeklUnnKG9xHXPQXNQVyJ9I7z+rLHh1VtuXDyAErKTL
VY/Xai2pIUlSt5H1KGEExdHu3O17XKbar11Jad6nFjDKOZFwamJQTFIG6dru2UXVJq29pGCnKLlB
lOmls4agigMI7QJ5K/Rzf15ZuIQ7U9MKJ3E4llbwqs6vDk+Ln/ceRVfl5Fm/Ne056ZLDp6VIf5zs
EMWra8UnjndkigqAyp8D62AcrPFIp9EdJmgiGzfhNCQ1JptRN/z01mNomtwVJfqeLTqgvRgXXG3P
8p+6s1rjEfblMBNyMxdYvJZXLE0wgu4xhH3fiNTT+RyTIJ1MZZ1zhksfe2SnNTbL2JYGven1WPfI
YP+M4NI/vpQ4bGsuJ8w//x01GpkTLfMZtZgBhx0dx1Wu9i0JY9hhtoI2/tGR4sNHfpSs7xD/Zz+7
6Z18z3AQn4dC7Trp0WndI/zS8eRZlRgKxA/lb09MZ87ugbXnm2+oBQFSLEtg/rqg398pDWx9W4Zk
6GeRTqvp9CJ9meMagUnGHKnAj+05PE0XgEXO6r9B8ltgoHf0+wXFevBHVupfiH9MApUxd0TPzv16
Y5Rfjxao0wLcIbxKMd3vtI1rCvOdq0OysWNrtcH9EBKjx9+CnGFBFZI9w9kCMJ8ZT0m9nsNYPelL
29KbQMt+K213+7o0MS3DxeGTHSW9CiEOTzNeqvsXN6IcIxjJIkgH8MuAAAAA5PpImPBeeH8AAf4G
rkMAALsE5byxxGf7AgAAAAAEWVo=

The data file is a custom format I made for this problem and is stored as LZMA.

First all 32 tiles are serialized. There are 9 colours in the palette, and this takes 8219 bytes uncompressed. (I found that trying to compress the tiles at 4-bits-per-pixel didn't help compression at all. I did not try and brute-force the best ordering of the tiles, and I probably lose a few points here.)

There are 212x14=2968 blocks making up the map.

Then the instructions to recreate the map are now encoded.

First comes a section of "put" commands that place some sequence of tiles from the tile-palette on the map at a particular x,y. As there are 32 tiles, I specify a run of the same tile using a number bigger than 32 rather than the tile index.

Then comes a section of "copy" commands that copy some rectangle of the current map to some other place. There is a special bit-mask that marks if the copy should be mirrored.

A short example command buffer:

16, # there are 16 put commands
3, # place 3 tiles
8,2, # dest x, y
4,5,6, # these three tiles
3, # place 3 tiles
8,3, # dest x, y
20,21,22, # these three tiles
5, # place 4 tiles
27,2, # dest x, y
4,5,5,5,6, # these five
...,
8, # bits set if copy reversed (high 8 bits of a uint16 mask)
14, # there are 14 copy commands
8,2, # src x, y
3,2, # w, h to copy
19,1, # dest x, y
1,9, # src x, y
3,2, # w, h to copy
16,10, # dest x, y
...,
13, # there are 13 put commands
...
7, # bits set if copy reversed (high 8 bits of a uint16 mask)
15, # there are 15 copy commands
...

(I said short, but that's actually nearly half the total command buffer needed to make the whole map; the vast majority of the bytes in the data are the 32 source tiles themselves)

Then comes a second section of "put" commands and finally another section of "copy" commands.

Because these can overwrite each other, I can build copy parts that I later erase or change.

I can doubtless shave a few more bytes off it by - for example - turning puts into small copies and by doing the eval trick on a gzipped source-code, or playing with PNG (which is DEFLATE with image-specific filters) too. But I like things verbose as they are.

Answer 5

JavaScript: 3620 (ouch) 3429 3411

Updates

• Update #1: Removed var definitions and put the variable declarations inside brackets of first use. Removed getElementById() as it is also available on load as a varaible by ID. Using cloneNode() instead of createElement('CANVAS'). Renamed main from xMx to M. Removed the scaling feature :(, (still available in the example.)

  Added some comments to the expanded code. (That code is not updated with the removals. The line below, ("Mini code"), is.)

• Update #2: Removed the main function M() as a whole and let the code run at root. This would require the code be placed inside a load wrapper or at end of document.

• Update #3: Added statistics.

Mini code:

K=126,f=['#000','#c84c0c','#fc9838','#00a800','#80d010','#fcbcb0','#3cbcfc','#fcfcfc'],X='Å=!15d>KIRiE%>?D^?C^FVNBTJ@M^>>]ANtN?ZCW]@QM4Gb1>EVWEZAEZN@VfMI?MPckVAwNEZWNV>Q]@YT2n6d@%vN4Gb@MABMALT>JTABM>Qz@FCTI`ZEE@L?E@CDD{EE@L_A5G>%>IVEB_DHTCC{PC{HDzlz]A4o5d>KIR5G}LZ?YZIAZI`ZH]LE]BBVL>VBHXLEXBLMLAM3n7y$",2EEKIR&O30y$",2E}?Q6&o9y$",2EbD?Q6&n2pI`ZJNM`BRG~J`M`CRO9dBKIRibPC@NMBNB]6n0dBKIRib>C@CVBCE]6n1dBKIR6n3y*",~1F0G%Ii%1R6Ob")",?-1n4y*",BK0G%1Ri%I6Ob")",In8dEKIRib"*",b1F0G%Ii%1R6O>%CCD8Gb")",An9p@ciuB?LFD?`RC?Ji~F?JRBc6OUdBKIAib1Bciu1>?JFDtDM>DV>DZ>DX>QtQM>QV>a>>PT>PwPr>Pa>s>WT[][M[V[Z[XAI]AIMAICAo1eKIREJ`NGuv`3G~>{AB@MC@JJ@SJES2o2eKIREI`NGBKJ`2GCKAEABBfPT>PwPr>Pa>s>WT[V[Z[XAI]AIM^T^_^r^aA^vATA@VA@ZA@XAJ]AJSO0dHKQFXRC{NzB@D@ZNG}r>>Z>@TBB@Mw>F?C[>>^MJ@VABTACVAE_3GF%Cr>EFMP_[FAO3dHKIFFBFB[FNG}w>FMBHTFZ>HwDFS?HCACFJGFK@T>>>>{ZCCMF@VX>>PtPBE[CBACSO5dH%WBHL[ELBPLGbWwQT@W@S[v@aABDLO4dH%1>?@JB?B4Gb1?]^>v@MJBCLGF%1B]AVvESodHK?EF_@3G}w>FMBEMECMEtZ>>HSndH%I?EF`zCBP|}XSt@a>BX>CaB`M>R>>>YMBREAo3duH?J6o4d~EPFiu`]@FP|bFDVREVN]N[>CEa[aAIV>`CAo6dEK?Cl?E7G}YF9GE%BHWG>K>BRMCF?DHBDDHBN@HBI{LJ@C3o7eKIRi>K?B@?@MB?S>?CATSCMAEV@?V2o8eKIR6O6y(",E%H4&O7y(",bHCF3&O8y(",>%H4&&&#;Ø=Kxt3r@6X>8_J1ZA3TJ6VA8>>@PM2D{5HM7F@L0ES2C@L5BS7zBU>JG>x>>>3a>6a>8rA1rA3_A6_A8T[M3>M5DM7PS0FS2HS5CS7EMU@JG@x>M3PM6PM8HS1HS3ES6ES8BS?T3>T5DT7PBA0FBA2HBA5CBA7ETU@LGBx?M3Hz6DM8E@J1FS3B@J6CS8>zPT2DBB5HT7FBL0EBA2CBL5BBA7{BU>LGu1PM3FM6HM8CS1ES3@S6BS8?MDT2HT5FT7EBA0CBA2BBA5{A7>TU?LGE%1a>3Z>6r>8VA1_A3MA6TA8tDM2HM5FM7ES0CS2BS5@S7>MU?JGF%1^>2L>>4^@5s7^>8jA0lA1jA3lA5lA6l>U`|H%1fB2N>>4f@6kB7f>9kJ0gL2kA3gJ5gA6g>UR|D%1`>>2`>>4N>>6L>>7L>>9fA1^A2^A4kA5jA6sUY|P%^Al>4s6`>>9lA1Lv4`v6^hL>>UsJ]5I]9Qc4Rc9NIG1bL>>5^>9jA4lh`|1>%f>5k>9gA4R>hN|1@%1Y]6`c1Lc6[>UW]@a5?a9DPA4FPhCWG1~kAR>>4g>6N>>9Rv1fA4Nv6khf>Ug>[>4W]9Yc4`c9LIG1uNvg>5f>6Rv0kA1Nv6fhR>>21k>L]5[>9Wc4Yc9`IG1E%IB6P7ALE8WB6N5`B5HI@6P7AJE8W@6N5`@57G1F%1FX2>X2BX7Dm0Fm0Pm1@m7?X2@V9CCA0PCA2PC2G1Hx?X2@X2CX7HX7PX9Cm0?m1Dm2PDJ6DDJ7>X8?CD9>CL2>CL2DCA3>NG1D%13N>N4kN4g`5`>N8^W9gA3`?L4I?L4W?N5`?L8J?Q3FPJ4?PJ5?PL5EPJ8BPY3Hm4?m5>DJ5Em8CDR8EH`8FFN8HEL8DC2G1Pxg>3g>4R>>5lA6Lv7s3Q]4R]5Y]4Fa5HWqb2s3s4l>5gA6Nv8k>3W]4Y]5Q]4Ha5DWq>xQc6Lc7W]3Da4FX5HQq@xWc6Nc8I]3Pa4HX5DQq~19Qc9DPhDDhDHhDFhDEhDChDBhDJqu19mqE%Uf@U`>@UJ?@U`?@Uf@U`>@UCXUBP3qF%U@PEUBH3qH%UNIqD%UNAqP%UBQG3bUEQ&&';'B%?KAG@B@@p"%2_>>AC%]>j>H>G2e%O2O1DAY>I>W>6GA9Q>J>:K:%?A?%P>E1E>A>?>A?F>H1D>P1C>20B>@AF1D19,&GC1@>B1%?@1?17,&,6,5,8,4,3,>12,0,1,'.match(/../g).forEach(function(v){X=X[u='split'](String.fromCharCode(K--))[U='join'](v);if(K==92)K=91});eval(X[u]('*')[U]('f')[u](')')[U]('d')[u]('(')[U]('b')[u]('&')[U](']')[u]('%')[U]('[')[u]('#')[U]('}')[u]('!')[U]('{'));function e(k,d,i){for(s[Y]=k,i=0;i<d[L];)s.rect[G](s,d.slice(i,i+=4))}function _(d,i,q){for(S.width=R,i=0;i<d[L];++i,s.fill(),s.beginPath())F[q=d[++i][0]]?F[q](d[i]):e(f[d[i-1]],d[i])}F={$:function(d){_(Å[d[1]].concat(d.slice(2)))},b:function(d){_(Å[d[1]].slice().map(function(i,x){return(x=d[2].indexOf(i))>-1?d[2][++x]:i}))},f:function(d,i){for(s[Y]=f[d[1]],s.moveTo[G](s,d[2]),i=3;i<d[L];++i)s.lineTo[G](s,d[i])},d:function(d,x,y,g){for(s[Y]=f[d[1]],g=d[2],y=g>0?0:15,x=0;x<R;++x,y+=g)s.rect(x,y,1,1)}};R=16;c.width=3392;c.height=224;;S=c.cloneNode();c=c[G='getContext']('2d');s=S[G]('2d');c[Y='fillStyle']='#5c94fc';c.rect[G='apply'](c,[0,0,3392,224]);c.fill();for(k=0;k<Ø[L='length'];++k)for(_(Å[Ø[k]]),t=Ø[++k],i=0;i<t[L];i+=3)for(j=0;j<t[i+2]*R;j+=R)c.drawImage(S,t[i]*R+j,t[i+1]*R)

---

Blah blah:

– Demo at end of post.

Using canvas as base for an attempt to solve this. Ended up with about 6000 chars, but after some fiddling (and a custom compression - with fiddling and tweaks on that as well) I'm now at the stated number. Still high, but then again the quality is good ;-).

It also includes a scale option, first argument to the xMx(), aka "main" function. 1 = normal size (as in 16 bit tiles). There is not much room for tweaking, so if one use fractions some of the tiles does not fit best together. At whole numbers it should be OK. ^[1]

But: warning, going up, quickly eats resources and makes for a huge canvas. (It is all painted in one go.) When the original width is 3392 pixels it quickly becomes huge. ^[1]

^{[1] As of update #1 this has been removed. It is present in the demo.}

---

Stats:

• Main code          　:  870
• Compression:
  • Main data       : 2176 (17,480 bits)　
  • Key             :  128 ( 1,024 bits)　
  • Code            :  236 　
  • Whole she bang : 2540 　
  • Decompressed data : 5608 (44,864 bits)　
• Total  　: 3410 　 _[1]

_{[1]: +1 byte, ";", between the main / data code.}

The compressed data is one array, Å, and one "object", Ø. Where Å is holding the tile placement and the Ø holding the data for painting the tiles. The Ø should have been an array as well – but as my code started out with something like this:

var tiles = {
   brick: [
        ...
   ],
   qmark: [
        ...
   ],
};

It ended up as is. I'll perhaps see if I can't fix this. Ideally I would have made it parseable with JSON instead of eval(), but that would not be a point in a contest like this. As it is now it can not be JSON parsed due to missing quotes around the id parts.

---

Demo

Here is a fiddle where one can view the code in action. The code in the fiddle I have expanded somewhat (And added some HTML / CSS styling around the world – but the image of itself is self sustained.):

MARIOS WORLD

---

Expanded code:

Expanded and (a bit) rearranged code:

var D, C, c, S, s,   // Document, canvas and shadow canvas.
    R, F, Z, X, 
    Ø, Å,            // Due to the compression we have a couple of non-ascii
    K,               // variable names.
    L = 'length',
    Y = 'fillStyle',
    u = 'split',
    U = 'join',
    f = [
        '#000',    '#c84c0c', '#fc9838', '#00a800',
        '#80d010', '#fcbcb0', '#3cbcfc', '#fcfcfc'
    ]
;

/* ----------------------- data unpackeer and loader ------------------------ */
X='Å=!15d>KIRiE%>?D^?C^FVNBTJ@M^>>]ANtN?ZCW]@QM4Gb1>EVWEZAEZN@VfMI?MPckVAwNEZWNV'+
'>Q]@YT2n6d@%vN4Gb@MABMALT>JTABM>Qz@FCTI`ZEE@L?E@CDD{EE@L_A5G>%>IVEB_DHTCC{PC{H'+
'Dzlz]A4o5d>KIR5G}LZ?YZIAZI`ZH]LE]BBVL>VBHXLEXBLMLAM3n7y$",2EEKIR&O30y$",2E}?Q6'+
'&o9y$",2EbD?Q6&n2pI`ZJNM`BRG~J`M`CRO9dBKIRibPC@NMBNB]6n0dBKIRib>C@CVBCE]6n1dBK'+
'IR6n3y*",~1F0G%Ii%1R6Ob")",?-1n4y*",BK0G%1Ri%I6Ob")",In8dEKIRib"*",b1F0G%Ii%1R'+
'6O>%CCD8Gb")",An9p@ciuB?LFD?`RC?Ji~F?JRBc6OUdBKIAib1Bciu1>?JFDtDM>DV>DZ>DX>QtQ'+
'M>QV>a>>PT>PwPr>Pa>s>WT[][M[V[Z[XAI]AIMAICAo1eKIREJ`NGuv`3G~>{AB@MC@JJ@SJES2o2'+
'eKIREI`NGBKJ`2GCKAEABBfPT>PwPr>Pa>s>WT[V[Z[XAI]AIM^T^_^r^aA^vATA@VA@ZA@XAJ]AJS'+
'O0dHKQFXRC{NzB@D@ZNG}r>>Z>@TBB@Mw>F?C[>>^MJ@VABTACVAE_3GF%Cr>EFMP_[FAO3dHKIFFB'+
'FB[FNG}w>FMBHTFZ>HwDFS?HCACFJGFK@T>>>>{ZCCMF@VX>>PtPBE[CBACSO5dH%WBHL[ELBPLGbW'+
'wQT@W@S[v@aABDLO4dH%1>?@JB?B4Gb1?]^>v@MJBCLGF%1B]AVvESodHK?EF_@3G}w>FMBEMECMEt'+
'Z>>HSndH%I?EF`zCBP|}XSt@a>BX>CaB`M>R>>>YMBREAo3duH?J6o4d~EPFiu`]@FP|bFDVREVN]N'+
'[>CEa[aAIV>`CAo6dEK?Cl?E7G}YF9GE%BHWG>K>BRMCF?DHBDDHBN@HBI{LJ@C3o7eKIRi>K?B@?@'+
'MB?S>?CATSCMAEV@?V2o8eKIR6O6y(",E%H4&O7y(",bHCF3&O8y(",>%H4&&&#;Ø=Kxt3r@6X>8_'+
'J1ZA3TJ6VA8>>@PM2D{5HM7F@L0ES2C@L5BS7zBU>JG>x>>>3a>6a>8rA1rA3_A6_A8T[M3>M5DM7P'+
'S0FS2HS5CS7EMU@JG@x>M3PM6PM8HS1HS3ES6ES8BS?T3>T5DT7PBA0FBA2HBA5CBA7ETU@LGBx?M3'+
'Hz6DM8E@J1FS3B@J6CS8>zPT2DBB5HT7FBL0EBA2CBL5BBA7{BU>LGu1PM3FM6HM8CS1ES3@S6BS8?'+
'MDT2HT5FT7EBA0CBA2BBA5{A7>TU?LGE%1a>3Z>6r>8VA1_A3MA6TA8tDM2HM5FM7ES0CS2BS5@S7>'+
'MU?JGF%1^>2L>>4^@5s7^>8jA0lA1jA3lA5lA6l>U`|H%1fB2N>>4f@6kB7f>9kJ0gL2kA3gJ5gA6g'+
'>UR|D%1`>>2`>>4N>>6L>>7L>>9fA1^A2^A4kA5jA6sUY|P%^Al>4s6`>>9lA1Lv4`v6^hL>>UsJ]5'+
'I]9Qc4Rc9NIG1bL>>5^>9jA4lh`|1>%f>5k>9gA4R>hN|1@%1Y]6`c1Lc6[>UW]@a5?a9DPA4FPhCW'+
'G1~kAR>>4g>6N>>9Rv1fA4Nv6khf>Ug>[>4W]9Yc4`c9LIG1uNvg>5f>6Rv0kA1Nv6fhR>>21k>L]5'+
'[>9Wc4Yc9`IG1E%IB6P7ALE8WB6N5`B5HI@6P7AJE8W@6N5`@57G1F%1FX2>X2BX7Dm0Fm0Pm1@m7?'+
'X2@V9CCA0PCA2PC2G1Hx?X2@X2CX7HX7PX9Cm0?m1Dm2PDJ6DDJ7>X8?CD9>CL2>CL2DCA3>NG1D%1'+
'3N>N4kN4g`5`>N8^W9gA3`?L4I?L4W?N5`?L8J?Q3FPJ4?PJ5?PL5EPJ8BPY3Hm4?m5>DJ5Em8CDR8'+
'EH`8FFN8HEL8DC2G1Pxg>3g>4R>>5lA6Lv7s3Q]4R]5Y]4Fa5HWqb2s3s4l>5gA6Nv8k>3W]4Y]5Q]'+
'4Ha5DWq>xQc6Lc7W]3Da4FX5HQq@xWc6Nc8I]3Pa4HX5DQq~19Qc9DPhDDhDHhDFhDEhDChDBhDJqu'+
'19mqE%Uf@U`>@UJ?@U`?@Uf@U`>@UCXUBP3qF%U@PEUBH3qH%UNIqD%UNAqP%UBQG3bUEQ&&';

K = 126;  // Key pos (char) counting down.
('B%?KAG@B@@p"%2_>>AC%]>j>H>G2e%O2O1DAY>I>W>6GA9Q>J>:K:%?A?%P>E1E>A>?>A?F>H1D>P'+
'1C>20B>@AF1D19,&GC1@>B1%?@1?17,&,6,5,8,4,3,>12,0,1,').match(/.{2}/g).forEach(
    function (v) {
        X = X[u](String.fromCharCode(K--))[U](v);
        if (K === 92)
            K = 91;
    }
);

/*
* Initially JSON, but got lost in compression work + a somewhat bad design
* on the obj. to begin with. Is eval, at least for now.
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
try {
    eval(X
    [u]('*')[U]('f')
    [u](')')[U]('d')
    [u]('(')[U]('b')
    [u]('&')[U](']')
    [u]('%')[U]('[')
    [u]('#')[U]('}')
    [u]('!')[U]('{')
    );
} catch (e) {
    console.warn(e);
}


// Scaling function
function z(a) {
    return a.slice().map(
        function (v) {
            return v * Z;
        }
    );
}
// Tile painter "normal tiles"
function e(k, d, i) {
    for (s[Y] = k, i = 0; i < d[L];)
        s.rect.apply(s, z(d.slice(i, i += 4)));
}
// 
function _(d, i, q) {
    S.width = R;
    for (i = 0; i < d[L]; ++i) {
        s.beginPath();
        F[q=d[++i][0]] ? F[q](d[i]) : e(f[d[i-1]],d[i]);
        s.fill();
    }
}
F = {
    $ : function (d) {  // Expand a tile (e.g. add border on top
                        // of "normal" bricks as with the "in-air".
        _(Å[d[1]].concat(d.slice(2)));
    },
    b : function (d) {  // Replace colors. (Used for bushes.)
        _(Å[d[1]].slice().map(
            function(i,x){
                return(x = d[2].indexOf(i)) > -1 ? d[2][++x] : i;
            }
        ));
    },
    f : function (d, i) { // Free-paint (fill). E.g. "hill-sides"
        s[Y] = f[d[1]];
        s.moveTo.apply(s, z(d[2]));
        for (i = 3; i < d[L]; ++i)
            s.lineTo.apply(s, z(d[i]));
    },
    d : function (d, x, y, g) { // Diagonal lines.
        s[Y] = f[d[1]];
        g = d[2] * Z;
        y = g > 0 ? 0 : 15 * Z;
        for (x = 0; x < 16 * Z; x += Z, y += g)
            s.rect(x, y, Z, Z);
    }
};
// Main function.
function xMx(h, k, i, j, t) {
    Z = h || 1;
    R = 16 * Z;
    D = document;
    C = D.getElementById('m');              // Doc canvas
    c = C.getContext('2d');
    S = D.createElement('CANVAS');          // Memory canvas
    s = S.getContext('2d');

    C.width  = 3392 * Z;
    C.height =  224 * Z;
    c[Y] = '#5c94fc';
    c.rect.apply(c, z([0, 0, 3392, 224]));  // Blue sky (rest is tiles)
    c.fill();

    for (k = 0; k < Ø[L]; ++k) { // Loop coordinate array. This has fixed
        _(Å[Ø[k]]);              // order.
        t = Ø[++k];
        for (i = 0; i < t[L]; i += 3) {
            for (j = 0; j < t[i+2] * R; j += R)
                c.drawImage(S, t[i] * R + j, t[i+1] * R); // Apply tile.
        }
    }
}

xMx(); // Load main.

Answer 6

Python 1331 1326 1314 1272 1268 1217 bytes

(code: 219 214 202 186 182, data: 362+750=1112 363+723=1086 346+689=1035)

The idea here is that I first generate a map one 16th the size in each dimension, where each pixel is colored by the index in the tile map. To ensure that the same pallette was used, I first combined the given tile map and the map into a single image. From this and the tile map (both minified pngs) we can now regenerate the original map. (The code for this process can be seen below the submission code). It should be noted that I saved the tile map as a file "t" and the generated map as an image "m"

EDIT: I started exploring how the ordering of the tiles influenced the compression, and for the sake of exploration I generated 10000 random permutations and compressed them with this result: This was all with the tiles in one line, as that reduced the code quite a bit. I tried similar things with different configurations (2*16, 4*8), but none with a better average result.

Assuming that png would compress better with greater continuous similar regions, I built a tool that would let me move the tiles around, and using what I perceived to be a more continuous image I got the tile image down to 723 from 750b.

EDIT2: Afte rmuch (much) more analysis on how png actually works, and a lot of experimenting (still ongoing), the images have now been compressed even further. Link below updated. I'll write more about this analysis later when it is complete.

New images used are here: https://i.sstatic.net/gofpw.jpg

Here are the other images generated in the process: https://i.sstatic.net/9s1GD.jpg, though some are a bit outdated because of above edit.

import PIL.Image as I
O=I.open
t=O("t")
m=O("m").load()
o=I.new("RGB",(3392,224))
s=16
for i in range(2968):y=i/212;x=i%212;v=s*m[x,y];o.paste(t.crop((v,0,v+s,s)),(x*s,y*s))
o.show()

The script I wrote to reduce the map is pretty crude, but here goes (also might be outdated because of changes above):

from PIL import Image

blockSize = 16
combined = Image.open("combined.png")
tileImage = combined.crop((0,224,256,224+32))
w,h = tileImage.size

tiles = []
for y in range(0,h,16):
    for x in range(0,w,16):
        tiles+=[list(tileImage.crop((x,y,x+blockSize,y+blockSize)).getdata())]

referenceImage = combined.crop((0,0,3392,224))
w,h = referenceImage.size

mapImage = Image.new("RGB", (w/blockSize, h/blockSize))

colorScale = 256/len(tiles)

for y in range(0,h,16):
    for x in range(0,w,16):
        i = tiles.index(list(referenceImage.crop((x,y,x+blockSize,y+blockSize)).getdata()))
        mapImage.putpixel((x/16,y/16),(i*colorScale,i*colorScale,i*colorScale))

mapImage.save("map.png")

Answer 7

Perl 5 + PNG: 689 + 593 = 1282

A failed attempt to replace PNG compressed tile map from Christian's solution with Perl code. In the end it is 65 bytes longer. Takes the same PNG tiles on input and generates a PNG on the output.

Usage: perl mario.pl <tiles.png >world.png

eval'+s/\d+(<?)(.+?)\1/$2x$&/ge'x2?$x|=$_:
map{/A/&&y'{}['Y';push@l,split"";y/D-IMNOY[|_@-_/EF@EE}JKLY~__@/;
s'@Y'YY'g;s'y@'yy'g;s'@E'DE'g;s'E@'EG'g}($x)x$_
for@z=qw(256@ 1
4<19@MNO14@MNNO8@<6@I 1
5<8@MNO16@M3NO16@< 2
22@X57@8T3@3TX14@X11@3T4@TXXT56@YY 3
203@3U 1
16@X3@TXTXT21@[|9@[|18@TXT14@T5@T5@X2@X2@X5@T10@2T6@Y2@y10@YY2@y12@TTXT31@QPS 1
5<2@H45@< 38@[|162@U3VU 1
5<17@H30@< 28@[|133@[|14@[|21@PPWPP 1
4<11@A3BC7@ABC15@ABBC3@<10@PPRPPC48@2<69Z2@15Z3@64Z2@101Z< 1);
$p=GD::Image;use GD;$f=new$p(3392,224);$k=newFromPng$p('-');
copy$f($k,map$_*16,$i%256,$i++>>8,31&ord,0,1,1)for@l;print$f->png

Answer 8

JS: 4012 3921 chars

JS is used to unpack many Unicode characters and write an img tag which src is the image given in the OP, saved as PNG, compressed, encoded in base64 and trimmed.

document.write(unescape(escape('🁩𫑧𘁳𬡣👤𨑴𨐺𞱢𨑳𩐶𝀬𪑖𠡏𤡷𜁋𡱧𫱁𠑁𠑎𤱕𪁅𥑧𠑁𡁕𠑁𠑁𡁧𠡁𣑁𠑁𠱋𮡺𠑅𠑁𠑁𡰱𠡍𥡅𥡣𫁐𮡉𥁁𭱁𠑁𡀸𭡌𠑁𬑁𡀸𛱐𮑁𜁂𡀸𫑄𩰸𭡐𮀸𥠫𫑇𠑁𠑗𣡫𫁅𤑖𤠴𜡵𮡤𤰴𬡢𤑂𤱇𥑓𡡉𜑭𡡍𫁉𥑅𬠰𠡷𭱣𣑍𬱨𥡄𣁺𭡸𢰲𬁍𜐶𠡅𤰷𬁤𣱭𩡑𫑶𝰶𬑫𡐲𣡲𩱄𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𠑁𜡍𣁸𜡋𥡷𤁏𨡡𥐶𤠯𥐷𣁣𬠯𝐱𞑎𚱈𤁵𣁑𢡘𡁤𪱗𫁐𪱦𝑎𮑘𢰯𚱴𩡒𩡸𛰶𢑗𣁳𭁮𩡢𪱗𪁐𪱦𝑎𮑘𢰯𚱴𩡒𩡹𩑇𪑂𪠷𨡮𤀳𢁘𫠲𡡏𫡦𫁃𮠳𬐳𞁤𛱘𩁩𪑈𚱇𝱤𛱕𤁮𨑫𜡖𣱫𩠱𣱹𜱋𛰫𩁦𥁦𪑓𢁩𫡏𡡎𝱗𣡈𫑪𜑆𚱪𨱬𮐯𜱱𦀰𩠯𩡥𪡪𩡉𫡌𞑧𩡹𜱊𡡬𥀵𢀫𥁣𫁹𭠯𬡘𜁘𞁮𪁲𪁅𢡈𪡆𞁎𮑒𦡕𚱒𛱫𜱊𨱲𛰶𜐲𫐴𭠶𚰵𥀯𬁪𤁂𮠶𨡫𤁔𪡨𮀷𪑶𤡶𪑶𝡖𞑆𞑣𛰫𩡫𡐷𠱮𦑔𬑑𦑣𣑱𜀴𝁫𩐴𬠰𨠴𬠫𫁦𤡦𜱍𛱔𝡖𩡈𥁒𛰯𪡢𢁥𩱚𤠳𢡎𫁔𬁈𞑔𞑋𚱫𛱷𨰸𫱂𨡺𣁤𝀵𬡈𦑩𝑒𜑊𞑨𥁰𜱸𥀹𢰫𫐯𭡂𞁥𥑅𛰹𡑏𚱍𦐷𩑒𨑕𩑏𤁕𦀶𣠰𦀯𤱶𬀯𮁁𣡱𢱓𛱮𬱴𨑂𫁈𨱫𜡖𣱫𩠱𤀰𬠶𥀯𠱶𬑔𣀰𫠴𠠰𫁂𛰰𬠶𣠰𥠯𦁺𣱶𚱗𮡷𜁇𜑪𜡰𡡫𥀵𢀫𥁤𡰯𪱶𝑲𚱐𝠷𚰵𫰫𛰸𪰶𫡏𤁱𛱮𩑣𭠫𭠱𣱮𛱈𛱚𬡺𠡡𥀫𭁦𥁘𦀯𛰶𠠹𥁘𩡇𩐱𭱏𚱕𞑈𡰵𢁳𦑬𨡧𝱺𩀷𜑥𝐫𚰴𦁖𣰫𩱴𤰯𪱶𝰶𝡺𛱮𠑚𦀶𩀷𣡗𛱤𜡕𝁦𮀲𪑢𩐳𚰵𫑍𞀳𩐹𦁵𩡶𩑆𝱔𭡙𥁕𭠵𨠫𚱵𭠯𫀷𜁺𤱈𥑑𠱋𢱧𭑏𪁺𪑊𡀷𩡄𝁉𥱦𦡸𤁈𦑣𡡸𬑅𡑗𨑅𝑮𥱯𜡳𭱵𥡃𫱊𤱕𠠸𝱚𩱲𝰲𨑆𝱱𨑕𠠱𜱘𞑢𜡵𮐸𨡦𠐶𛱲𜡥𛱸𝱡𣑅𛱒𭑨𤀯𜱰𜰴𡰵𞁭𝑗𝱇𝑋𭑑𩁖𩑖𢀲𢁷𮡔𡐶𛱲𜡥𜑸𚱭𪠹𫱡𥠯𡰯𤱮𤀯𜐷𣑆𩡥𮡙𬡥𥁓𫀯𢁐𩑮𛱪𞀹𞁲𬑥𭡒𝱈𢱦𨠵𬁈𞁲𞑋𨰯𛱔𬱷𥠹𝱎𪑴𝑎𡱖𛱌𣡃𛱌𤁅𝱐𭡋𝑮𬠸𩁸𪑮𜀫𝡤𞁉𛱥𫁐𛱸𝱍𪁘𩑺𝁮𩁔𮁲𫁣𭱐𪡙𝠳𬀲𩑰𤡔𞁯𢡋𚱪𩁃𩠯𬡔𭡷𩁺𝁤𜁳𞁤𜡕𭑰𩡏𫡳𫱏𛱡𥐸𝡚𞁢𚱧𩁩𫡱𨐯𜱇𝑋𜑕𭁯𥀲𥱈𛱬𢱥𞑍𞁎𛱑𣑸𥀹𣡦𨡔𩑬𝡱𥰰𬀱𢱧𭠵𤑮𛱘𣡄𛰰𪡍𬰯𤱘𜠰𜡰𩑩𫡴𬑒𥁯𣀫𥡊𛰹𮡑𤁸𣁺𣁐𜱖𩁬𤁱𦁫𬀷𢱨𭠰𫀯𢱫𩠲𝱯𢀴𬀵𪱶𝑹𭀶𥱶𩑭𫡤𬡮𝁙𝡃𛱬𤱦𛱣𜁄𞁕𞁹𥀹𝑑𥠯𞑁𜑃𩡺𢁯𜱷𪠹𬁔𮀯𛱧𭁋𦡔𩑬𝡱𥰱𬁺𢑍𞑊𩡹𬁈𞑵𝡂𚱋𩑚𣀫𢠶𚰳𭱫𝱊𫡚𩡓𫡳𫱇𛱡𥐸𝡚𞁢𚱫𩁩𫡱𦀯𞐱𝡊𭱅𝱊𬡚𩡑𫡳𫱇𛱡𥐸𝡚𞁢𚱫𩁩𫡱𦀯𮑥𬱴𬱆𣡹𝡹𥰰𬀱𢱧𭠵𤑮𛱘𣡄𛰰𡁍𜀯𤐯𠡒𥠲𤱵𝠸𫁐𦡕𠱶𤱘𞁱𤠯𨡵𩱦𪑈𫑡𛱧𩡪𣁌𠡔𨱵𬱬𭁋𩁓𫱌𚱕𢠯𜑺𤐯𞑁𮡎𤀰𛰷𠠳𠠶𪱎𭰰𠑕��𣑢𥡍𫁃𝠲𬡪𩁡𭑔𢡒𭁦𭠰𡰲𤡐𢁃𜑩𠡳𦡱𨠯𠠲𥡗𣑦𦡪𭱳𣑅𬑪𞁕𫡆𣱹𩐱𚱋𮡬𣡚𪱐𛱎𡐶𜱐𤡦𝁹𝑎𞑒𥑉𨡹𨡸𤱣𥐷𢠷𦀴𬡏𥐱𫑑𭡹𭁡𫠴𭠸𦡣𪐯𫰶𠑍𝑖𞑰𣱋𩁫𝰷𝀰𫡡𩑹𢑮𞑘𭁄𝁘𚱣𭑑𛰳𡡂𥱣𫱦𠑐𠡶𭡁𬱋𠑁𠠹𢱃𩱁𩱅𫱕𡡁𠡁𢡑𫱋𠑋𠑓𠡑𥑁𥑉𫑃𠑧𠱯𤡅𢁴𚱑𪡆𝑷𜁵𝑅𢁓𝠳𨡶𪠷𡰹𫁥𦡔𨡘𣱰𬰳𜁥𬁪𜑹𞁖𣑮𠡘𥱹𣱂𩑶𡰱𭱉𢑤𮁈𛱱𥁘𝱤𝁦𦐳𬱲𮡡𩡡𝑬𢡮𚱺𮁍𚰸𝑆𬑰𣱃𣱬𫑣𮑶𩑈𩱮𣁩𝡯𣁱𜱨𞑪𩑺𭁙𥑃𜡘𩁖𢡑𥁵𤡈𩑘𡡋𝠶𤱧𮡨𨡮𦡷𪐸𤑢𫑒𠡫𫑶𜠷𜀯𮁶𦡗𫑫𚰱𮡡𦁏𥡐𠰯𨐶𮡌𝑤𥑰𬁘𥡓𥑇𩑌𨰰𪁦𪱙𣁹𦑵𮠹𢱑𥁰𩁢𭠳𮀹𪡥𤱶𣱰𭁲𫡕𜡔𝁐𜀳𢑏𨡹𪱴𪰴𢐶𦁚𮡄𞑌𮁔𥑆𝑣𦁖𡁤𚰲𣡳𨡷𨱌𬑵𥱹𥁁𬡋𠱷𬡱𪱋𜁶𣱧𝑒𥑁𬠳𫁯𢑃𠡡𥡁𫡆𞑔𫱋𡁣𭑐𫰳𬑏𝰹𣑢𨐳𜁮𮑱𨡓𝱌𝑄𨱯𣀳𝱚𭐲𤁣𠡇𢑧𠱱𠠳𫱋𢁇𤠴𠱔𬁥𣀶𤱒𨑭𬱙𥁷𬡲𥁗𩑐𤡥𝁺𬑪𪑘𝁃𝠯𜁃𨑲𣁲𞀯𫁺𨑑𢱱𪑴𫁐𞁑𜱶𮠲𢠷𭐳𨰫𫱚𛱌𝠯𤱙𩑒𥑃𨑱𨠴𤡦𨱕𦁸𫑺𠐲𬀴𩡸𨡢𜠶𣑂𜑣𞑬𣰹𜡄𢱫𣡁𥁒𤑘𢁰𭑁𢱭𣠲𤑁𜱶𮠲𢠷𩑺𤱧𚱲𫁳𬀴𠑱𤐰𠡎𡡈𚱊𦁧𥡕𡱢𣰯𩱸𬡥𫠸𦀲𩁵𞐸𤑪𚱘𝱘𤑐𬑧𭱂𣡗𢱨𪠰𫱙𬰫𝑔𩡅𥐯𝁴𬰵𫠹𡁐𝑘𥠶𪑱𚱋𮀷𜰹𭑢𥀳𢱡𡁏𡡋𚱍𨑖𝐱𥡍𨡳𩱂𬡥𫠸𦀲𞑭𪁁𞑘𣠵𫡷𢱱𪑅𩠷𩀲𭡶𥐰𠠹𬱍𮁌𣠯𫁵𝡙𠱱𚱲𣁙𩱷𢁖𮠲𥐷𛱑𩁖𮁲𜑴𣁮𡑋𬑊𤀵𨡌𮑗𜡤𞑂𡁥𛱐𦑮𭠷𝱥𩁣𦡕𝡣𬱨𩐳𣱁𥑕𠑃𨱡𝰴𢁓𠡷𥡁𢱴𢀯𬁁𞁋𩱆𤱩𛰰𪱦𡡁𠱰𤡐𚱔𤁩𩱁𥑯𫑌𭑓𝱱𠑰𠱋𩱁𢑧𢡑𡑆𤑅𫱃𠱯𠱕𠡂𤑁𢱑𪱯𠑆𢑓𥑁𠱫𢡋𠑁𤱃𫠶𫠯𤡂𠑚𠡋𞑄𛱰𩱷𢑧𫁥𪀯𜁧𨱆𤑃𬡒𛰶𤑐𠱯𠑕𫱶𩁊𢁸𤑁𬑕𥁶𪱺𝁯𠑆𢱊𜱩𩀹𥑁𠱫𡑲𜑐𚱱𠑁𤱃𥑵𝑌𬑯𠰰𠑱𠑧𬑁𫁁𤑕𠑃𪱊𢱁𠡓𡑬𠑁𬁃𤱧𠑅𪁊𤑁𢁷𮐹𝁤𫡄𠑉𤡆𡑕𢁕𩱆𢡨����𡑱𨠯𜱭𢱑𭠳𠱙𠑨𝰸𨱹𠱚𬁣𭑈𬑎𮁉𠡧𬑁𤱎𥠹𜁯𣑃𢑅𬀱𫠯𤱧𠑉𪁓𜱓𨰹𢱁𠱩𥡐𩁊𡁷𬑁𠱎𥠷𤱵𫁂𮡘𫠹𭡥𦡣𮡷𡡁𣀹𥠷𤱵𫁂𢁚𛰯𢑂𜱈𩑧𝁁𩑱𫡥𥐰𫱐𮑫𠑂𞁏𪁁𬁦𤱧𡁂𤑁𪡷𞐰𥑺𝱕𣡖𠑁𡱃𩱁𨱨𪱯𠑃𢱬𡁤𥀵𭡚𞐵𬡥𨱁𫱊𩐰𩱢𫱵𞑴𝰹𠡧𠰹𡱃𩱁𢑨𪱯𠑃𢱬𡁤𤰵𝑒𪱕𤑄𭡖𩐰𬡰𤑥𜱶𫠷𮡆𠠹𠡏𞑚𝑓𩑬𠐯𞑱𝁧𮁘𥑙𪁶𢡶𞁎𣡎𜑴𞐸𬁶𨱙𤑧𞑓𪁴𫐳𡰱𞐯𪱪𢑐𝡪𠱄𬑨𠱆𢠱𪱐𤱭𬱨𬡍𪁹𚰱𠱳𥡅𫁑𪑕𤑩𪱗𪠶𤑌𢀰𩰰𬑃𤱩𤑓𪑕𥁔𠠴𬑬𢀱𤱙𣐶𩰯𭱷𣠯𩠰𜑤𭡷𡰹𫠸𩀫𚱯𮑕𡡤𪡮𜱑𬱳𨱙𣡤𢰳𜰴𬀵𥡢𦁙𞐲𦁭𠡲𤁹𢡂𣁫𠡶𥀲𭡘𩁴𜡏𜰹𛱷𪰶𜁦𜑊𢑶𫁒𫡌𣱺𝠷𬡏𢑢𝡷𣠳𬑖𭱒𩑵𭑸𭀯𣁆𭀸𞁇𥠯𦠵𞑷𢡌𜱇𡁘𤱨𛰫𨑥𥡗𜐶𣱤𡠶𚱴𛱙𩱅𭑑𠰹𤁡𜑤𜠳𥐷𩡮𛱄𥀷𬀫𥑇𡑉𝡶𮑉𬀰𪁑𜁆𭑎𜱒𢁕𛰲𫑡𚱗𣑃𜱴𫡮𜱑𬱳𨱢𣑭𢱐𪑮𫁌𬱮𢱐𤑢𡑵𤑃𞑐𨐰𩁭𜱘𝱦𪠹𡁔𛱰𚱫𡱆𢑡𪀶𡰴𦐵𫱴𢱴𢰫𪑴𮀶𮐳𭁈𝱐𩁂𦑩𭑘𮁍𣑹𝡘𮐵𥠹𜱲𜱁𡑪𩡙𭁤𢱈𩠱𬠵𮁵𭑨𭑦𥱍𩡫𣱃𦁉𡁥𫡴𨑵𝱢𫱤𭠷𛱨𢠱𬰯𬑄𠡮𥑇𣑤𮑲𚱸𜱱𥡱𡑏𪑴𮀹𝡱𤐵𝡊𦡐𬠴𭡌𣁐𭑸𩁙𝁧𨐷𥡶𬡷𥁹𭐳𭑨𝱴𭡈𪁴𩡖𠡕𪱁𭡑𜠹𤁡𭁖𜠳𝀯𨰳𛱇𤠷𥑈𩡸𭡣𮁙𜱶𢁚𜀫𛰰𞁸𩠰𩡄𭡊𠡁𥰹𩁵𮑢𫱈𬡋𫱆𪡩𦡫𜑑𞁅𞁮𥀴𢑋𤡆𠡺𤁊𣱧𪱱𠑃𡑆𤱮𡱖𤑓𥡂𢡕𡑬𤑓𫁁𚱍𞑘𝁥𥁶𢑚𡡐𥁡𨱚𝑂𩑣𫑧𥱏𢡭𩡑𦑆𛰳𥁹𠑇𩁑𫡒𢡕𠑒𥀷𭑷𩑃𠱮𤑇𥡗𚱮𢑰𩑚𤐶𞁤𩑹𭱺𝱺𤱄𢑯𫑢𩁒𥑦𛱎𤁊𛱚𩑚𞐰𬁑𥱃𛱎𛱵𝡂𫱁𢡖𞁣𜁂𬡔𢡂𤑡𞁚𭐳𭱏𬑳𞁍𪑩𥡵𜑧𤑆𛰱𥁹𠑍𞑂𢡕𡐹𝰫𞁫𬑅𩱅𥡣𬱌𠡁𥰹𦡵𮑣𫱄𬡎𫱇𬑊𥁖𡁙𮠶𛱌𪰶𠑩𡑖𤑴𤱖𠱨𠱏𫰲𭡶𠑣𡡐𤱡𨱔𝁈𝑓𨑄𦑯𫑢𞑒𪱕𛱆𤁊𢑺𭱈𜑓𫁂𡡡𡁚𜰳𪱇𡡥𬱍𬑳𬁖𩡎𠡲𮀱𫡆𝑹𨑄𢑯𫡢𜑩𫰫𫑬𭀸𬡆𥠸𝡄𨱫𮑁𥱯𝱗𫡴𜡱𝱢𞁦𬱢𩡪𣀲𩰴𬁒𮁘𩁥𥑵𢰷𤱆𡁑𥰴𜑤𡐱𤡐𡱒𤡌𜱋𭱊𠱶𝁰𝑦𝁊𠱶𜡇𠡌𪱁𭁔𜡴𦁤𭀱𣰳𝐯𭰰𛱇𩡬𠑸𠱋𫰫𢑂𢑕𞑊𬑸𭱷𮑱𜐳𞁺𦠴𫡢𥡯𢱩𚱢𣡙𥑯𢡃𭡹𡡂𣁫𠡶𥀲𭡘𩁴𜡏𜰹𛱷𪰷𡑦𥡁𪑃𪱮𝑑𮑷𬡵𝰲𜡗𠡶𮡺𭡧𢡈𞐶𤡨𜐱𬁦𢰯𩀫𠡯𥠫𤐴𢡣𩱎𝡥𨑎𨱙𝡴𞁬𫰳𦁉𩡬𠡦𝱆𜁂𨡴𬱷𡁃𮑹𡠶𮠹𤑏𨡭𢡙𥡦𥑧𮠹𛱸𤁭𢡩𦁓𥑳𫀸𣱯𬱉𢡤𞁂𢁙𡐱𣑱𜁲𝱤𣡆𥁩𪡣𢡊𝐷𣀫𝱶𮀹𬁗𥑚𬡪𠱫𢱄𭡫𭱗𡰫𩡄𞁷𝁇𫐱𩐲𩡬𡁮𡁬𪐯𤁬𣑴𩡵𫑬𪡊𩡦𞐹𣰯𬡺𬱁𩡚𩁧𢑦𫡦𥡬𡱡𝁷𬁃𩰷𝑍𡡰𭡭𭰯𣑏𭀳𢰳𩑗𦁲𠠯𦀷𝑖𣱁𫁲𩠱𦁪𝁆𬑙𮑘𜰳𩠴𥡬𞁶𞁈𜡘𜁪𩱤𣱓𪑂𤡮𮁦𢡯𭁎𞀫𡠵𪁸𣑯𫐱𩐲𩡬𠑓𢱁𝐵𫡳𢱔𩱸𢑇𠑴𬑘𮑗𣁌𩡈𪡥𞁦𦐫𨡆𝱚𚱫𡡤𠡗𬑡𬁬𨱦𢡖𡀳𪱏𩁺𥁈𢡑𭱫𠡁𤁺𠡲𬱗𥐫𤁏𚱁𠑶𥐱𬠲𭱦𜑌𜁋𥡐𪱪𠠳𥑦𨱬𠱃𨱉𦑅𨑧𤡉𫱁𤐵𢱅𡱑𤑋𥱅𠡅𬑑𩱸𢑅𠱖𤡋𦡂𥱯𝡦𥱹𜐳𥐯𪡲𪱮𫑁𦡹𥑉𢑧𩱡𬡈𤁧𥁋𩠷𭐷𛰫𫑴𚰰𤠳𪱉𣑓𠡁𫁕𤁓𤡑𡑱𩰷𪱉𣑓𠡉𣑅𨑧𤡉𫱁𤐵𢱅𡱑𤑋𥡅𥡯𡑡𝱲𭁔𩐴𣑣𫁃𡁕𞐲𥱹𜡄𤑦𫡮𩐴𡰶𣁎𢰱𬰯𢱍𭰯𨡘𬑋𝱺𠡎𮁹𩡨𢑑𝱋𚱊𩑄𜡧𪡖𤀴𢁉𭡫𭱗𣑦𝱂𩡈𪡥𞁑𤑋𝱐𛱅𞁚𞑚𫱋𨡔𤁌𞁎𞐯𩀸𝡵𨡢𮡃𛰸𮐰𡡴𩰫𬑦𤑇𤡦𢡯𬱧𛰱𩰫𤁏𞑷𩑸𝑯𛱹𩑓𛰷𭱃𣡣𜑮𝡁𬡆𡡋𬐵𜁺𢀫𝑡𠐲𤑦𥡐𢑌𢑶𪰰𥱕𩡺𠑦𫡮𨱷𫱐𜡦𥱐𝡺𝱫𡑤𝑪𤁥𝑬𢁥𝑚𩱣𢁲𝱘𝀸𨡦𝑖𞁏𨑧𭁕𛱸𥁩𚱺𢡚𬡏𦁦𪡡𩡺𞑴𢱨𜡵𨱈𩑉𠑩𥰯𛰸𥐳𮡐𪑹𮐲𩐴𬡶𞑃𥱧𬀷𩑮𣑥𡀷𣡺𜰸𨑔𪰳𛱩𝰯𨱬𠡢𫱐𬑮𡑎𚱘𮑗𢑴𛰲𝀸𫡔𩠲𭡨𡠯𜰷𢠵𬱊𡱳𩠱𝡧𫡳𛱇𬡚𥡁𢁗𦐷𭱖𡱗𪱌𝐯𥐲𝁈𞑚𜐯𣱡𩱎𥑐𜑔𪑏𛱌𦡌𡱗𩡺𩑥𮡨𭀷𜰴𪐯𨠹𪰸𜡅𪡗𤁹𞑑𜁸𫑴𠡏𬀰𤁣𡡂𫁰𡁵𬑢𭡫𡁵𫰷𛰳𢡑𡰶𡀶𬁸𡁦𫀸𫁩𣁦𞑵𤁊𜀳𞑲𝁒𩠹𚱹𩑢𠑒𬠯𚱍𩐱𡀲𡁵𤡰𣱣𡡂𫁰𡀫𨰰𭑰𢁤𤡐𛱵𥱧𩑋𪠫𢱣𤠯𦑎𦡩𣁦𞑵𤁊𜀳𞑲𝁒𩠹𚱹𩑢𠱒𬐳𛰫𢱢𝱮𝡙𭰯𨡚𝱩𣰹𪱊𭡳𜱺𢑅𭡉𬡨𮡕𥀯𝱬𫱈𪑯𛱧𭀰𢑆𠐯𚱕𞁪𥑋𪱣𥡊𮁁𩑦𝱺𠱤𤡨𭁨𣡣𛱨𫁫𠱤𫑔𩰯𣀸𮐰𢁒𥑐𜁘𮑃𞑑𫡶𞁳𠑲𥑘𠠫𦀵𨡹𡡑𜁸𩑡𠱎𥁰𜡷𫑏𬱯𥁳𮑕𡠵𛱵𥱧𨑋𪠫𠰫𤑘𢱍𞐯𡡯𢁡𪐴𤁹𛱇𩡢𩱺𬡍𥡷𮑺𪁏𮡉𤑚𦀸𮐰𡱸𥑐𜁘𤱃𞑑𢡦𞑊𠡇𫱮𡁱𬡫𭠸𡡔𩡃𦡉𛱶𛱚𠡡𤡨𫑃𥡫𤡷𝡱𝑆𞁏𪑯𦁱𭠰𠠶𩱓𬠵𥁹𢡑𣰳𡡑𢡦𚰵𠡇𫱒𜁁𡱘𪱐𜀴𬑆𭠸𮐰𡱒𥑐𜁘𮑃𝑑𭀯𪡐𢑖𡀷𨱆𠰳𚱅𞁬𥑉𭑁𡁲𪑅𝱍𩁂𜱥𢡦𡁯𬑅𝡲𞑁𩁯𡰶𮁘𞁏𩱤𬑈𩰷𬡆𩠶𦐹𬑅𥡁𤠱𮁃𩁵𣱧𨡶𣑶𠠸𥡂𞑕𞁨𭡩𚱔𮁖𬠫𜱘𩰲𨠯𞁏𮑵𦡄𮁳𬠶𥀯𤑕𫡸𣡑𩡁𫑚𭑷𞑐𣡷𝁋𝁒𞀯𨡨𬠫𭐸𡱧𞑒𞁄𭡩𚱔𮁖𬠫𨡖𮡢𭡊𝰯𡁨𮑕𮡙𩑍𨡐𜱈𠰵𥁸𪡷𬱯𭡯𤡍𜱉𩑮𫀲𞁺𪀯𪡈𪠵𭑇𛰱𝁷𨑶𜱈𩱏𛱌𦡌𡱗𩡸𭡘𣱋𛱮𤀯𜠳𫑤𬰸𜡍𪡖𩠷𮁁𡱦𚰴𩱏𢡌𮑎𮀹𩑎𮡦𣱡𭑄𩱶𪡈𪠵𭑈𛰰𝁷𨡐𜡈𩱏𛱌𦡌𡱗𩡺𩑥𮡧𭡺𛰱𠠹𢱶𣑄𤁅𠱒𬐯𛰴𤁓𪡪𩠷𥑐𪑋𡡨𦀵𮡄𩁐𤑒𝠰𣱃𢁺𛱁𥱖𡁈𞀯𣱅𮁵𤀸𝀫𩑖𪀯𞑙𜑐𢰯𭠯𬁶𠑲𭱶𪰵𭡮𝡵𭡘𚱏𩠶𢁍𡠵𤰯𝡨𝡺𮑥𩠵𞁦𝁁𡱋𨡐𜐷𦁰𬰹𮁥𩠵𦀫𬱄𣑨𭑁𭡪𩱷𜑥𞀫𦑮𜑉𞁏𣑈𣱁𭡱𩑈𝡥𜁈𪑣𩠯𮐸𞁶𠑦𪐲𬠫𩀱𩠯𥁙𡀳𦡘𣁺𦁈𜰹𡱶𞑣𫡹𣐴𨠸𪰯𩁊𜱈𞀫𛱺𠑺𮁁𪱡𜐯𮠲𬱺𩱦𣀸𬠯𦑂𣑔𥁲𪑺𣑴𫐳𜑈𢀷𡐫𢡐𪡸𡑺𪱯𣠰𞑧𤁍𭰯𩡬𝐵𚱉𞑆𣡦𚰷𬐯𞁭𭱐𬱹𭑘𫑵𭡮𝡎𩠷𨡐𡑦𝐶𮡺𞑹𫡣𩡺𝰯𣑄𤁅𠱒𬡈𛱐𨑸𭑂𭱵𭠯𝑅𚱷𦁖𚱣𭰸𩑃𝀹𡡈𬡁𞁊𩡶𭰰𡁳𬡎𡑸𪑐𞀴𚱦𥡸𝰫𦐱𢁐𛰹𝱱𭡷𫡷𭡫𮀫𫡭𭑶𦀫𣱦𝱘𣱅𭠹𝱺𪠱𮡮𞁦𮠷𛱁𠑐𥑇𥁲𜰯𤁡𨡧𛱋𞀷𛱗𠠸𤑁𞑍𦁂𣀶𡀳𩠫𮑤𜁙𜱢𣑂𠡅𠱘𥡷𥁧𣱋𦑐𪡦𩁸𜁣𪡂𤑩𠡏𮐯𪁏𤡧𠡘𠑇𣱳𝡁𢑱𫑖𭑐𣱺𤁹𤡆𤁧𚰹𦁴𪡇𮡨𪐱𤁩𥀶𚱭𦑱𢱄𭱮𫠶𛱺𜐯𩁬𪀳𞑢𨱦𝠹𚱢𚱯𚱂𞑆𞁚𮁳𤁏𣱦𚱷𩁕𣡰𝱷𮀯𭡕𫡄𞀫𫠳𢑑𦐶𝰯𪱗𭡂𦀯𡑨𩠹𦑈𦡂𢁶𠰶𢡦𫱆𞁸𦑨𮁌𞑥𢀵𭀵𝡬𠱧𬡏𤱥𨡲𛱐𥠹𜡥𢁦𥡰𮀯𝡍𮠯𫱗𜡃𭱮𣱹𞁙𮀯𬡑𤡆𚱏𣠹𨑳𭱦𫠱𞁸𤑘𢀯𥠰𫁑𠱦𝡳𡀸𩱩𜱨𩁅𠠯𜀷𤡯𮁪𬱔𝑉𮐳𬁗𢱩𩰸𢠵𚱶𞀹𩠳𦡙𩀯𥰳𢀫𫱔𤀯𪀷𦑊𠱳𛱊𮁨𤀫𜑒𢑕𝁙𛰳𤱥𣠯𜁁𬑋𚱢𞑹𩱵𣀫𭠫𢑇𠰯𨡆𡱦𝑃𛱨𣁇𥑥𪁄𫱱𞑶𬀴𢡡𣱓𩑢𬠯𤁘𞐲𥱈𩠲𜑸𛱱𪐫𛱂𛱡𢡩𩰴𬀵𤱧𬡪𬱮𢱏𥁐𝱺𫡹𤀳𦑆𮁦𜡶𢠶𪁊𡑵𣱐𠱚𤡯𠐯𮡰𡡰𛱃𣱉𩑸𤡂𚱥𝡗𥐹𠱸𦁕𭁈𢡏𣡬𛱮𬠫𛱌𡁶𛱱𝁶𮁂𩡦𪰯𭁅𜑑𩑅𝀲𫡶𠱶𫁱𠑉𩠷𮁐𡱶𞑪𥡬𠱋𛰵𢁲𝑬𛱸𡑦𝡑𤑉𪰫𭀳𜑄𭡋𬀵𫑁𭠰𝁒𫁥𜑺𣡑𤑑𜑲𝐲𥁺𩁦𝰶𭡵𮡷𬡹𝱏𢀹𥱖𛱸𬱮𬑁𪁩𝁷𫠯𨑧𫑋𞁍𩠷𬁐𡐯𦡧𦁆𛱖𞁪𤑥𫠫𢁸𝑕𦑺𝱬𨠳𥱢𠰯𥁨𭑢𜡵𦠶𠱃𭑱𜡤𪰸𭱶𭱨𛱘𭁣𣰯𭑪𪀯𥡆𩠫𡀹𦑔𜑐𡁙𢐰𡑒𛱮𪑦𢡐𝱈𬡋𠑕𛰵𩁐𥑉𤐯𢡎𠡱𢁹𡡪𤑶𣱷𭡑𛱐𛰫𭡴𦀰𡱴𫡺𣑸𭡸𤠯𦁎𨱏𛰯𬡩𛱆𡐹𚱔𞁅𝁷𫡱𭑫𭑃𢑶𮡸𤁫𫠸𪠱𫁂𢱦𝁶𛱒𜁕𝁷𞁊𭁎𬁈𮑃𫑭𩁂𭐳𞑵𡱚𦑌𜠹𢰶𩱰𨱣𝰱𚱡𦀴𝀷𬀲𚱄𨱑𝑷𛱱𮑦𞑆𮁦𬱒𤡒𠑢𮠯𪡮𞑪𫁩𝁷𫀯𭡅𛱎𚱥𤁺𢱑𨱸𦡶𫱦𭑗𝰫𡡒𛱨𡁷𫐰𜁫𩡉𢑡𦐱𤱮𜑉𞑐𦁈𞑨𥱕𩁎𝁸𣑢𞁑𩠱𮡘𡁶𞁇𝁶𮁒𢁦𫐯𬑈𩰯𫱧𪁩𝁸𫠯𜱄𝑈𨡄𮡨𪠯𩑰𣱘𞐸𤁵𥑧𮁫𮠯𢐹𩡎𠱕𬠲𛰯𠱑𣡎𨐶𫱌𭱐𪑢𝐫𚱷𫱱𢐰𢁂𛱅𣀸𨱖𜀷𛱊𤁡𤀰𡱤𜱶𞑆𮁦𬱒𤡒𠑢𮠯𪡮𞑪𫁩𝁸𫀯𭑅𛱎𚱥𤁺𢱑𨱸𝑶𫱦𭑒𦡋𥑎𮠯𜐴𩑫𮠰𮡉𢱣𜑓𢁸𢠹𛱘𫠳𝰶𡁗𮡺𬱮𝑰𩡩𪠫𭡡𝁤𞑃𫡄𚱱𢀯𞁘𡡥𞑈𡡅𡡳𤁏𣱦𜠫𩑉𪡗𩠸𝁔𝀱𝐴𛱐𬁸𮡅𭑎𦀯𭁋𚱗𢱎𫠯𤀵𝱎𤑵𝁥𤁡𦡩𩑇𬀳𜰴𤡆𥡶𨡪𜁕𦠰𤀵𭱺𪁶𭁘𮁘𥠯𭐳𪠰𫑉𫱂𦡇𥑦𪐹𮡈𫡕𩠳𭱺𫑪𭠵𠑥𡀯𥑇𝁁𫡋𫰲𥠯𩑶𤑅𝑢𢁪𣡷𠡐𥑂𝁴𚰹𣡪𪡑𥀱𛱮𨡸𝡄𡑖𠐸𪡋𤁨𨐵𪡺𭑐𝱯𩁺𮁵𨱌𩑚𫀫𩑶𤱙𪑧𡡫𦡒𚱌𜱍𩑤𤠯𩡄𣱥𤁺𪁦𮠴𩑐𩠴𪀷𜀷𭁭𜁙𠡱𢑁𩑩𬰴𡰴𤱚𭱎𨠫𭐰𥱂𥱢𡡧𫁥𢱢𞑷𝁷𢁴𜑤𞁕𡑃𪱯𪡪𮡬𫱱𬁙𞑚𨱴𮁣𩑔𪁔𮠲𬠵𥑣𛰴𭡙𣡩𨱪𝱰𢑷𪰲𜱧𠑣𥑅𮡏𢡸𜑑𨡌𭱂𣱋𠱙𫡅𛰫𬡺𦁵𮁣𚰹𢡮𩡗𥑩𫀹𮡊𣁪𝑳𬡄𫑤𦐱𜱧𭁹𦡹𜡖𜁳𨱳𣱗𝡵𤁊𮁰𤁡𞁸𫡶𩑃𜱆𫁌𬁦𤑸𤰴𝡢𢱷𞑮𥱳𛱈𞑦𬁢𪱄𭁲𬑚𤐫𦡳𫁸𨰫𦁨𥁏𭠹𝑺𢁉𫡢𥡕𤱨𚱺𝑌𪐵𞁮𠱭𞑔𦁇𞐫𭠫𪱔𭁲𬑚𤐫𦡳𫁸𨰫𦁨𥁍𜑎𝁕𩡎𜡺𡑐𪑳𫠵𬁈𫁑𨡈𮡐𮁄𜁯𢡵𩑔𣁵𬑹𞁑𨡧𩱇𢡹𤁵𫑁𦑵𣑎𭱁𢁆𝑈𮡓𤁃𩰲𫡲𩁪𢁨𤱔𞀰𫡺𫱎𪀴𜱯𝐵𥑅𮡏𢠸𜡄𦑵𣠵𣰫𦡂𣑔𫑦𣡁𚱋𪡚𛱸𩑷𩡆𝑈𮡓𤡸𢰯𝱤𜁸𡁑𠑁𡁍𣑷𛱱𮁈𦑫𩑬𚱄𢱂𨑪𭡄𞁁𢁷𫱌𪐸𥀳𬁑𡁂𞁁𡀴𬡌𚰶𤑥𡡍𣰹𢁔𜁯𣁵𚱔𩑬𠑍𞐳𨠰𫱌𪐸𥀫𬁂𣑤𮡢𜁙𤁩𞁪𝡰𠠸𥡷𨠰𨱐𪑳𭠷𬁂𝁕𭰷𜁤𤁓𩱵𝰵𣠶𥑁𮠳𩁶𤱧𭑌𮁐𛱮𫱹𜡌𣡥𫰵𡱊𣁧𠑁𠑁𠡊𤡕𝑅𬡫𢠾').replace(/uD./g,'')))

Demo: http://jsbin.com/fojidejoco/1/

PS: I know it's a little bit cheating (even if the rules allow it), but at least, it gives us a goal: do it in less than 4012 chars.

Tools used:

• https://tinypng.com/
• http://xem.github.io/miniURI/
• http://xem.github.io/obfuscatweet/