smallest filesize for transparent single pixel image

zaf picture zaf · Apr 3, 2010 · Viewed 24.7k times · Source

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

bryc picture bryc · Apr 12, 2013

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

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIA

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 00

This used to be 32 bytes, but it turns out that an extra 0x00 byte is required for Safari on MacOS, due to it strictly requiring a Block Terminator in the LZW data.

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 2 or 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. A terminating byte of 0x00 may be required in some cases (Safari).
⁴ 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:

Valid examples must open in all applications that support GIF (Paint, Photoshop, Gimp) as well as browsers.

The following 30 bytes should be opaque white in all cases, but is transparent in Chrome(?likely a bug in Chrome?):

47 49 46 38 37 61 01 00 01 00 80 01 00 FF FF FF 00 
00 00 2C 00 00 00 00 01 00 01 00 00 02

data:image/gif;base64,R0lGODdhAQABAIABAP///wAAACwAAAAAAQABAAAC

The following 33 bytes is opaque white in all cases (3 extra LZW bytes):

47 49 46 38 37 61 01 00 01 00 80 01 00 FF FF FF 00
00 00 2C 00 00 00 00 01 00 01 00 00 02 02 44 01

data:image/gif;base64,R0lGODdhAQABAIABAP///wAAACwAAAAAAQABAAACAkQB

The following 24 bytes render as a transparent GIF in Chrome, white in Firefox, and black in Photoshop/Paint/Gimp (valid GIF, but lacks color information--unpredictable):

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,R0lGODlhAQABAAAAACwAAAAAAQABAAAC