Minimum file size for a transparent single pixel

I am looking for the smallest (in terms of dimension) 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 less than 40 bytes. Maybe 32 bytes.

Can anyone do better? The graphic format is not a concern if modern web browsers can display it and respect transparency.

UPDATE : I found a 42-byte transparent one pixel gif: http://bignosebird.com/docs/h3.shtml

UPDATE2 . It seems that on some clients less than 43 bytes may be unstable. It cannot be this.

+57
image transparency graphics filesize
Apr 03 '10 at 8:13
source share
11 answers

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

+16
Apr 03 '10 at 8:21
source share

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 

Description

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

The smallest almost acceptable transparent GIF is 32 bytes. "Near-valid" because the trailer and some LZW data can be dropped and will work in almost all programs.

This is done using the GIF specification , and each component can be broken down as follows:

  • File Signature / Version, 6 bytes
  • Logical screen descriptor, 7 bytes
  • Optional: global color table, 6 bytes and sup1;
  • Optional: graphic control extension, 8 bytes and sup2;
  • Image descriptor, 10 bytes
  • LZW data, 1-4 bytes and sup3;
  • Optional: trailer ( 0x3B ), 1 byte⁴

& AML1; The global color table can be deleted safely by disabling it in the Logical Screen Descriptor.
& Sup2; This is necessary for transparency in most & Sup3; Only 3 bytes of LZW data are required, and bytes can be almost any. Although only the first byte 0x02 strictly required.
⁴ The trailer can be removed without harmful consequences.

Most GIF programs require a global / local color table. Further reductions (such as deleting the Global Color Table) may work in some browsers, but their effects usually depend on the implementation. Edit: There is a flag to disable the global color table, and this does not seem to cause any problems.

Other examples:

The following 23 bytes are displayed as a transparent GIF in Chrome, however in Firefox it is opaque:

 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 are used only in Chrome, but no more:

 47 49 46 38 39 61 01 00 01 00 00 00 00 2C data:image/gif;base64,R0lGODlhAQABAAAAACw= 
+70
Apr 11 '13 at
source share

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 as

 return File(TrackingGif, "image/gif"); 
+24
Jun 04 '10 at
source share

To extend the response to the Jacob byte array, I generated a C # byte array for the transparent 1x1 gif, which I did 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}; 
+17
Dec 13 '11 at 10:54
source share

http://polpo.org/blank.gif is a 37 byte transparent GIF file created using gifsicle.

In css-ready base64 format:

 data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw== 
+14
Feb 01 '13 at 18:17
source share
  • See: http://www.google-analytics.com/__utm.gif , 35B

  • Alternative in Perl (45B):

     ## tinygif ## World 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
Apr 03 '10 at 8:24
source share

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 a color table (possibly painted 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 that I found some time ago (at the time of the timthumb vulnerability), and I do not remember the sources. The last thing I found here .

PS: Use for tracking, not as spacers.

+4
Dec 08 '12 at 23:26
source share

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

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

According to the specification of the GIF header:

 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 - width = 0x0001

note that 1px %01%00 is 0x0001

not %00%01 otherwise it will be 0x0100

The second is the height, the same as above

The next 3 bytes you can enter anything, the browser can parse it

eg. /// or !!! or ,,, or ;;; or +++

last byte should be ; !

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

the page title will display the last character, otherwise gif,... will be displayed gif,...

tested with Chrome, Firefox worked, IE does not work

+1
May 4 '15 at 10:04
source share

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

0
Apr 03 '10 at 8:16
source share

You should not use "spacer gifs". They were used in the 90s; they are now very outdated, and they have no purpose, and they cause several accessibility and compatibility issues.

Use CSS.

0
Apr 03 '10 at 8:27
source share

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

0
Apr 05 2018-10-10T00:
source share



All Articles