tamaño de archivo más pequeño para una imagen transparente de un solo píxel

Aquí hay un GIF transparente de 32 bytes que (debería) funcionar en todas partes

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

Explicación

Lograr el GIF más pequeño posible depende de la implementación de la especificación GIF que se esté utilizando. Los navegadores web suelen ser indulgentes cuando se trata de decodificar archivos GIF. Puedes encontrar un GIF muy pequeño que funciona como transparente en un navegador pero blanco/negro en otro. Y puede que ni siquiera se abra en software como Gimp, Paint y Photoshop.

El más pequeño casi válido GIF transparente es de 32 bytes. "Casi válido", porque el remolque y algunos de los datos de LZW se pueden descartar, y todavía se abrirá en prácticamente todo el software.

Esto se hace siguiendo la especificación GIF , y cada componente se puede desglosar de la siguiente manera:

1. Firma/versión del archivo, 6 bytes
2. Descriptor lógico de pantalla , 7 bytes
3. Opcional: Tabla de color global , 6 bytes1
4. Opcional: Extensión de control de gráficos , 8 bytes2
5. Descriptor de imagen , 10 bytes
6. Datos LZW , 1-4 bytes3
7. Opcional: Remolque (0x3B), 1 byte {

1 La Tabla de Color Global se puede eliminar de forma segura deshabilitándola en el Descriptor de Pantalla lógica
2 Esto es necesario para la transparencia en la mayoría de los programas
3 Solo se requieren 3 bytes de los datos LZW y los bytes pueden ser casi cualquier cosa. Aunque solo se requiere estrictamente el primer byte de 0x02.
Trailer Remolque se puede quitar sin efectos nocivos.

La mayoría del software GIF requiere una Tabla de Colores Global/Local para estar presente. Otras reducciones (por ejemplo, eliminar la Tabla de color Global) pueden funcionar en algunos navegadores, pero sus efectos suelen ser específicos de la implementación. Editar: Hay una bandera para deshabilitar la Tabla de Color Global, y no parece causar ningún problema.

Otros ejemplos:

Las los siguientes 24 bytes se representan como un GIF transparente en Chrome, sin embargo, es de color blanco opaco en 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=

Los siguientes 14 bytes solían funcionar solo en Chrome, pero ya no:

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

data:image/gif;base64,R0lGODlhAQABAAAAACw=

Esto es lo que uso en una matriz de bytes de C# (evita el acceso a archivos)

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

En asp.net MVC esto se puede devolver así

return File(TrackingGif, "image/gif");

Para ampliar la respuesta de la matriz de bytes de Jacob, generé la matriz de bytes de c# para un gif de transparant 1x1 que hice en 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};

Http://polpo.org/blank.gif es un GIF transparente de 37 bytes hecho con gifsicle.

En formato css-ready base64:

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==

• Véase: http://www.google-analytics.com/__utm.gif , 35B

• Alternativa en 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;
  

Ejecutarlo ...

$ perl tinygif > tiny.gif
$ ll tiny.gif
-rw-r--r--  1 stackoverflow  staff    45B Apr  3 10:21 tiny.gif

Punto transparente, 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";

Punto naranja, 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";

Sin tabla de color (posiblemente pintada de negro), 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";

Los dos primeros los encontré hace algún tiempo (en los tiempos de la vulnerabilidad timthumb) y no recuerdo las fuentes. El último que encontré aquí.

P.D.: Uso con fines de seguimiento, no como espaciadores.

Creo que esto es más memorable 1x1 (38 bytes):

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

De acuerdo con la especificación de encabezado GIF:

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>

Primero %01%00 es width = 0x0001

Tenga en cuenta que 1px es %01%00 es igual a 0x0001

No %00%01 de lo contrario será 0x0100

La segunda es la altura, igual que la anterior

Los siguientes 3 bytes se puede introducir cualquier cosa, el navegador puede analizarlo

Por ejemplo /// o !!! o ,,, o ;;; o +++

El último byte debe ser: ; , !

Por cierto, si usa /// o \\\ en los 3 bytes junto al tamaño

El título de la página mostrará el último carácter, de lo contrario mostrará gif,...

Probado con Chrome, Firefox tanto funcionó, IE no funciona

Http://www.maproom.co.uk/0.gif Es de 43 bytes, se afeita un poco.

No deberías usar "gifs espaciadores". Se utilizaron en los años 90; ahora están muy anticuados y no tienen ningún propósito, y causan varios problemas de accesibilidad y compatibilidad.

Use CSS.

Recuerdo que una vez, hace mucho tiempo, intenté crear el gif más pequeño posible. Si sigues el estándar, si no recuerdo mal, el tamaño es de 32 bytes. Pero puede "hackear" la especificación y tener un byte 26-28, que se mostrará en la mayoría de los navegadores. Este GIF no es del todo "correcto", pero funciona, en algún momento. Simplemente use una especificación de encabezado GIF y un editor hexadecimal.