# Pixel-art, episode 1: display Super Mario

it's a-me!

Today's task is simple: write a program, or a function that displays the idle small Mario sprite, from Super Mario Bros, on NES, over a blue background.

Any kind of entry is valid as long as it displays those 12 * 16 pixels anywhere on the screen / window / browser.

(EDIT: the displayed image can be scaled up if your language can't do pixel art. You can also output ASCII art or HTML art, but using the right colors.)

Image (zoomed 400%):

You must use the following colors:

• blue: #6B8CFF
• red: #B13425
• green/brown: #6A6B04
• orange: #E39D25

Shortest program (in number of characters) wins!

Standard loopholes apply (especially, no network connexion allowed), but hardcoding and displaying an image file in your program is allowed. (entries using this trick will be rank separately)

Here we go!

Shortest answer using some kind of hardcoded image:

• Also, creating a file is not allowed? It has to be displayed? Oct 16, 2014 at 14:35
• I don't see any pattern in that image. So it all comes down to the best compression one can use in a language. Oct 16, 2014 at 14:36
• Nitpicking: That's Mario, not Super Mario. Oct 16, 2014 at 18:57
• What a fun idea...Here's an idea for a sequel challenge: Take the Mario image (Any format) and turn it into an image of Luigi! Oct 17, 2014 at 18:22
• Can we make a piet program that looks like him? Oct 10, 2015 at 22:45

# HTML/JS, 206158153 102

102

Trick used: save the compressed GIF file as an HTML file, and add <img src=#> at the end

Thanks to this entry: https://codegolf.stackexchange.com/a/39926/10732 by @NiettheDarkAbsol

GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%    …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤ <img src=#>  Older versions: 153 Trick used: save the compressed PNG file as an HTML file, and add <img src=#> at the end ‰PNG IHDR _v” PLTEjkkŒÿ±4%ã%ó’V IIDAT×c[Êµj%C€ÍUŸ?|ìíœÿ02„ÿÿÊÐÊàÐÄÈÀ°ŠáÓë~†«ö3üZµž!jÚR‡P x( s6ïåÇ<img src=#>  158 Trick used: setting the trimmed dataURI of a compressed PNG as the SRC of an IMG tag and packing the whole thing in Unicode chars. Execute that in your JS console: document.write(unescape(escape('🁩𫑧𘁳𬡣👤𨑴𨐺𪑭𨑧𩐻𨡡𬱥𝠴𛁩𥡂𣱒𭰰𢱇𩱯𠑁𠑁𣡓𥑨𡑕𩱁𠑁𠑷𠑁𠑁𤑁𩱍𠑁𠑂𩡄𜱡𥑁𠑁𠑄𡡂𣑖𡑖𬑡𭱒𬡪𤀫𮁎𠱘𪡮𤱘𮡫𩱨𥱁𠑁𠑓𥑬𡑑𥡑𢐱𜡍𢑗𮁘𢱅𣁖𬑊𥑏𠑺𥡕𡱮𮠹𛱇𦁺𬰷𤡭𨰯𮡁𮑨𤀯𛱹𪁄𤑅𣑲𩰰𣑔𢑷𣁃𢱧𩑈𥀶𜰶𡱦𝡶𜡍𛱸𨑴𦠴𪁡𭁰𤱂𫱤𤑯𢁧𫱁𭰾').replace(/uD./g,'')))  206 Unpacked (206b): <img src=data:image;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQAgMAAABfD3aUAAAADFBMVEVqawRrjP+xNCXjnSXzkghWAAAASUlEQVQI12MIWxXKELVqJUOAzVUGnz9/GXzs7Rmc/zAyhP//yhDQEMrg0MTIwLCKgeHT636Gf6v2M/xatZ4hatpSBodQoHgoAw>  Demo Tools used: • You don't need the tags. Just use the chrome's data uri and enter it in your url bar. 200 characters Oct 16, 2014 at 16:25 • Hm... I considered that dataURI isn't a valid "program". But you're right. All browsers allow dataURIs in the addressbar. – xem Oct 16, 2014 at 16:29 • Now you're using a loophole yourself as the OP ;). You're offloading all work to the external/built-in compression of the GIF format. If that's cool we should all go hunting for obscure image formats with the best compression rate now, and I could have saved myself a lot of work writing my own compression. ;) Oct 16, 2014 at 18:22 • @xem Well, your challenge, your call. But it seems a bit pointless if we're now just looking for the most compressed existing file format. ;) Oct 16, 2014 at 18:27 • It appears the rawgit link is dead. Oct 10, 2015 at 20:27 ## Mathematica, 412292252212163148143 141 characters f=FromDigits[ToCharacterCode@#,2^16]~IntegerDigits~#2&;Image@Partition[f["넴╫賿橫ӣ鴥",256][[3#+1;;3#+3]]/256&/@"吀啐^A媾핮﻽溿뽫ﺩ埿⩕樨ꦪª⿼?ཐᐅ橕ꦪ喪"~f~4,12]  This uses caret notation ^A for the control character at code point 1. In Mathematica, I can actually embed the character literally, although that leads to all sorts of ugliness when copying things around. Anyway, the above is 2 characters shorter than my former version, and I got those to characters from using base-4 instead of base-5 to encode the colour palette indices. Right now I cannot be bothered to fix the explanation and screenshot below, so I'm leaving you here with the original base-5 version of my answer: f=FromDigits[ToCharacterCode@#,2^16]~IntegerDigits~#2&;Image@Partition[f["넴╫賿橫ӣ鴥",256][[3#-2;;3#]]/256&/@"ᯱ曎㌟뱮䚻륏Σ襺ﺦ您汜豈塘ᙉ雬儥衰ꐰꃾ纔ㆯ쭴뫋澖ᕿ蓉"~f~5,12]  I'm encoding the pixels in Unicode characters (yay for counting by characters!). Here is what it looks like in Mathematica: Here's how it works: First we define a function f that turns Unicode strings (passed in as the first argument #) into lists of integers. First we obtain the character codes. Those can be interpreted as digits of a base 65536 number. And then we convert that number to another base, passed in as the second argument #2. Now let's do that for the longer Unicode string. ToCharacterCode yields this list: {7153, 26318, 13087, 48238, 18107, 47439, 931, 35194, 62191, 65190, \ 24744, 57782, 27740, 35912, 22616, 5705, 38636, 20773, 34928, 42032, \ 41214, 32404, 12719, 52084, 47819, 28566, 5503, 33993}  Treating this as base 65536: 7933607912575313477287527915733176998797205587959732019781370103381... 4831246938139171755469819519515972565671101475553962564506286523593  And converting to base 5: {2, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, \ 2, 2, 2, 3, 3, 3, 4, 4, 3, 4, 2, 2, 2, 2, 3, 4, 3, 4, 4, 4, 3, 4, 4, \ 4, 2, 2, 3, 4, 3, 3, 4, 4, 4, 3, 4, 4, 4, 2, 3, 3, 4, 4, 4, 4, 3, 3, \ 3, 3, 2, 2, 2, 2, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 2, 3, 3, 1, 3, 3, 3, \ 2, 2, 2, 2, 2, 3, 3, 3, 1, 3, 3, 1, 3, 3, 3, 2, 3, 3, 3, 3, 1, 1, 1, \ 1, 3, 3, 3, 3, 4, 4, 3, 1, 4, 1, 1, 4, 1, 3, 4, 4, 4, 4, 4, 1, 1, 1, \ 1, 1, 1, 4, 4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 2, 2, 1, 1, 1, \ 2, 2, 1, 1, 1, 2, 2, 2, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 2, 3, 3, 3, 3, \ 2, 2, 2, 2, 3, 3, 3, 3}  Those are the colour indices of the pixels, in order blue, red, green, orange. We use those to index into that list of numbers, which is the colour palette. Now for the colour palette. That's "넴╫賿橫ӣ鴥". We use the above indices to select the correct string. Then we apply our function again, but using base 256. That yields a list of 12 integers: {177, 52, 37, 107, 140, 255, 106, 107, 4, 227, 157, 37}  We use ;; range indexing to pull out the relevant slice for the current colour. Lastly, we just use Partition to split this into rows of 12 and feed it to Image. Voilà! Edit: With the Unicode packing the RLE was no longer worth it. Removing it saved 50 characters. Edit: Of course, without RLE, there's also no need to go to base 16. Edit: And while we're at it, why not Unicode-pack the colour palette, too? (I have a hunch that I can save a little bit more by make the entire colour palette also a single string and using Partition there too. I'll try that later.) Edit: Yes, that did shave off another 5 bytes. • would you mind adding a screenshot of the result? (not that I don't trust your code, but curious about how it's displayed: in a window? a browser? else?) – xem Oct 16, 2014 at 15:02 • @xem Will do. It's a REPL environment capable of graphical in- and output. Oct 16, 2014 at 15:03 • Not sure, but are you mirroring the lower portion of the image ? Oct 16, 2014 at 17:07 • @Optimizer No, I doubt I'd be able to do that in less characters than I'd be saving. Oct 16, 2014 at 17:12 • When I look in the Mathematica documentation I don't see any usage on tilde but it appears here that you're using it to feed the result of one function into another and then apply an additional argument to that second function (IntegerDigits)? Also, the color palette: looking at the image, it appears there are only four colors, but your color palette seems to include more than that: {177, 52, 37, 107, 140, 255, 106, 107, 4, 227, 157, 37}. Looking at the documentation for Image, it looks like it prints out grayscale unless additional options like ColorScale --> RGB is provided. Oct 20, 2014 at 2:16 # Java : 398 377 void s(){new java.awt.Frame(){public void paint(java.awt.Graphics g){int i=0,x,m[]={12226,44085194,467839834,0x5abea55a,0x5bbd5d50,0x5ffe9540,0x5ffe9540,0x5aee5d50,531408218,334277466,333492170,0xc02fc2},c[]={7048447,0xB13425,6974212,0xE39D25};for(setSize(99,99);i<192;g.setColor(new java.awt.Color(c[m[x]&3])),m[x]/=4,g.drawLine(x+40,60-i%16,x+40,60-i++%16))x=i/16;}}.show();}  Simply draws the sprite by unpacking an int for each column. Shown in a full program: class P{ public static void main(String[]a){ new P().s(); } void s(){ new java.awt.Frame(){ public void paint(java.awt.Graphics g){ int i=0,x,m[]={12226,44085194,467839834,0x5abea55a,0x5bbd5d50,0x5ffe9540, 0x5ffe9540,0x5aee5d50,531408218,334277466,333492170,0xc02fc2}, c[]={7048447,0xB13425,6974212,0xE39D25}; for(setSize(99,99);i<192; g.setColor(new java.awt.Color(c[m[x]&3])),m[x]/=4, g.drawLine(x+40,60-i%16,x+40,60-i++%16) )x=i/16; } }.show(); } }  Obligatory screenshot: • You can save 9 bytes by using an import java.awt.*. Feb 27, 2018 at 8:00 # x86 Machine Code, 102 bytes How it works: The image is stored as a 2-bit image using a palette. Each row of the image is stored as 3 bytes, followed by one 1 byte of the color palette. This allows the data to be loaded as a single DWORD. The twelve pixels are output by masking off the lowest 2 bits of the value, writing them to video memory, and then right-shifting the entire value two bits. Once the pixels for the row have been outputted, the palette byte is written to the VGA palette. When the image is finished drawing, the program enters an infinite loop. Assembly code to generate the binary: org 100h mov al,13h int 10h les ax,[bx] mov si,image_data draw: add di,320-12 lodsd xchg eax,ebx mov cl,12 row: mov ax,bx and al,3 stosb shr ebx,2 loop row xchg ax,bx mov dx,0x3c9 out dx,al test al,al jnz draw image_data: db 21,0,85,0xb1/4, \ 5,0,64,0x34/4, \ 165,190,87,0x25/4, \ 185,191,127,0x6b/4, \ 185,254,254,0x8c/4, \ 233,191,106,0xff/4, \ 213,255,95,0x6a/4, \ 165,168,85,0x6b/4, \ 169,40,106,0x4/4, \ 170,0,170,0xe3/4, \ 47,195,248,0x9d/4, \ 63,0,252,0x25/4, \ 15,0,240,111, \ 5,20,80,111, \ 169,85,106,111, \ 170,85,170  Base-64 encoded binary, save it as Mario.com to run it: sBPNEMQHvigBgcc0AWatZpOxDInYJAOqZsHrAuL1k7rJA+6EwHXiwxUAVSwFAEANpb5XCbm/fxq5/v4j6b9qP9X/XxqlqFUaqShqAaoAqjgvw/gnPwD8CQ8A8G8FFFBvqVVqb6pVqg== Sample output: # Octo/XO-Chip, 70 bytes Octo is a high level assembly language that compiles down into bytecoded instructions for the CHIP-8 virtual machine. Octo provides some custom extensions called "XO-Chip" to the basic CHIP-8 bytecode, including the ability to draw 4-color bitmaps via overlaid bitplanes. The compiled bytes are as follows: 0xA2 0x08 0xF3 0x01 0xD0 0x00 0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 0x58 0x80 0x21 0xE0 0x00 0x00 0x3F 0x00 0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 0x3F 0xC0 0x39 0xC0 0x70 0xE0 0xF0 0xF0 0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 0x7F 0xF0 0x3F 0xE0 0x1F 0xC0 0x37 0x00 0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 0xC0 0x30 0x00 0x00 0x70 0xE0 0xF0 0xF0  Run it here in your browser: http://johnearnest.github.io/Octo/index.html?gist=33aa37d4717a425ccd4f It is probably more illuminating to see the Octo assembly language which produces that bytecode: : main i := mario plane 3 sprite v0 v0 0 : mario 0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 0x58 0x80 0x21 0xE0 0x00 0x00 0x3F 0x00 0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 0x3F 0xC0 0x39 0xC0 0x70 0xE0 0xF0 0xF0 0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 0x7F 0xF0 0x3F 0xE0 0x1F 0xC0 0x37 0x00 0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 0xC0 0x30 0x00 0x00 0x70 0xE0 0xF0 0xF0  The main program is three two-byte instructions. Set the memory index register i to the beginning of the data segment, select drawing plane 3 (3 is a bitmask; this indicates you wish to draw in 4 color mode with both bitplanes) and then draw a sprite at an x and y position given by register v0 (initialized to zero). The final 0 provides the size of the sprite, which in the SuperChip and XO-Chip instruction sets will draw a 16x16 sprite. In 4 color mode, a bitmap for the first plane is followed immediately by a bitmap for the second plane. To see how the planes work, consider this modified program which scrolls one plane to the right after drawing mario: : main i := mario plane 3 sprite v0 v0 0 plane 2 scroll-right scroll-right scroll-right scroll-right : mario 0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 0x58 0x80 0x21 0xE0 0x00 0x00 0x3F 0x00 0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 0x3F 0xC0 0x39 0xC0 0x70 0xE0 0xF0 0xF0 0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 0x7F 0xF0 0x3F 0xE0 0x1F 0xC0 0x37 0x00 0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 0xC0 0x30 0x00 0x00 0x70 0xE0 0xF0 0xF0  If you enjoy this you might like one of my other solutions written with Octo. There's actually a game jam going on for the month of October based around this tool. # GIF - 93 bytes Hardcoding the image is apparently okay now, so... yay? :D GIF87a ¡ kŒÿã%jk±4%, 6„‡héj„Af-ÕdÎy\% …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤  ;


<? header("Content-Type:image/gif");?>GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%  …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤ ;  • can you please upload your gif somewhere (ctrlv.in for example)? I'd like to use it in my entry instead of PNG :) – xem Oct 16, 2014 at 18:08 • Oct 16, 2014 at 18:09 • @NiettheDarkAbsol I'm not sure how you counted the size of that, but I count 150 bytes. Regardless, scoring is by characters, and it seems to be 114 characters. Oct 16, 2014 at 18:12 • Yup, the PHP snippet is fine for me (even if you could remove the last 2 bytes). But the raw gif snippet isn't a program. – xem Oct 16, 2014 at 18:54 • @xem: If the browser is considered an "interpreter" for HTML/javascript/etc, and feeding it the raw gif snippet via the same mechanism results in the desired output... the difference becomes small Oct 18, 2014 at 0:16 # Bash + ImageMagick: 350331 321 characters (Palette shamelessly stolen from Martin Büttner's answer.) p=(B13425 6B8CFF 6A6B04 E39D25) for c in 21 0 85 5 0 64 165 190 87 1{85,91,27,85} 254{,} 233 191 106 213 255 95 165 168 85 169 40 106 170 0 170 47 195 248 63 0 252 15 0 240 5 20 80 169 85 106 170 85 170;{ for j in 0 2 4 6;{ d+=(-fill \#${p[c>>j&3]} -draw point\ $[i%12],$[i++/12])
}
}
convert -size 12x16 xc: "${d[@]}" x:  Sample output: To inspect it easily add -scale 120 to convert's parameters to get a 10x scaled version: • s/185 191 127 185 254 254/1{85,91,27,85} 254{,}/; s/do/{/; s/done/}/ Oct 18, 2014 at 19:16 • Doh. I even upvoted DigitalTrauma's related tip, but I keep forgetting that {..}. Thank you, @grawity. Oct 19, 2014 at 14:40 # Groovy 417 386 Fun as hell, but with a terrible char count. GroovyFX needed m=[b:'6B8CFF',r:'B13425',g:'6A6B04',o:'E39D25'];groovyx.javafx.GroovyFX.start{stage(visible:!0){scene(width:60,height:80){flowPane{"3b5r4b2b9r1b2b3g2o1g1o3b1b1g1o1g3o1g3o1b1b1g1o2g3o1g3o1b2g4o4g1b3b7o2b2b2g1r3g4b1b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g2o3o6r3o2o8r2o2b3r2b3r2b1b3g4b3g1b4g4b4g".toList().collate 2 each{l->(l[0]as int).times{rectangle(width:5,height:5,fill:"#"+m[l[1]])}}}}}}  ungolfed: m=[b:'6B8CFF', r:'B13425', g:'6A6B04', o:'E39D25'] s=5 groovyx.javafx.GroovyFX.start {bd-> stage(visible: !0) { scene(width:s*12, height:s*16) { flowPane { "3b5r4b 2b9r1b 2b3g2o1g1o3b 1b1g1o1g3o1g3o1b 1b1g1o2g3o1g3o 1b2g4o4g1b 3b7o2b 2b2g1r3g4b 1b3g1r2g1r3g1b 4g4r4g 2o1g1r1o2r1o1r1g2o 3o6r3o 2o8r2o 2b3r2b3r2b 1b3g4b3g1b 4g4b4g" .replaceAll(" ", "") .toList() .collate(2) .each { l-> t=l[0] as int cr=m[l[1]] t.times { rectangle(width:s, height:s, fill:"#"+cr) } } } } } }  • grep() instead of toList() Oct 18, 2014 at 22:15 # HTML/JS, 427408264256239 226 chars ### Obfuscatweet, 271270264256239 226 chars Using obfuscatweet, managed to shorten this down to < 250 :D document.write(unescape(escape('🁳𨱲𪑰𭀾𨰽𦰢𝡂𞁃𡡆𘠬𘡂𜐳𝀲𝐢𛀢𝡁𝡂𜀴𘠬𘡅𜰹𡀲𝐢𧐻𨐽𙰰𜐵𝐰𜀰𝐵𝐵𝀰𠑂𡑃𜀲𡑆𡑆𠰲𡑂𡡂𡠲𠡆𡑁𞀰𜱆𡡆𜀰𠐶𠐰𜀲𠐶𞑁𞁁𠐵𝑁𠑆𞑄𝰶𡡆𡀵𝐷𡡆𝐵𝐵𡠰𝐴𜐵𜀲𠐰𜁁𞁁𠐰𜁁𠐧𞱷𪑴𪀨𩁯𨱵𫑥𫡴𚑦𫱲𚁩🐰𞱩🀹𝠻𭱲𪑴𩐨𙰼𨡲🠧𚐩𮱨🐨𙰰𜀰𙰫𬁡𬡳𩑉𫡴𚁡𛡳𫁩𨱥𚁩𛁩𚰽𝠩𛀱𝠩𛡴𫱓𭁲𪑮𩰨𝀩𚐮𬱬𪑣𩐨𛐱𜠩𞱦𫱲𚁪🐰𞱪🀱𜠻𭱲𪑴𩐨𙰼𬡰𘁳𭁹𫁥🐢𬁡𩁤𪑮𩰺𜐠𞀻𨡡𨱫𩱲𫱵𫡤𞠣𙰫𨱛𪁛𪠫𚱝𧐫𙰢🠼𛱲𬀾𙰩𚐻𯐼𛱳𨱲𪑰𭀾').replace(/uD./g,'')))  Code below is what this consists of. Trick used: converted image to base4 String of color tiles, converted this into a hexadecimal String. Index of the base 4 denotes color (0=blue, 1=RED, etc.) CSS with an inline p is used to because divs need content to expand (also p is shorter). Because CSS needs to begin with a letter, 'A' is prepended before the CSS tags. Padding from the CSS gives pixels. None of this uses Unicode characters, which I'm not too familiar with anyways, though it'd probably go sub-300 in that case. The relative advantage to using the padding is that you can, as in this case, blow up the image to whatever size you want each pixel to be. I've used 9 pixels, but if you spend an extra character, you can get up to 99 pixels per represented pixel. ### CSS, 12711911811410013 0 chars Switching from p to rp removes the need for display:inline, cost +1 char, -15! chars! Removed all the colors and put it into an array in JS -87 chars. Then I just removed all the css ### JS, 300289280275329 325 chars c=["6B8CFF","B13425","6A6B04","E39D25"];a='0155000555540ABEC02EFEFC2EBFBF2BFEA803FFF00A6A002A69A8AA55AAF9D76FFD557FF5555F0541502A00A8AA00AA';with(document)for(i=0;i<96;write('<br>')){h=('000'+parseInt(a.slice(i,i+=6),16).toString(4)).slice(-12);for(j=0;j<12;write('<rp style="padding:1 8;background:#'+c[h[j++]]+'"></rp>'));}  I tried to cut as much as I could out of this plain JS processing a hex string, but given as it's my first try, this is how far I got using only what I know. The HTML writing has been shortened by a function that adds tags, and the classes use the base 4 value to determine the color to display. Using additional shortening, replaced charAt with [] brackets, and removed the A0 class and set blue as default color for p, saving additional 10 characters. The additional cost to use rp tags is offset by a huge loss in CSS. Additional offset from removing the while loop pad to just adding '000' for the use case and slicing -12 from it. Added additional JS for colors, then put the padding in there. Noticed a bug with the padding that requires 2 extra characters to fix. Compacted a bunch of loops ### HTML File, 430429419399366 342 chars Demo <script>c=["6B8CFF","B13425","6A6B04","E39D25"];a='0155000555540ABEC02EFEFC2EBFBF2BFEA803FFF00A6A002A69A8AA55AAF9D76FFD557FF5555F0541502A00A8AA00AA';with(document)for(i=0;i<96;write('<br>')){h=('000'+parseInt(a.slice(i,i+=6),16).toString(4)).slice(-12);for(j=0;j<12;write('<rp style="padding:1 8;background:#'+c[h[j++]]+'"></rp>'));}</script>  • Nice! I'd advise you to remove all the line breaks in your code, and provide a link for a demo ( c99.nl ). As a bonus, you could pack your entry in Unicode chars using xem.github.io/obfuscatweet. That will improve your score. – xem Oct 16, 2014 at 17:48 • also, you can remove your &lt;html> tags, place the &lt;style> tag at the end, and remove the /style and the trailing "}" of the last CSS rule. – xem Oct 16, 2014 at 17:51 • @xem OK I cut out all the lines out and squished everything. I'll try and figure out an optimal way to split the JS for obfuscatweet. Oct 16, 2014 at 18:01 • obfuscatweet accepts any js code (so you can put your 289 js chars there), or any html code (so you can copy your html file here). The output of obfuscatweet can be executed in a browser's console or in a HTML file using the right charset meta tag. – xem Oct 16, 2014 at 18:05 • psst, you forgot to remove the last "}" of the CSS part. It works without it. – xem Oct 17, 2014 at 10:51 # MATLAB, 194 193 bytes The code: imagesc(dec2base(base2dec(reshape('5FVQL5VVVT50A4L4HA594GAHA45A015DAL551G2L41GO101VO0A7FMAANVVAAVVVQ5VLVL40L8100L80',5,[])',32),4)-48);colormap([106 107 4;107 140 255;227 157 37;177 52 37]/255)  And the output: Basically I converted the Mario image so that each pixel is a 2 bit number. I then encoded that in base 32 which is the string shown in the code. This string is first reshaped to be 5 x 16 (each row (12px) of 2bit numbers was encoded into base 32), then converted back into base 10. The result is converted once again, this time into base 4 yielding a 12x16 array of 2 bit numbers. These numbers are plotted using imagesc(). Then the colours are assigned using colormap() with a custom colour map of the required hex values. Amusingly, a third of the number of bytes used are just to get MATLAB to set the correct colours after it has been plotted. The colour code is almost the same number of bytes as the entire base32 string!. Without correcting the colour (remove the colormap() call), it is 135 bytes, and this is the output for the default colour map on MATLAB R2013a: # Excel VBA, 310 307 295 Bytes Anonymous VBE Immediates Window function that outputs a Mario to the Activesheet object at cells A1:L16 o=2465251:Cells.RowHeight=48:a[A1:L16],-29589:a[C4:K5,D3:I7,J7,L5,A11:L13],o:a[C3:E3,H3:H4,B4:B6,C6,D4:D5,E5,I5,H6:K6,C8:H8,B9:K10,A10:L10,C11,J11,B15:D16,A16,I15:K16,L16],289642:a[D1:H1,C2:K2,E8:E10,F10:H10,H9,D11:I13,C13:E14,H13:J14],2438321:a[E11,H11],o  Helper SubRoutine a Sub a(r,c):r.Interior.Color=c:End Sub  Ungolfed Version Public Sub b() o = 2465251 Cells.RowHeight = 48 a [A1:L16], -29589 a [C4:K5,D3:I7,J7,L5,A11:L13], o a [C3:E3,H3:H4,B4:B6,C6,D4:D5,E5,I5,H6:K6,C8:H8,B9:K10,A10:L10,C11,J11,B15:D16,A16,I15:K16,L16], 289642 a [D1:H1,C2:K2,E8:E10,F10:H10,H9,D11:I13,C13:E14,H13:J14], 2438321 a [E11,H11], o End Sub Private Sub a(ByRef r As Range, ByVal c As Integer) r.Interior.Color = c End Sub  -3 bytes for removing whitespace -12 bytes for using [...] notation over Range(...) notation; changing over from hex colors to int colors ## Output # JavaScript/CSS/HTML 446430407353328 316 I golfed as much as I could and ended up with some dirty HTML/JS, but whatever...it works. Edit: This is it...I'm done. Edit Seriously done this time. ## JavaScript for(i=0;i<192;)document.body.innerHTML+=(i%12?"":"<br>")+"<font color=#"+["6B8CFF","B13425","6A6B04","E39D25"]["000111110000001111111110002223323000023233323330023223332333022333322220000333333300002212220000022212212220222211112222332131131233333111111333331111111133001110011100022200002220222200002222"[i++]]+">█"  JSFiddle • The linked JSFiddle doesn't contain the same version as posted here and doesn't work (at least not for me in Firefox). By the way, for nicer output a *{line-height:1} would help. Oct 17, 2014 at 12:04 • @manatwork Try again. Oct 17, 2014 at 12:12 • Nice. But why the div? Just for my curiosity, I tried an ECMAScript version. Got 372 characters: jsfiddle.net/768h7brb Oct 17, 2014 at 12:32 • because <div></div> is shorter than document.createElement('div'). And JSFiddle doesn't like document.write Oct 17, 2014 at 12:37 • Reverse the ternary operator's condition to get rid of comparison's right side: i%12?"":"<br>". Oct 17, 2014 at 13:55 ## Matlab - 449 / 332 305 bytes partial compression + Using the lower image symetry: a=[0,0];b=[2,2];c=[3,3];d=[a,0];f=[b,2];g=[c,3];h=[b,b];i=[a,a];k=[1,1];l=[0,f,1,2;h,k;c,2,1,3,1;g,k,1;c,k,k;a,k,1,0;0,f,a;h,a];imshow(uint8([d,k,1,k,i;a,k,k,k,k,1,0;a,f,c,2,3,d;0,2,3,2,g,2,g,0;0,2,3,b,g,2,g;0,b,c,c,h,0;d,g,g,3,a;a,b,1,f,i;[l fliplr(l)]]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)  -- Partially compressed version (332 bytes): a=[0,0] b=[2,2] c=[3,3] d=[a,0] e=[1,1,1] f=[b,2] g=[c,3] h=[b,b] i=[a,a] imshow(uint8([d,e,1,1,i;a,e,e,e,0;a,f,c,2,3,d;0,2,3,2,g,2,g,0;0,2,3,b,g,2,g;0,b,c,c,h,0;d,g,g,3,a;a,b,1,f,i;0,f,1,b,1,f,0;h,e,1,h;c,2,1,3,1,1,3,1,2,c;g,e,e,g;c,e,e,1,1,c;a,e,a,e,a;0,b,2,i,f,0;h,i,h]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)  Fully uncompressed version (449 bytes): imshow(uint8([0,0,0,1,1,1,1,1,0,0,0,0;0,0,1,1,1,1,1,1,1,1,1,0;0,0,2,2,2,3,3,2,3,0,0,0;0,2,3,2,3,3,3,2,3,3,3,0;0,2,3,2,2,3,3,3,2,3,3,3;0,2,2,3,3,3,3,2,2,2,2,0;0,0,0,3,3,3,3,3,3,3,0,0;0,0,2,2,1,2,2,2,0,0,0,0;0,2,2,2,1,2,2,1,2,2,2,0;2,2,2,2,1,1,1,1,2,2,2,2;3,3,2,1,3,1,1,3,1,2,3,3;3,3,3,1,1,1,1,1,1,3,3,3;3,3,1,1,1,1,1,1,1,1,3,3;0,0,1,1,1,0,0,1,1,1,0,0;0,2,2,2,0,0,0,0,2,2,2,0;2,2,2,2,0,0,0,0,2,2,2,2]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)  Output in both cases (magnified on screen obviously, the real one is 12x16pix): • Hey I wondered if anyone would exploit the symmetry somehow. I couldn't fnd a way with the method I finally went with. Jul 20, 2017 at 14:40 # C, 4999 bytes This absolutely cannot compete with some of the answers here, but I thought I'd give a C answer a shot. The code is one single long line, so here is a pastebin link. If you'd prefer, here is a base64 encoding of the gzipped code: H4sICAzFGFYCA21hcmlvLmMA3Zc9DsIwDIXv0qndUqchkXwUurAgdYiFEEyIu4NYaZBI7PzNT3Lsz4mf408bjdPjct3odh6HVeujdgg4K4vzohCM8esdjHOpkrVoALUtIrBX8y1R04DKNCGZmTp85CVdAHifYuxO3mElIlju6xaRICOgCo4pD64PoiTzHnkZcHYnRhAYcEEpFznxB1mXP4TdS/KeVGYPZbmVaQHlnRVZFi65OkhoGodq+RHrby4xsTj8i6RmapXrPvfa0Q8ZWZY1/UPbSiC7Z2bYA7r0zla57Xmo8sOEzxdNYIXFhxMAAA== Notable in that it requires no external libraries to run. Requires xterm, Konsole, or GNOME terminal, because it uses the RGB expansion to the ANSI color escape codes to output the correct colors (ANSI doesn't define orange). For obvious reasons, ideone won't work. It can be run in Windows under Cygwin, which uses xterm (in fact, that's how I tested it). MSYS might work; I'm not sure. Output on my machine (xterm): • -1 is not a multiple of 10 Oct 31, 2015 at 21:12 • Sorry, it was in reference to the score Oct 31, 2015 at 21:20 Bash 346 pure bash with VT100 like escape sequences ( sorry no orange in that palette ) C=" " B="\033[44m$C"
R="\033[41m$C" G="\033[42m$C"
O="\033[43m$C" N="\033[00m\n" A="BBBRRRRRBBBBNBBRRRRRRRRRBNBBGGGOOGOBBBNBGOGOOOGOOOBNBGOGGOOOGOOONBGGOOOOGGGGBNBBBOOOOOOOBBNBBGGRGGGBBBBNBGGGRGGRGGGBNGGGGRRRRGGGGNOOGRORRORGOONOOORRRRRROOONOORRRRRRRROONBBRRRBBRRRBBNBGGGBBBBGGGBNGGGGBBBBGGGGN" while read -n1 v do printf "${!v}"
done <<< "$A"  • You could reduce it by using an array for the palette instead of separate characters. As declaring associative arrays is long, better recode it to integers. A 295 character version of your code: pastebin.com/d0LW0HM1 Oct 17, 2014 at 11:01 # Pyth, 83 bytes Disclaimer: This isn't a winning candidate, because some of the language features were created after posting the question. .wc16@Lc4CM"±4%kÿjkã%"jC"T\0UP\0Z¾Õnþýn¿¿kþ©WÿõZ*Uj(©ª\0ªøÃ/ü\0?ð\0PjU©ªUª"4  Here's a hex-dump: 00000000 2E 77 63 31 36 40 4C 63 34 43 4D 22 B1 34 25 6B .wc16@Lc4CM".4%k 00000010 8C FF 6A 6B 04 E3 9D 25 22 6A 43 22 54 5C 30 55 ..jk...%"jC"T\0U 00000020 50 5C 30 01 5A BE D5 6E FE FD 6E BF BF 6B FE A9 P\0.Z..n..n..k.. 00000030 57 FF F5 5A 2A 55 6A 28 A9 AA 5C 30 AA F8 C3 2F W..Z*Uj(..\0.../ 00000040 FC 5C 30 3F F0 5C 30 0F 50 14 05 6A 55 A9 AA 55 .\0?.\0.P..jU..U 00000050 AA 22 34 ."4  You can also download the program here and run it with python3 pyth.py mario.pyth  This creates a file o.png: ### Explanation: There are only 4 different colors, therefore I only need 2 bits to save the color of each pixel. .wc16@Lc4CM"..."jC"..."4 "..." the colors of the image, 2 bit per pixel C convert these bytes to a number j 4 and convert it to base 4 (extracting the colors) "..." the hexcodes of the 4 colors (3 byte per color) CM convert each byte into its number c4 split into 4 lists @L for each pixel, pick the correct list of color-list c16 split into 16 rows .w save it as "o.png"  • Does this work in the last version of Pyth before the challenge was posted? Oct 10, 2015 at 21:41 • @ThomasKwa Yeah, forgot. I'll edit a info. Oct 10, 2015 at 22:02 # Processing 2 - 359 characters I saw this challenge and immediately thought of Processing's pixel[] function. I was hoping it would be shorter but i'm still fairly happy with the result considering this is my first attempt at code golf. int i,l;i=l=0;size(12,16);loadPixels();for(char c:"3b5r6b9r3b3g2o1g1o4b1g1o1g3o1g3o2b1g1o2g3o1g3o1b2g4o4g4b7o4b2g1r3g5b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g5o6r5o8r2o2b3r2b3r3b3g4b3g1b4g4b4g".toCharArray()){while(l>0){pixels[i]=#6B8CFF;if(c=='r')pixels[i]=#B13425;if(c=='g')pixels[i]=#6A6B04;if(c=='o')pixels[i]=#E39D25;i++;l--;}if(c<58){l=c-48;}}updatePixels();  ungolfed: int i,l;i=l=0; size(12,16); loadPixels(); for(char c:"3b5r6b9r3b3g2o1g1o4b1g1o1g3o1g3o2b1g1o2g3o1g3o1b2g4o4g4b7o4b2g1r3g5b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g5o6r5o8r2o2b3r2b3r3b3g4b3g1b4g4b4g".toCharArray()) { while(l>0) { pixels[i]=#6B8CFF; if(c=='r')pixels[i]=#B13425; if(c=='g')pixels[i]=#6A6B04; if(c=='o')pixels[i]=#E39D25; i++; l--; } if(c<58){l=c-48;} } updatePixels();  you can download processing here # Javascript 515 str=''; "000111110000|001111111110|002223323000|023233323330|023223332333|022333322220|000333333300|002212220000|022212212220|222211112222|332131131233|333111111333|331111111133|001110011100|022200002220|222200002222" .split("|").forEach(function(ov, ok) { str += '<div>' ov.split("").forEach(function(iv, ik) { str += '<div style="width:1px;height:1px;background-color:' + ['#6B8CFF','#B13425','#6A6B04','#E39D25'][iv] + ';display:inline-block"></div>'; }); str+= '</div>'; }); document.write(str);  just got it working, still have to go in and golf it up • You can replace the divs that make up the rows with a tag that is inline by default. I haven't tested it, but using a should work. You can also use background instead of background-color. Oct 17, 2014 at 1:11 # Perl - Ungolfed 927 I'll have to golf this later. First time trying out Image::Magick. #!/usr/local/bin/perl use Image::Magick; use strict; use warnings; my @p = ( [0,0,0,1,1,1,1,1,0,0,0,0], [0,0,1,1,1,1,1,1,1,1,1,0], [0,0,2,2,2,3,3,2,3,0,0,0], [0,2,3,2,3,3,3,2,3,3,3,0], [0,2,3,2,2,3,3,3,2,3,3,3], [0,2,2,3,3,3,3,2,2,2,2,0], [0,0,0,3,3,3,3,3,3,3,0,0], [0,0,2,2,1,2,2,2,0,0,0,0], [0,2,2,2,1,2,2,1,2,2,2,0], [2,2,2,2,1,1,1,1,2,2,2,2], [3,3,2,1,3,1,1,3,1,2,3,3], [3,3,3,1,1,1,1,1,1,3,3,3], [3,3,1,1,1,1,1,1,1,1,3,3], [0,0,1,1,1,0,0,1,1,1,0,0], [0,2,2,2,0,0,0,0,2,2,2,0], [2,2,2,2,0,0,0,0,2,2,2,2], ); my$image = Image::Magick->new;
$image->Set(size=>'12x16');$image->ReadImage('canvas:white');
for my $i (0..$#p) {
for (0..(@{$p[$i]} - 1)) {
my $color;$color = ($p[$i][$_] < 1 ? "#6B8CFF" :$p[$i][$_] < 2 ? "#B13425" : $p[$i][$_] < 3 ? "#6A6B04" : "#E39D25"); print "$i : $_ :$color \n";
$image->Set("pixel[$_,$i]"=>$color);
}
}
#$image->Write("mario.png");$image->Display();


I'm sure we have plenty of these but here's mine:

# Bash Printable: 179 158 Bytes

You need to tune your terminal to match colors exactly.

eval "$(base64 -d<<</AD/8AAD9Wm/2amr2Wpq1qlX/qqv9RX/1RRXVQBVpIIaqAAqoAAK8DwP1f9XVf9V|xxd -b -c3 -g0|cut -c10-33|sed$'s/../\e[4$[2#&+1]m \e[0m/g;s/^/echo /')"  • this is what i see. am i doing something wrong? Oct 20, 2014 at 23:35 • @ardnew: BSD base64 uses -D for decode and -d for debug. Oct 21, 2014 at 4:08 # Tcl 298 package require base64 set d [base64::decode AVUABVVUCr7ALv78Lr+/K/6oA//wCmoAKmmoqlWq+ddv/VV/9VVfBUFQKgCoqgCq] binary scan$d B* z
set i 0
foreach {a b} [split $z ""] { if {$i % 12 == 0} {puts "\033\[0m"}
puts -nonewline "\033\[4[string map {00 4 01 1 10 2 11 3} $a$b];m  "
incr i
}
puts "\033\[0m"


It's a 2 bits per pixel image in base 64. Pixels are mapped to ansi escape codes.

• Without even trying, your code seems a little bit golfable: tio.run/… Jun 8, 2018 at 1:16

## JavaScript - 256 characters (161 obfusc-a-tweeted)

d=v=>{for(i=v&15;i--;)O.innerHTML+=<i style="color:#${'6B8CFF6A6B04B13425E39D25'.substr(x%4*6,6)}">█</i>+(++f%12?'':'<br>');x++},f=x=0,[..."fhilsswsssuss££cgÓdcddc¤g£stcucds³c¹cefefcc¤c§"].map(v=>(d(v=v.charCodeAt(0)-99),d(v>>4))) <p id=O> ### Method: 1. Using bitmasking, a 63x8-bit string provides a 126x4-bit value array consisting of numbers in the range 0-9. (Frustratingly... saved 63 characters by going 4-bit, but spent 50 characters unpacking the bits again lol. Still, 13 chars is 13 chars! :-) 2. The 4 paint colours are cycled in the order: B, G, R, O. At each iteration, 0-9 divs are rendered for the current color (with a line break every 12th) To determine the optimal order for the color cycle, I ran the compression algorithm against the raw data for each of 24 permutations of [R, G, B, O] and selected the one yielding the shortest output (126 was best, least optimal was around 150-something) ETA discovered this only after reading the other answers using obfusca-tweet... eval(unescape(escape𩀽𭠽🡻𩡯𬠨𪐽𭠦𜐵𞱩𛐭𞰩𣰮𪑮𫡥𬡈𥁍𣀫👠🁩𘁳𭁹𫁥🐢𨱯𫁯𬠺𘰤𮰧𝡂𞁃𡡆𝡁𝡂𜀴𠠱𜰴𜠵𡐳𞑄𜠵𙰮𬱵𨡳𭁲𚁸𙐴𚠶𛀶𚑽𘠾ﶈ�𛱩🡠𚰨𚰫𩠥𜐲🰧𙰺𙰼𨡲🠧𚐻𮀫𚱽𛁦👸🐰𛁛𛠮𛠢𩡨𪑬𬱳𭱳𬱳𭑳𬲣𸱣𩳓𩁣𩁤𨲤𩲣𬱴𨱵𨱤𬲳𨲹𨱥𩡥𩡣𨲤𨲧𘡝𛡭𨑰𚁶🐾𚁤𚁶👶𛡣𪁡𬡃𫱤𩑁𭀨𜀩𛐹𞐩𛁤𚁶🠾𝀩𚐩𒠼𬀠.replace(/u../g,'')))  Further ideas. - Try 3-bit data range 0-6, with the rare 7,8,9 gaining 4 extra each: 60000N. - check color cycle permutations in all directions and speeds other than horizontally one pixel at a time. - try multiple render passes so colors can be layered. • D'oh it just dawned that this is about chars not byes, so could probably have halved the data again using the 16-bit chars. Jul 18, 2017 at 13:40 # Javascript, 253240238 236 ## Obfuscatweeted source - 253240238 236 document.write(unescape(escape('🁳𨱲𪑰𭀾𘠵𫐲𫰹𫑨𜰰𞐷𫁯𩰹𜐰𜑰𪰹𮡰𝱵𞑶𭁸𭰹𜱱𭐸𞐸𝡷𭰹𭑯𩱫𞐳𨱳𬁨𞐶𪡭𪡥𞐶𬁬𫡵𞐶𭠷𮐲𞑭𝐸𜀹𭁨𮡯𞐳𨡥𨰵𘠮𬱰𫁩𭀨𞐩𛡦𫱲𡑡𨱨𚁦𭑮𨱴𪑯𫠨𨰩𮱤👤𫱣𭑭𩑮𭀻𨰽𬁡𬡳𩑉𫡴𚁣𛀳𝠩𛡴𫱓𭁲𪑮𩰨𝀩𞱷𪁩𫁥𚁣𛡬𩑮𩱴𪀼𜐲𚑣🐢𜀢𚱣𞱣𛡳𬁬𪑴𚀢𘠩𛡦𫱲𡑡𨱨𚁦𭑮𨱴𪑯𫠨𭠩𮱤𛡷𬡩𭁥𚀢🁰𘁳𭁹𫁥🐧𩁩𬱰𫁡𮐺𪑮𫁩𫡥𞱰𨑤𩁩𫡧𞠹𞱢𨑣𪱧𬡯𭑮𩀺𘰢𚱛𘠶𠠸𠱆𡠢𛀢𝡁𝡂𜀴𘠬𘡅𜰹𡀲𝐢𛀢𠠱𜰴𜠵𘡝𦰫𭡝𚰢𙰾🀯𬀾𘠩𯐩𞱤𛡷𬡩𭁥𚀢🁢𬠾𘠩𯐩🀯𬱣𬡩𬁴🠠').replace(/uD./g,'')))  ## Unobfuscated - 395370365 361 <script>"5m2o9mh3097log9101pk9zp7u9vtxw93qu8986ww9uogk93csph96jmje96plnu96v7y29m5809thzo93bec5".split(9).forEach(function(c){d=document;c=parseInt(c,36).toString(4);while(c.length<12)c="0"+c;c.split("").forEach(function(v){d.write("<p style='display:inline;padding:9;background:#"+["6B8CFF","6A6B04","E39D25","B13425"][+v]+"'></p>")});d.write("<br>")})</script>  Thanks to @compass for the <p> tag tricks, and @xem for 2(5) chars. Demo It converts data from base 36, and converts to base 4. • I can't test it, but I don't think padding:9 Does anything without a unit after it. You could also use a single-letter element like a or q that is implicitly inline, instead of p. Oct 17, 2014 at 3:03 • @hsl I've updated demo link, and it works well at least my Chrome, Firefox and Safari on Mac. Oct 17, 2014 at 3:08 • -2 bytes: replace "|" by 9 in the string and the split. Also, you use 3 times "document.write", you should put it in a var to save, like, 24b) – xem Oct 17, 2014 at 7:36 • @xem Thanks for reminding me the number split trick. And since we can't assign document.write to variable (we should use document.write.bind(document)), my best was assigning document to variable. Oct 17, 2014 at 7:50 • or, you can do this the first time: (d=document)[w="write"](/* things to write */), and just do that after: d[w]("Hi") – xem Oct 17, 2014 at 8:11 # JavaScript ES6 (HTML + CSS), 199 30731953630 Using Obfusc-a-tweet: eval(unescape(escape('𬰽𦱝𒠧𜰹𮡲𬀳𝁤𩡬𜱪𩱴𜐴𨡷𭐵𝁢𪱣𩠴𝱰𜡨𜱦𫁹𭀳𪑮𪀱𝀵𝀸𞐶𫑳𫱡𞑰𩡥𝰹𭁺𝑲𞑤𝁢𜰳𝁨𩁸𝀵𩀴𞐶𫠹𩱱𙰮𫑡𭁣𪀨𛰮𮰵𯐯𩰩𛡦𫱲𡑡𨱨𚀨𫠬𪐩🐾𦰮𛠮𬁡𬡳𩑉𫡴𚁮𛀳𝠩𛡴𫱓𭁲𪑮𩰨𝀩𧐮𩡯𬡅𨑣𪀨𚁭𛁪𚐽🡳𛡰𭑳𪀨𪠫𜐫𙱰𮀠𙰫𚀫𪐫𜐩𚰧𬁸𘀣𙰫𦰧𠠱𜰴𜠵𙰬𙰶𠠸𠱆𡠧𛀧𝡁𝡂𜀴𙰬𙱅𜰹𡀲𝐧𧑛𚱭𧐩𚐩𒡤𫱣𭑭𩑮𭀮𭱲𪑴𩐨𙰼𬀠𬱴𮑬𩐽𘡷𪑤𭁨𞠱𬁸𞱨𩑩𩱨𭀺𜑰𮀻𨡯𮀭𬱨𨑤𫱷𞠧𚱳𚰧𘠧𚐠').replace(/uD./g,'')))  This displays the sprite without using any images or multiple elements; it just misuses the CSS box-shadow property to create each pixel. Try it at http://jsbin.com/pozohiyezo/. This unobfuscated version is 307 characters: s=[] '39zrp34dfl3jgt14bwu54bkcf47p2h3flyt3inh1454896msoa9pfe79tz5r9d4b334hdx45d496n9gq'.match(/.{5}/g).some((n,i)=>[...parseInt(n,36).toString(4)].forEach((m,j)=>s.push(j+1+'px '+(+i+1)+'px #'+['B13425','6B8CFF','6A6B04','E39D25'][+m]))) document.write('<p style="width:1px;height:1px;box-shadow:'+s+'"')  This is the original, plain-vanilla HTML version. See it in action at http://jsfiddle.net/gfeLn1ey/1/. <p style="width:1px;height:1px;box-shadow:4px 1px 0 #B13425,5px 1px 0 #B13425,6px 1px 0 #B13425,7px 1px 0 #B13425,8px 1px 0 #B13425,12px 1px 0 #6B8CFF,3px 2px 0 #B13425,4px 2px 0 #B13425,5px 2px 0 #B13425,6px 2px 0 #B13425,7px 2px 0 #B13425,8px 2px 0 #B13425,9px 2px 0 #B13425,10px 2px 0 #B13425,11px 2px 0 #B13425,12px 2px 0 #6B8CFF,3px 3px 0 #6A6B04,4px 3px 0 #6A6B04,5px 3px 0 #6A6B04,6px 3px 0 #E39D25,7px 3px 0 #E39D25,8px 3px 0 #6A6B04,9px 3px 0 #E39D25,12px 3px 0 #6B8CFF,2px 4px 0 #6A6B04,3px 4px 0 #E39D25,4px 4px 0 #6A6B04,5px 4px 0 #E39D25,6px 4px 0 #E39D25,7px 4px 0 #E39D25,8px 4px 0 #6A6B04,9px 4px 0 #E39D25,10px 4px 0 #E39D25,11px 4px 0 #E39D25,12px 4px 0 #6B8CFF,2px 5px 0 #6A6B04,3px 5px 0 #E39D25,4px 5px 0 #6A6B04,5px 5px 0 #6A6B04,6px 5px 0 #E39D25,7px 5px 0 #E39D25,8px 5px 0 #E39D25,9px 5px 0 #6A6B04,10px 5px 0 #E39D25,11px 5px 0 #E39D25,12px 5px 0 #E39D25,2px 6px 0 #6A6B04,3px 6px 0 #6A6B04,4px 6px 0 #E39D25,5px 6px 0 #E39D25,6px 6px 0 #E39D25,7px 6px 0 #E39D25,8px 6px 0 #6A6B04,9px 6px 0 #6A6B04,10px 6px 0 #6A6B04,11px 6px 0 #6A6B04,12px 6px 0 #6B8CFF,4px 7px 0 #E39D25,5px 7px 0 #E39D25,6px 7px 0 #E39D25,7px 7px 0 #E39D25,8px 7px 0 #E39D25,9px 7px 0 #E39D25,10px 7px 0 #E39D25,12px 7px 0 #6B8CFF,3px 8px 0 #6A6B04,4px 8px 0 #6A6B04,5px 8px 0 #B13425,6px 8px 0 #6A6B04,7px 8px 0 #6A6B04,8px 8px 0 #6A6B04,12px 8px 0 #6B8CFF,2px 9px 0 #6A6B04,3px 9px 0 #6A6B04,4px 9px 0 #6A6B04,5px 9px 0 #B13425,6px 9px 0 #6A6B04,7px 9px 0 #6A6B04,8px 9px 0 #B13425,9px 9px 0 #6A6B04,10px 9px 0 #6A6B04,11px 9px 0 #6A6B04,12px 9px 0 #6B8CFF,1px 10px 0 #6A6B04,2px 10px 0 #6A6B04,3px 10px 0 #6A6B04,4px 10px 0 #6A6B04,5px 10px 0 #B13425,6px 10px 0 #B13425,7px 10px 0 #B13425,8px 10px 0 #B13425,9px 10px 0 #6A6B04,10px 10px 0 #6A6B04,11px 10px 0 #6A6B04,12px 10px 0 #6A6B04,1px 11px 0 #E39D25,2px 11px 0 #E39D25,3px 11px 0 #6A6B04,4px 11px 0 #B13425,5px 11px 0 #E39D25,6px 11px 0 #B13425,7px 11px 0 #B13425,8px 11px 0 #E39D25,9px 11px 0 #B13425,10px 11px 0 #6A6B04,11px 11px 0 #E39D25,12px 11px 0 #E39D25,1px 12px 0 #E39D25,2px 12px 0 #E39D25,3px 12px 0 #E39D25,4px 12px 0 #B13425,5px 12px 0 #B13425,6px 12px 0 #B13425,7px 12px 0 #B13425,8px 12px 0 #B13425,9px 12px 0 #B13425,10px 12px 0 #E39D25,11px 12px 0 #E39D25,12px 12px 0 #E39D25,1px 13px 0 #E39D25,2px 13px 0 #E39D25,3px 13px 0 #B13425,4px 13px 0 #B13425,5px 13px 0 #B13425,6px 13px 0 #B13425,7px 13px 0 #B13425,8px 13px 0 #B13425,9px 13px 0 #B13425,10px 13px 0 #B13425,11px 13px 0 #E39D25,12px 13px 0 #E39D25,1px 14px 0 #6B8CFF,2px 14px 0 #6B8CFF,3px 14px 0 #B13425,4px 14px 0 #B13425,5px 14px 0 #B13425,6px 14px 0 #6B8CFF,7px 14px 0 #6B8CFF,8px 14px 0 #B13425,9px 14px 0 #B13425,10px 14px 0 #B13425,11px 14px 0 #6B8CFF,12px 14px 0 #6B8CFF,1px 15px 0 #6B8CFF,2px 15px 0 #6A6B04,3px 15px 0 #6A6B04,4px 15px 0 #6A6B04,5px 15px 0 #6B8CFF,6px 15px 0 #6B8CFF,7px 15px 0 #6B8CFF,8px 15px 0 #6B8CFF,9px 15px 0 #6A6B04,10px 15px 0 #6A6B04,11px 15px 0 #6A6B04,12px 15px 0 #6B8CFF,1px 16px 0 #6A6B04,2px 16px 0 #6A6B04,3px 16px 0 #6A6B04,4px 16px 0 #6A6B04,5px 16px 0 #6B8CFF,6px 16px 0 #6B8CFF,7px 16px 0 #6B8CFF,8px 16px 0 #6B8CFF,9px 16px 0 #6A6B04,10px 16px 0 #6A6B04,11px 16px 0 #6A6B04,12px 16px 0 #6A6B04,6px 6px 0 5px #6B8CFF"  • TIL, you can not close a <p tag :) – xem Oct 17, 2014 at 8:18 • this code can have a very good compression in a tool like regpack. Here's an example in 729b (JS is used to write the HTML, though): goo.gl/7fF7kx – xem Oct 17, 2014 at 8:46 • @xem I had actually not even considered generating the code with JS, but I was able to make it much shorter buy following the code's pattern. Oct 17, 2014 at 23:53 ## Javascript, 256 or 245 252 or 241 256 document.write("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld".replace(/./g,function(x){return new Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))  It's sad to override 256, but 245 is possible if use nonprintable characters: document.write(btoa(">§ç©­ª¥j¦¬jÈÚ©»²&ív[-½ÍÙÈåÚÚÚ­êÙ«»»køÉ\\Ù]").replace(/./g,function(x){return new Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+["B13425","6A6B04","6B8CFF","E39D25"][x>>3]+">")}))  There is some problem with submitting solution with nonprintable characters. The argument of btoa have to be the result of atob("ij6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld") with 1 symbol of length added for escaping backslash. Shorten both solutions by 4 symbols: we don't need new for array creation. 252 document.write("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld".replace(/./g,function(x){return Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))  241 document.write(btoa("©ùêG+j©Z©«²6ªnÆ¬»]Ëeog&sför'yv¶¶«z¶jîîçãâ>$rVÚÙ]").replace(/./g,function(x){return Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))


No escaping is needed in this version. The btoa's argument is result of atob("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclbaidld")

• I noticed the non-printable problem on this and my last challenge too. I thought it was only chars 8, 9 & 13 if that helps (though I could easily be mistaken) Jul 16, 2017 at 18:30

# SmileBASIC, 147 136 characters

P$="xxxxxxxx FOR I=0TO 191C=ASC("xxxxxxxxxxxxxxxxxxxxxxxx"[I/8])>>I MOD 8*2AND 3GPSET I/16,15AND I,ASC(P$[C*2])<<16OR ASC(P$[C*2+1])NEXT  Output (cropped): I replaced all the characters in the data strings with x's, here are the character codes (in UCS-2): P$ (Palette): FF6B,8CFF,FFB1,3425,FF6A,6B04,FFE3,D925
Image data: 0000,83F8,0A80,A3FA,8BE4,A5EA,BEA5,A55A,7EE5,0575,BFF5,0156,BFF5,0156,BBA5,0575,3AF4,A55A,3BC4,A5EA,0BC4,A3FA,0300,83F8

The palette is stored in a string, each color (32 bits) is stored in two characters (16 bits each). The image data (2 bits per pixel) is stored in another string (8 pixels per character)
Luckily, the challenge is scored in characters, since this file is significantly larger if saved in UTF-8.

# 05AB1E, 87 bytes (Non-competing)

•8,vkJíÝ1¢tt6,9XÂck$XSãõO©Ú"›qf®¸Ì#}„K0ÝCìxý}É~ð_áú•4BSvy•3«WKyÛòèz*Ðeb•16B6ôè'#ì})12ô»  Try it online! Outputs: #B13425 #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #B13425 #B13425 #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #E39D25 #E39D25 #6A6B04 #E39D25 #B13425 #B13425 #B13425 #B13425 #6A6B04 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25 #B13425 #B13425 #6A6B04 #E39D25 #6A6B04 #6A6B04 #E39D25 #E39D25 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25 #B13425 #6A6B04 #6A6B04 #E39D25 #E39D25 #E39D25 #E39D25 #6A6B04 #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6A6B04 #B13425 #6A6B04 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04 #6A6B04 #6A6B04 #E39D25 #E39D25 #6A6B04 #6B8CFF #E39D25 #6B8CFF #6B8CFF #E39D25 #6B8CFF #6A6B04 #E39D25 #E39D25 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04 #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #B13425 #6A6B04 #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #6A6B04  Because 05AB1E can't do colors, or graphics of any kind... If this isn't acceptable I'll delete it. • You could write a Bash wrapper and say your solution is Bash + 05AB1E Feb 7, 2017 at 21:07 • @Pavel I was thinking of doing that, guess I'll go mate this solution with someone else's ;P. Feb 7, 2017 at 21:22 • I can't say it "wins" but please keep it, as it's a great compression score :) – xem Feb 8, 2017 at 8:38 # Pxem, 113 bytes (filename). Here is filename (some characters as backslash with its code point in three-digit octal): xHJG\071\070b\015\001\021\001\242\005\001l\215\400\344\236&kl\005\262\065&-\001\001\001\001\015\001\021\001\001\003\067\205\210i\014\352k\205\015B\005g.\326\030e\317z]&\012\015\206S\231\061\225\215\311K\256\005\264J\252\262\002\263\220\374\224\373>\007\253\007%\262q&j\271\226\245\001\001<.w\001.-.o.c.c.z.d.aX.a  Outputs as GIF. ## How it works Just as @nietthedarkabsol's, but had to add one to every byte, as the original GIF contains null chacters, which is illegal for filename. Then I just decrement each of them to output them. If I had an implementation whose .w breaks from the loop when stack is empty (nk. actually specified on the original page but no one has ever complied with it, including himself), then the final part could be golfed to: .w.o.c.a. ## Perl, 266260257249 245 bytes $_="444111114444441111111114442223323444423233323334423223332333422333322224444333333344442212224444422212212224222211112222332131131233333111111333331111111133441114411144422244442224222244442222";s/\d/\033[4$&m /g;s/.{84}/$&\033[00m\n/g;print


Uses approach similar to user2485710's bash solution to write a VT100 style output. Strips the explicit N for newline by inserting a newline every 12 "vt100 pixels", 12 * 7 = 84.

# Sinclair BASIC - 573 bytes

OK, so the Spectrum can't show RGB colours as specified, so have used the closest possible.

10 let x=0:let y=0:let i=0
20 let a$="1c2e1f2i1c4c6b461d4646c46c1b464b6c46c14b6d4d1d6g1d4b24c1e4c24b24c14d2d4d6b4262b6246e2f6e2c1b2c6b1b2c1b2c1c4c1d4c14d1d4d" 30 let l=len a$
40 let i=i+1:let c=1:let p=0:let k=val a$(i) 50 if a$(i+1)>="a" then let c=code a\$(i+1)-96:let i=i+1
60 print at y,x;ink k;"\::":let p=p+1:let x=x+1:if x=12 then let x=0:let y=y+1
70 if p<c then goto 60
80 if i<l then goto 40


The string is the colour (1=blue, 2=red etc) followed by a letter to represent how many times that block repeats (by taking the ASCII value minus 96 to become 1,2,3 etc). A number without a letter after it just draws one block.

"\::" in line 60 is how to enter graphics in a text editor before turning into a TAP file to load into Fuse emulator. (Shows as a solid block graphic on screen).

Each keyword is one byte in Sinclair BASIC, have included a count from a PEEK command after it was generated.