Code Golf: 1x1 black pixel

Question

Recently, I used my favorite image editor to make a 1x1 black pixel (which can come in handy when you want to draw solid boxes in HTML cheaply). Even though I made it a monochrome PNG, it came out to be 120 bytes! I mean, that's kind of steep. 120 bytes. For one pixel. I then converted it to a GIF, which dropped the size down to 43 bytes. Much better, but still...

Challenge

The shortest image file or program that is or generates a 1x1 black pixel. A submission may be:

• An image file that represents a 1x1 black pixel. The format chosen must be able to represent larger images than 1x1, and cannot be ad-hoc (that is, it can't be an image format you just made up for code golf). Image files will be ranked by byte count.
• A program that generates such an image file. Programs will be ranked by character count, as usual in code golf.

As long as an answer falls into one of these two categories, anything is fair game.

Also, for image files, please specify them in hexadecimal or escapes rather than using an external image host :-)

Seibold

Is 1 bit per pixel ok? And what is the minimum file size you can create on Windows? Or is it in memory – Manhattan

Yes, 1 bit per pixel is okay, but the image format must be able to hold larger monochrome images. I'm not sure what you mean by minimum file size, but disk space used (e.g. 4096 bytes) doesn't matter; file size itself matters. – Seibold

I don't like this question because it violates my "solve a class or problems" requirement for code-golfs. See meta.stackexchange.com/questions/24242/… for some community thoughts on [code-golf] on SO. – Kealey

@dmckee: A counterargument to that is that the answers to this question introduce the reader to various rendering formats and technologies. It looks like a good place to start learning about PGM, PBM, Logo, the Python Imaging Library, PostScript, SVG, and XPM. If I need to draw images programmatically, I now know some good places to start. – Seibold

Answer 1

WBMP, 5 bytes:

00 00 01 01 00

Can't imagine anything smaller

Displume

Caveat: .wbmp seems part of the WAP/WML abortion and is not supported format out of the box by neither popular desktop browsers (IE, Firefox, Chrome) - what's the point of using such pixel in HTML? – Pastoralize

Answer 2

Data URI, 83 characters

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==

Recor

Awesome! I this is would have to be the most useful answer. It can be used in place of an image file to cut down on server requests. – Seibold

Here is a white version. data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAACAkwBADs= – Daman

And a transparent version. data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw== – Daman

@Joey: That does only cut down if it's needed just once, which is probably uncommon for the usage you outlined in the question. If the image is referenced by URL it is fetched just once and then cached. – Bowfin

@Marian: 0 requests for a 1x1 image is still less than 1 request. – Assortment

The black version is longer than it needs to be: data:image/gif;base64,R0lGODlhAQABAJAAAAAAAAAAACwAAAAAAQABAAACAgQBADs= is only 70 characters – Gormless

An interesting side note; Google's latest redesign of their image search uses data:image/jpg;base64 for the previews. – Daman

My transparent one is only 83 chars, created in Gimp and loaded through PHP for encoding: data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== Note that gradbot's transparent version is 93 chars. Mine beats that. – Castigate

Gradbot's white 1px version (63 chars) doesn't show up as white for me in Chrome 20+, but this one does (70 chars): data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs= – Dimaggio

Answer 3

Image file: 10 bytes, in PGM format:

P5 1 1 1\n\0

To create it, in Python: 40 characters

 open('b.pgm', 'w').write('P5 1 1 1\n\0')

Broider

Looks like a winner for standard formats. My old drawing program from the DOS days has you beat though. – Mandate

Never heard of the format, but this will do the same thing: perl -e 'print "P5 1 1 1\n\0"' > b.pgm 29 Characaters – Siple

Answer 4

Unicode art format:

·

Ringnecked

Oh, I thought I spotted a dead pixel. – Extenuation

Even on my phone, I see some antialiasing. This suggests that (1) you've given more than one pixel, and (2) it is not entirely black. – Afflictive

Wow, two bytes, I think you're the winner :-) – Bowfin

I see it as a 3x3 matrix of pixels, of which only one is pure black. No way! – Displume

Ascii art format: . (Note that @ is also a valid ascii art representation of 1 pixel). – Assortment

Answer 5

The PBM format is a black and white graphics format.

