Imagen de URI de datos más pequeña posible para una imagen transparente

Estoy usando una imagen transparente de 1x1 con una imagen de fondo, para poder usar sprites y aún así proporcionar texto alternativo para algunos iconos.

Quiero usar un URI de datos para la imagen para reducir el número de solicitudes HTTP, pero ¿cuál sería la cadena más pequeña posible para producir una imagen transparente ?

Me doy cuenta de que podría usar URI: s de datos para las imágenes reales en lugar de sprites, pero es más fácil de mantener cuando todo se mantiene en el CSS en lugar de dispersarse.

Después de jugar con diferentes GIF transparentes, algunos son inestables y causan fallas en CSS. Por ejemplo, si tiene un <img>y usa el GIF transparente más pequeño posible, funciona bien, sin embargo, si quiere que su GIF transparente tenga un background-image, entonces esto es imposible. Por alguna razón, algunos GIF como los siguientes evitan los fondos CSS (en algunos navegadores).

Más corto (pero inestable - 74 bytes)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Aconsejaría usar la versión un poco más larga y estable de la siguiente manera:

⇊ Estable ⇊ (pero un poco más largo - 78 bytes)

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

Como otro consejo, no omita image/gifcomo sugiere un comentario. Esto se romperá en varios navegadores.

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

La longitud final depende de con qué está comprimida.

Creo que debe ser un archivo GIF transparente comprimido 1x1 (82 bytes):

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

Generado con datos de dopiaza.org: generador de URI .

PNG más pequeño - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Este chico analiza el problema a través de la especificación GIF. Su solución para el transparent.gifsería de 37 bytes:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Se vuelve aún más pequeño al eliminar primero la transparencia, luego la tabla de colores ...

Especificación GIF89a

• Encabezado (6 bytes)

  Consiste en los bytes "GIF" y el número de versión, que suele ser 89a.

• Descriptor de pantalla lógica (7 bytes)

  Sin entrar en demasiados detalles, esta sección del archivo indica lo siguiente:

  • El archivo tiene un tamaño de 1x1 píxeles.
  • Hay una tabla de colores global.
  • Hay 2 colores en la tabla de colores global, el segundo debe usarse como color de fondo.

• Tabla global de colores (6 bytes)

  Consta de 3 bytes por color, un byte para rojo, verde y azul, respectivamente. En nuestro archivo, el primer color es blanco y el segundo color es negro.

• Extensión de control gráfico (8 bytes)

  Se usa para indicar que el segundo color en la tabla de colores debe tratarse como transparente (también se puede usar para parámetros de animación, pero no está en este archivo).

• Descriptor de imagen (10 bytes)

  Un archivo GIF puede contener múltiples "imágenes" dentro de él, lo que evita que tenga que especificar datos de imagen para partes de la imagen que tienen el mismo color que el color de fondo. Cada bloque de imagen tiene una posición y un tamaño dentro del tamaño general de la imagen. En el archivo anterior, la posición es 0,0 y el tamaño es 1x1.

• Datos de imagen (5 bytes)

  Un bloque de datos de imagen codificado con LZW . Se necesitan 5 bytes para representar el único píxel que tiene la imagen. El algoritmo de compresión no fue diseñado para comprimir un solo byte muy bien.

• Tráiler GIF (1 byte)

  Un solo byte con un valor hexadecimal de 3B( ;en ASCII) indica el final del GIF.

Basado en las estructuras requeridas para un GIF transparente, resulta que 43 bytes es lo más pequeño posible.

Pero logré encontrar un truco para hacerlo un poco más pequeño. En el estándar se menciona que es opcional tener una tabla de colores global. Por supuesto, no está definido qué sucede cuando haces un GIF sin una tabla de colores.

Sin embargo, cuando tiene un índice de tabla de colores definido como transparente, a los decodificadores GIF no parece importarles que en realidad no haya una tabla de colores.

Así que cambié el descriptor de pantalla lógica para indicar que no había una tabla de colores global y eliminé la tabla misma, ahorrando un total de seis bytes, reduciendo el tamaño del archivo a solo 37 bytes.

Curiosamente, Wordpress me dio una hermosa lista de mensajes de error de GD quejándose de que este no es un archivo GIF válido, a pesar de que Firefox y GIMP abren y muestran (¿se "muestra" cuando es transparente?) muy bien

Para hacerlo aún más pequeño, busqué el bloque "opcional" restante más grande de la imagen, la extensión de control gráfico. Si no necesita transparencia, este bloque ya no es necesario, y esos son otros 8 bytes que puede quitar.

Fuente: El GIF más pequeño de todos .

Puede probar los siguientes datos SVG (60 bytes):

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

El archivo svg independiente se vería así (62 bytes):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

Ver también:

• Optimización de SVG en URI de datos
• Codificador de URL para SVG ( GitHub ) / SVG CSS URI - Reemplazo optimizado

Este es el más pequeño que encontré (26 bytes):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

Estoy usando los siguientes datos uri para obtener una imagen vacía: //:0

Para imagen vacía:

data:null

(se traducirá a src=(unknown))