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.

Convolution

I think you have a little too much time on your hands. This will make no practical difference whatsoever... – A

If you serve a thousand of these per page you're hitting 49 kilobytes. How many of these could you possibly be serving? – Goines

Dested: You have much more than 49 kB, because the HTTP headers are actually larger than the image :) – Wheeled

The request will cause way more data then the image size, the image size is non-relevant compared to the request size. – Saleem

@Dested: must also consider the minimal packet size .. (and the smallest disk sector) – Longheaded

When talking about request/header sizes, make sure you serve it using the relative url /0.gif. Putting it inside "/Images/" makes it more expensive – Saleem

@Dested, if you have thousand of the same image on a page, they'll be fetched as a single request, and most likely be cached for successive pages – Saleem

The "as modern web browsers can display it" part comes a bit late in the request... Could have been a TGA or Tiff format, after all. – Patroon

All these comments about request size/headers etc are irrelevant if we use a data uri. In that case we simply want the shortest uri. – Privity

Possible duplicate of Smallest data URI image possible for a transparent image – Epiphragm

I’m voting to close this question because it is not really about programming – Threshold

Answer 1

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

Hellkite

Seems like Blank.gif is not transparent. You can use this (rember to remove space after "/"): data:image/gif;base64,R0lGODlhAQABAID/ AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw== – Salesperson

data strings won't work for caching proxies like polipo, so if you're in this situation you can grab a 43-byte transparent gif here: probablyprogramming.com/2009/03/15/the-tiniest-gif-ever – Neocolonialism

Answer 2

First of all, with modern CSS there is little 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. I wrote this answer just to learn more about GIFs. 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.

By following the official GIF spec, we actually come up with a figure of 43 bytes, broken down into 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. In theory 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.

Supportive

Unfortunately, the 32-byte GIF is black in IE8 :( – Overbold

Awesome answer! Just mentioning that the first example is actually 24 bytes, not 23. – Reciprocate

The 32 byte GIF seems to be corrupted for latest Safari as well – Haunt

@NgSekLong Does R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIA (+1 byte) or R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIAOw== (+2 bytes) work? Strange because 32B version should work everywhere, Safari should fix. – Supportive

I just returned the borrowed Mac Workstation so I cannot test other version, but just now my testing shows that latest Safari failed to load the 32 byte image ( shows a question mark image ) . If I can get my hand on it again I will double check again, thanks. – Haunt

@NgSekLong i solved the mystery, extra byte equaling 0 is necessary in Safari only. – Supportive

@Supportive Thanks for the update! When I get around to trying it out I will update it here :) – Haunt

@Overbold I fixed IE8 along with Safari 15 which became even more strict! – Supportive

Answer 3

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");

Nano

Yes, thats the idea. How many bytes do you have? Sorry, I'm to lazy to count right now :) – Convolution

35 bytes so I'm guessing this is not transparent – Salesperson

@Salesperson no it's not transparent. It is white (FFFFFF). Perfect for my uses though. – Consist

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};

Kazimir

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==

Paraclete

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

Nacred

Copy and paste didn't work for me (identify: Corrupt image). Probably your formatting...? Also the code comment says 35/43 bytes but your output says 45 bytes. – Convolution

Google's _utm.gif doesn't appear to be transparent. – Girdle

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.

Unconditioned

I'm assuming that these are all GIF's? – Shive

Yes, of course. Notice the GIF file signature (47 49 46 = GIF). – Unconditioned

That's great for those people that know the GIF signature. However, lots of people are on here that are looking for things without a background in image file formats so it is good to specifically point it out. :-) – Shive

Well then for future reference I'd submit this link: en.wikipedia.org/wiki/… Generally, GIF format is well documented. – Unconditioned

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

Ferret

Simply not valid. Doesn't render properly in any browser I tested. – Supportive

Answer 9

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

Goines

Don't forget the few bytes you shave off the headers too because the filename is slightly shorter :-) – Saleem

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.

Solutrean

I suppose this is still used as tracking images (to track for example how much html emails are 'opened'). Very doubtful use though... – A

@A - and blocked (for many years now) by default in all sensible email clients, so basically pointless even for that dubious use. – Pero

It is useful for easy jail-break of the same-domain policy for such purposes as event tracking or logging. Much elegant than iframe-based methods. – Blakeney

@Villiam: for that a no content CSS is much better – Solutrean

Not sure why it was -1, I +1 this answer to restore the balance... Andreas is right; spacer images are so outdated. The comments above can be right, but outside of the scope of the answer, they talk about trackers, not spacers. And a tracker doesn't need to be transparent, anyway. – Patroon

This should be a comment and not a reply – Ushas

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.

Chiekochien