smallest filesize for transparent single pixel image

Question

I'm looking for the smallest (in terms of filesize) transparent 1 pixel image.

Currently I have a gif of 49 bytes which seems to be the most popular.

But I remember many years ago having one which was less than 40 bytes. Could have been 32 bytes.

Can anyone do better? Graphics format is no concern as long as modern web browsers can display it and respect the transparency.

UPDATE: OK, I've found a 42 byte transparent single pixel gif: http://bignosebird.com/docs/h3.shtml

UPDATE2: Looks like anything less than 43 bytes might be unstable in some clients. Can't be having that.

Answer 1

First of all, there is honestly no valid reason to use spacer GIFs in 2020 and beyond (unless you're working with retro style websites), so this post is mostly just for the curious. Anyway let's begin:

The smallest valid transparent GIF is 35 bytes.

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=

47 49 46 38 39 61 01 00 01 00 00 00 00 21 f9 04 01 00 00 00 00 2c
00 00 00 00 01 00 01 00 00 02 01 00 00

This will work in every browser, new and old, as well as basically any image editor/viewer. However, it might not work with weak GIF parsers such as the one in PHP's image library.

For full coverage, the minimum increases to 41 bytes:

data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAAAAAAALAAAAAABAAEAAAIBAAA=

47 49 46 38 39 61 01 00 01 00 80 00 00 FF FF FF FF FF FF 21 F9 04
00 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02 01 00 00

Here's the explanation.

The smallest possible GIF is dependent on different implementations of the GIF spec, and this can even change over time. Web browsers have often been lenient and inconsistent with GIF rendering, allowing for partially damaged GIFs to display. Throughout the history of this answer, I had crafted a 14-byte GIF that was transparent only in Chrome, but this no longer works. There was a 23-byte version that worked in Chrome and Firefox, but it eventually stopped being transparent in Firefox. I settled on a 32-byte version that I thought worked everywhere, only to later discover it didn't work in Safari 14. Even a 33-byte version that fixed Safari 14 stopped working in Safari 15! So clearly it is better to follow the standards and not rely on hacky solutions that may not work forever. Though again I should also mention that spacer GIFs haven't been relevant since 1996, and you really shouldn't be using them. Use CSS instead. I just wrote this answer to learn more about GIFs.

If we follow the official GIF spec, we come up with a figure of 43 bytes, made of the following parts:

1. File signature, 6 bytes
2. Logical Screen Descriptor, 7 bytes
3. Global Color Table, 6 bytes
4. Graphics Control Extension, 8 bytes
5. Image Descriptor, 10 bytes
6. Compressed LZW Image Data, 5 bytes
7. Trailer (0x3B), 1 byte

Some of this is technically optional. For example, the Trailer byte can be safely omitted and won't prevent the image from being rendered. The LZW data can be reduced to 4 bytes by changing the sub-block count to 1 instead of 2. That gets us to the 41-byte GIF above. We can then safely disable the Global Color Table by turning off a bit flag, which safely works in every browser, but might confuse inept GIF parsers. That gets us the 35-byte above.

Answer 2

Here is what I use in a C# byte array (avoids file access)

static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x1, 0x0, 0x1, 0x0, 0x80, 0x0, 0x0, 0xff, 0xff, 0xff, 0x0, 0x0, 0x0, 0x2c, 0x0, 0x0, 0x0, 0x0, 0x1, 0x0, 0x1, 0x0, 0x0, 0x2, 0x2, 0x44, 0x1, 0x0, 0x3b };

In asp.net MVC this can be returned like this

return File(TrackingGif, "image/gif");

Answer 3

Checkout this blank.gif file (43 bytes). Less than 49 :D

Answer 4

To expand on Jacob's byte array answer, i generated the c# byte array for a transparant 1x1 gif I made in photoshop.

static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00, 0x81, 0x00, 0x00, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x21, 0xff, 0x0b, 0x4e, 0x45, 0x54, 0x53, 0x43, 0x41, 0x50, 0x45, 0x32, 0x2e, 0x30, 0x03, 0x01, 0x01, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x08, 0x04, 0x00, 0x01, 0x04, 0x04, 0x00, 0x3b};

Answer 5

http://polpo.org/blank.gif is a 37 byte transparent GIF made with gifsicle.

In css-ready base64 format:

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==

Answer 6

• See: http://www.google-analytics.com/__utm.gif, 35B

• Alternative in Perl (45B):

  ## tinygif
  ## World's Smallest Gif
  ## 35 bytes, 43 if transparent
  ## Credit: http://www.perlmonks.org/?node_id=7974
  
  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 = 1;
  
  ## 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
  +0;
  

Run it ...

$ perl tinygif > tiny.gif
$ ll tiny.gif
-rw-r--r--  1 stackoverflow  staff    45B Apr  3 10:21 tiny.gif

Answer 7

Transparent dot, 43 bytes:

echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x80\x0\x0\xff\xff\xff\xff\xff";
echo "\xff\x21\xf9\x04\x1\x0a\x0\x1\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0";
echo "\x0\x2\x2\x4c\x1\x0\x3b";

Orange dot, 35 bytes:

echo "\x47\x49\x46\x38\x37\x61\x1\x0\x1\x0\x80\x0\x0\xfc\x6a\x6c\x0";
echo "\x0\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x2\x44\x1\x0\x3b";

Without color table (possibly painted as black), 26 bytes:

echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x0\xFF";
echo "\x0\x2C\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x0\x3B";

The first two I found some time ago (in the times of timthumb vulnerability) and I don't remember the sources. The latest one I found here.

P.S.: Use for tracking purposes, not as spacers.

Answer 8

I think this is most memorable 1x1 (38 bytes):

data:image/gif,GIF89a%01%00%01%00///;

According to GIF header spec:

GIF Header

Offset   Length   Contents
  0      3 bytes  "GIF"
  3      3 bytes  "87a" or "89a"
  6      2 bytes  <Logical Screen Width>
  8      2 bytes  <Logical Screen Height>

First %01%00 is width = 0x0001

note that 1px is %01%00 equals to 0x0001

not %00%01 otherwise it will be 0x0100

Second is height, same as above

next 3 bytes you can input anything, browser can parse it

e.g. /// or !!! or ,,, or ;;; or +++

last one byte must be: ; , !

by the way, if you use /// or \\\ at the 3 bytes next to size

page title will display last character, otherwise will show gif,...

tested with Chrome, Firefox both worked, IE does not works

Answer 9

http://www.maproom.co.uk/0.gif Is 43 bytes, shaves a little bit.

Answer 10

You shouldn't really use "spacer gifs". They were used in the 90s; now they are very outdated and they have no purpose whatsoever, and they cause several accessibility and compatibility problems.

Use CSS.

Answer 11

I remember once, a long time ago, I tried to create the smallest gif possible. If you follow the standard, If I remember correctly, the size is 32 bytes. But you can "hack" the specification and have a 26-28 byte, that will show in most browsers. This GIF is not entirely "correct" but works, sometime. Just use a GIF header specification and a HEX editor.