Smallest data URI image possible for a transparent image

Question

After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img> and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image, then this is impossible. For some reason, some GIFs such as the following prevent CSS backgrounds (in some browsers).

Shorter (but unstable - 74 bytes)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

I would advise using the slightly longer and more stable version as follows:

⇊ Stable ⇊ (but slightly longer - 78 bytes)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

---

As another tip, don't omit image/gif as one comment suggests. This will break in several browsers.

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

The final length depends on what it's gzipped with.

Smallest PNG - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

I think it must be a compressed transparent 1x1 GIF file (82 bytes):

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

Generated with dopiaza.org data:URI generator.

This guy breaks down the problem via the GIF spec. His solution for the transparent.gif would be 37 bytes:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

He goes even smaller by first removing the transparency, then the color table...

---

GIF89a specification

• Header (6 bytes)

  Consists of the bytes “GIF” and the version number, which is usually 89a.

• Logical Screen Descriptor (7 bytes)

  Without going into too much detail, this section of the file indicates the following:

  • The file is 1x1 pixels in size.
  • There is a global color table.
  • There are 2 colors in the global color table, the second one should be used as the background color.

• Global Color Table (6 bytes)

  Consists of 3 bytes per color, a byte for red, green, and blue, respectively. In our file, the first color is white an the second color is black.

• Graphic Control Extension (8 bytes)

  Used to indicate that the second color in the color table should be treated as transparent (can also be used for animation parameters, but isn’t in this file).

• Image Descriptor (10 bytes)

  A GIF file can actually contain multiple “images” within it, which keeps you from having to specify image data for parts of the image which have the same color as the background color. Each image block has a position and size within the overall image size. In the above file, the position is 0,0 and the size is 1x1.

• Image Data (5 bytes)

  One LZW-encoded block of image data. It takes 5 bytes to represent the single pixel the image has in it. The compression algorithm wasn’t designed to compress a single byte very well.

• GIF Trailer (1 byte)

  A single byte with a hex value of 3B (; in ASCII) indicates the end of the GIF.

Based on the required structures for a transparent GIF, it turns out that 43 bytes is pretty close to as small as you can get.

But, I managed to figure out one trick to make it a bit smaller. It’s mentioned in the standard that it is optional to have a global color table. Of course, it’s undefined as to what happens when you make a GIF without a color table at all.

When you have a color table index defined as transparent, however, GIF decoders don’t seem to care that there isn’t actually a color table.

So I changed the logical screen descriptor to indicate there was no global color table and removed the table itself, saving a total of six bytes, bringing the file size down to a mere 37 bytes.

Interestingly enough, Wordpress gave me a lovely list of error messages of GD complaining that this isn’t a valid GIF file, despite the fact that Firefox and the GIMP both open and display (is it “displayed” when it’s transparent?) the file just fine.

To make it even smaller, I looked to the biggest remaining “optional” block in the image, the graphic control extension. If you don’t need transparency, this block is no longer needed, and that’s another 8 bytes you can take away.

Source: The Tiniest GIF Ever.