A binary representation of a single black pixel would take 8 bytes, and writing it to a file with C# would look like:

File.WriteAllText("p.pbm", "P4 1 1 ÿ");

Margaux

Answer 6

Logo / Turtle basic, 12 bytes

PENDOWN FD 1

I can't remember if pendown can be shortened to pd or not, if so, that drops it to 7 bytes.

Featly

yes pd is a valid alias :) although the default logo background canvas is black, so the lines are white ;) – Dowling

Answer 7

bash: 31 chars

The script to download a single pixel gif from the interwebs is fewer bytes than the single pixel itself...

wget http://tinyurl.com/2w97dyo

Seibold

Answer 8

Python+PIL 68 chars

from PIL import Image
Image.fromstring("P",(1,1),"\0").save("B.gif")

Phlogistic

Answer 9

Postscript, 29 bytes. not really a "single pixel", but it was a single pixel on my preview screen.

0 0 moveto .5 0 lineto stroke

Remex

Answer 10

Python (w/ PIL) (85 chars):

from PIL import Image
i=Image.new("P",(1,1))
i.putpixel((0,0),(0))
i.save("i.gif","GIF")

Superhighway

Is it less characters to just write import PIL, then PIL.Image.new? Looks like 5 characters less, or so. – Reduplication

@chpwn. Won't work because Image isn't automatically in PIL's namespace – Phlogistic

Answer 11

I'm pretty late to this party, but http://www.perlmonks.org/?node_id=7974 has a more general answer than anyone's posted so far:

## tinygif
## World's Smallest Gif
## 35 bytes, 43 if transparent

use strict;
my($RED,$GREEN,$BLUE,$GHOST,$CGI);

## Adjust the colors here, from 0-255
$RED   = 255;
$GREEN = 0;
$BLUE  = 0;

## Set $GHOST to 1 for a transparent gif, 0 for normal
$GHOST = 0;

## Set $CGI to 1 if writing to a web browser, 0 if not
$CGI = 0;

$CGI && printf "Content-Length: %d\nContent-Type: image/gif\n\n", 
  $GHOST?43:35;
printf "GIF89a\1\0\1\0%c\0\0%c%c%c\0\0\0%s,\0\0\0\0\1\0\1\0\0%c%c%c\1\0;",
  144,$RED,$GREEN,$BLUE,$GHOST?pack("c8",33,249,4,5,16,0,0,0):"",2,2,4;

Gormless

Answer 12

DrRacket: 23 chars

#lang slideshow
(disk 1)

Seibold

Answer 13

SVG, 59 characters:

<svg><rect width="1" height="1" style="fill:#000;"/></svg>

Unfortuntally, including Doctype it grows to 157...:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg><rect width="1" height="1" style="fill:#000;"/></svg>

Vestry

Luckily, you can use <!DOCTYPE html> instead and leave out any namespaces, etc. as it's valid HTML5. I'd assume most HTML5 engines don't really care if there's a doctype or not, so your first example should be fine. – Nolde

Answer 14

An old image format I used to use: 4 bytes

 01 00 00 0C

The format consists of an array of 16 bit integers (little endian):

Bit mapping:

0-10:  number of pixels to shade
10-11: control bits
12-15: VGA16 pidel color

Control bits values:

0: normal
1: end of line
3: end of file

Mandate

Reading starting from the third line describes the entire file format. There are no magic numbers and the image dimensions are implied from the interpretation of the scanlines (the reference implementation blackened extra space if the image was jagged). – Mandate

Answer 15

Rebmu: 16 chars

en'PNGmkIM![1x1]

If you want it to save to a file based on an argument you pass in, that adds three more chars to the program:

rebmu/args [wrAen'PNGmkIM![1x1]] %my-black-pixel.png

The program is shorthand for the following Rebol, parentheses added for clarity:

write a (encode 'png (make image! [1x1]))

Arson

Answer 16

XPM, 57 bytes:

/* XPM */
static char *_x_[] = {"1 1 1 1",".c #000","."}

When looking for the wikipedia article to link it I found XPM2, 26 bytes, but I could not open that with any program here.

! XPM2
1 1 1 1
. c #000
.

Bowfin

Answer 17

<div style="height: 0; width: 1px; border-top: 1px solid #000">

But positioning it will take more.

Mussulman