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

png to data

Question

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 íconos.

Quiero utilizar 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 de datos para las imágenes reales en lugar de sprites, pero es más fácil de mantener cuando todo se guarda en el CSS en lugar de estar disperso.

Answer 1

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

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

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

Answer 2

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

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

Answer 3

Estoy usando following uri de datos para obtener una imagen vacía: //:0

Answer 4

PNG más pequeño - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Answer 5

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 como (62 bytes):

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

Answer 6

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

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Se vuelve aún más pequeño al quitar 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 generalmente es 89a .

• Descriptor de pantalla lógica (7 bytes)

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

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

• Tabla de colores globales (6 bytes)

  Consiste en 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 se debe tratar 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 tener 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 tamaño dentro del tamaño total 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 LZW-encoded de datos de imagen. 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.

• GIF Trailer (1 byte)

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

En función de las estructuras necesarias para un GIF transparente, resulta que 43 bytes es lo más cercano posible.

Pero logré descubrir 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 se hace 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 no exista realmente una tabla de colores.

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

Curiosamente, Wordpress me dio una preciosa 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 se abren y muestran (¿se "muestra" cuando es transparente?) El archivo esta bien

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

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

Answer 7

Después de jugar con diferentes GIF transparentes, algunos son inestables y causan problemas técnicos de CSS. Por ejemplo, si tiene un <img> y utiliza el GIF transparente más pequeño posible, funciona bien, sin embargo, si luego quiere que su GIF transparente tenga una background-image , entonces esto es imposible. Por alguna razón, algunos GIF como los siguientes evitan 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 más estable de la siguiente manera:

⇊ estable ⇊ (pero un poco más larga - 78 bytes)

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

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

Answer 8

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

La duración final depende de con qué se gzipó.