30

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 :-)

rekire
  • 47,260
  • 30
  • 167
  • 264
Joey Adams
  • 41,996
  • 18
  • 86
  • 115
  • Is 1 bit per pixel ok? And what is the minimum file size you can create on Windows? Or is it in memory – Chris S May 29 '10 at 00:39
  • 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. – Joey Adams May 29 '10 at 00:41
  • 4
    I don't like this question because it violates my "solve a class or problems" requirement for code-golfs. See http://meta.stackexchange.com/questions/24242/acceptable-level-of-code-golf-questions for some community thoughts on [code-golf] on SO. – dmckee --- ex-moderator kitten Jun 03 '10 at 16:08
  • 3
    @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. – Joey Adams Jun 09 '10 at 16:34

17 Answers17

42

Data URI, 83 characters

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==
Kevin Vaughan
  • 14,320
  • 4
  • 29
  • 22
  • 12
    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. – Joey Adams May 29 '10 at 04:32
  • 4
    Here is a white version. `data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAACAkwBADs=` – gradbot May 29 '10 at 13:13
  • 5
    And a transparent version. `data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==` – gradbot May 29 '10 at 13:21
  • 3
    @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. – Marian May 30 '10 at 00:03
  • 5
    @Marian: 0 requests for a 1x1 image is still less than 1 request. – Brian Jun 03 '10 at 15:18
  • The black version is longer than it needs to be: `data:image/gif;base64,R0lGODlhAQABAJAAAAAAAAAAACwAAAAAAQABAAACAgQBADs=` is only 70 characters – zwol Aug 08 '10 at 02:39
  • 1
    An interesting side note; Google's latest redesign of their image search uses `data:image/jpg;base64` for the previews. – gradbot Aug 08 '10 at 02:50
  • 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. – Volomike Feb 03 '12 at 02:29
  • 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=` – Karl Horky Mar 15 '13 at 08:55
26

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')
tzaman
  • 46,925
  • 11
  • 90
  • 115
  • 1
    Looks like a winner for standard formats. My old drawing program from the DOS days has you beat though. – Joshua May 29 '10 at 01:54
  • 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 – Jamie Wong Jun 18 '10 at 07:05
22

Unicode art format:

·

Mark Byers
  • 811,555
  • 193
  • 1,581
  • 1,452
14

WBMP, 5 bytes:

00 00 01 01 00

Can't imagine anything smaller

Agos
  • 18,542
  • 11
  • 56
  • 70
  • 2
    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? – Nas Banov Jun 03 '10 at 08:10
13

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 ÿ");
joshperry
  • 41,167
  • 16
  • 88
  • 103
9

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.

Donnie
  • 45,732
  • 10
  • 64
  • 86
6

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
Joey Adams
  • 41,996
  • 18
  • 86
  • 115
4

Python+PIL 68 chars

from PIL import Image
Image.fromstring("P",(1,1),"\0").save("B.gif")
John La Rooy
  • 295,403
  • 53
  • 369
  • 502
3

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")
Yuval Adam
  • 161,610
  • 92
  • 305
  • 395
3

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
Mark Harrison
  • 297,451
  • 125
  • 333
  • 465
2

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
Joshua
  • 40,822
  • 8
  • 72
  • 132
  • 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). – Joshua Jun 17 '10 at 15:08
2

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>
Piotr Rochala
  • 7,748
  • 2
  • 33
  • 54
  • Luckily, you can use ` ` 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. – Eli Grey Jun 03 '10 at 03:59
2

DrRacket: 23 chars

#lang slideshow
(disk 1)
Joey Adams
  • 41,996
  • 18
  • 86
  • 115
2

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;
zwol
  • 135,547
  • 38
  • 252
  • 361
1

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
.
Marian
  • 5,817
  • 2
  • 18
  • 21
1

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]))
HostileFork says dont trust SE
  • 32,904
  • 11
  • 98
  • 167
0
<div style="height: 0; width: 1px; border-top: 1px solid #000">

But positioning it will take more.

Bryan Patrick Coleman
  • 1