transparencia - tamaño de archivo más pequeño para imagen de píxel transparente

formatos que permiten el manejo de transparencia (11)

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

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

De acuerdo con la especificación del 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 ancho = 0x0001

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

no %00%01 contrario, será 0x0100

El segundo es la altura, igual que arriba

Los siguientes 3 bytes puede ingresar cualquier cosa, el navegador puede analizarlo

ej. /// o !!! o ,,, o ;;; o +++

el último byte debe ser ; , !

por cierto, si usas /// o /// en los 3 bytes al lado del tamaño

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

probado con Chrome, Firefox funcionó, IE no funciona

Estoy buscando la imagen transparente de 1 píxel más pequeña (en términos de tamaño de archivo).

Actualmente tengo un gif de 49 bytes que parece ser el más popular.

Pero recuerdo hace muchos años que tenía uno que era menos de 40 bytes. Podría haber sido 32 bytes.

¿Alguien puede hacerlo mejor? El formato de gráficos no es una preocupación, siempre y cuando los navegadores web modernos puedan mostrarlo y respetar la transparencia.

ACTUALIZACIÓN : OK, he encontrado un gif transparente de 42 bytes de un solo píxel: http://bignosebird.com/docs/h3.shtml

ACTUALIZACIÓN2 : Parece que cualquier cantidad inferior a 43 bytes puede ser inestable en algunos clientes. No puede estar teniendo eso.

Esto es lo que uso en una matriz de bytes 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 puede ser devuelto así

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

Para expandir la respuesta de la matriz de bytes de Jacob, generé la matriz de byte c # para un gif transparente 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};

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 colores (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 primeros dos que encontré hace algún tiempo (en los tiempos de la vulnerabilidad timthumb) y no recuerdo las fuentes. El último que encontré probablyprogramming.com/2009/03/15/the-tiniest-gif-ever .

PD: se usa con fines de seguimiento, no como espaciadores.

Realmente no deberías usar "spacer gifs". Fueron utilizados en los años 90; ahora están muy desactualizados y no tienen ningún propósito en absoluto, y causan varios problemas de accesibilidad y compatibilidad.

Use CSS

Recuerdo una vez, hace mucho tiempo, intenté crear el gif más pequeño posible. Si sigues el estándar, si mal no recuerdo, el tamaño es de 32 bytes. Pero puede "piratear" la especificación y tener un byte de 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. Solo use una especificación de encabezado GIF y un editor HEX.

blank.gif este archivo en blank.gif (43 bytes). Menos de 49: D

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

En formato base64 listo para css:

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==

http://www.maproom.co.uk/0.gif Tiene 43 bytes, se afeita un poco.

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 utiliza. Los navegadores web suelen ser indulgentes cuando se trata de decodificar archivos GIF. Puede encontrar un GIF realmente 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 GIF transparente más pequeño y casi válido es de 32 bytes. "Near-valid", porque el trailer y algunos de los datos de LZW pueden descartarse, y aún funcionará en prácticamente todo el software.

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

Firma / versión de archivo, 6 bytes
Descriptor de pantalla lógica , 7 bytes
Opcional: Tabla de colores globales , 6 bytes¹
Opcional: Extensión de control de gráficos , 8 bytes²
Descriptor de imagen , 10 bytes
Datos LZW , 1-4 bytes³
Opcional: Remolque ( 0x3B ), 1 byte⁴

¹ La tabla de colores global se puede eliminar de forma segura inhabilitándola en el Descriptor de pantalla lógica
² Esto es necesario para la transparencia en la mayoría del software
³ 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 .
⁴ El remolque se puede quitar sin efectos nocivos.

La mayoría del software GIF requiere una tabla de colores global / local para estar presente. Más reducciones (por ejemplo, eliminación de la tabla global de colores) 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 colores global, y no parece causar ningún problema.

Otros ejemplos:

Los siguientes 24 bytes se representan como un GIF transparente en Chrome, sin embargo, es 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=

Ver: 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 staff 45B Apr 3 10:21 tiny.gif