smallest filesize for transparent single pixel ima

问题:

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.

回答1:

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

回答2:

Here is a 32 byte transparent GIF that (should) work everywhere

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=

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

Explanation

Achieving the smallest possible GIF depends on the implementation of the GIF spec being used. Web browsers are usually lenient when it comes to decoding GIF files. You may find a really small GIF that works as transparent in one browser but white/black in another. And it might not even open in software like Gimp, Paint and Photoshop.

The smallest near-valid transparent GIF is 32 bytes. “Near-valid”, because the trailer and some of the LZW data can be discarded, and it will still open in practically all software.

This is done by following the GIF spec, and each component can be broken down as follows:

1. File signature/version, 6 bytes
2. Logical Screen Descriptor, 7 bytes
3. Optional: Global Color Table, 6 bytes¹
4. Optional: Graphics Control Extension, 8 bytes²
5. Image Descriptor, 10 bytes
6. LZW Data, 1-4 bytes³
7. Optional: Trailer (0x3B), 1 byte⁴

¹ The Global Color Table can be removed safely by disabling it in the Logical Screen Descriptor
² This is required for transparency in most software
³ Only 3 bytes of the LZW data are required and the bytes can be almost anything. Though only the first byte of 0x02 is strictly required.
⁴ Trailer can be removed without ill effects.

Most GIF software require a Global/Local Color Table to be present. Further reductions (e.g. deleting Global Color Table) may work in some browsers, but their effects are usually implementation-specific. Edit: There is a flag to disable the Global Color Table, and it doesn't seem to cause any problems.

Other Examples:

The following 24 bytes is rendered as a transparent GIF in Chrome, however it is opaque white in Firefox:

47 49 46 38 39 61 01 00 01 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

The following 14 bytes used to work in Chrome only, but not anymore:

47 49 46 38 39 61 01 00 01 00 00 00 00 2C

data:image/gif;base64,R0lGODlhAQABAAAAACw=

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

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

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

回答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

回答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.

回答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

回答9:

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

回答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.

回答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.