Menor imagem de URI de dados possível para uma imagem transparente

Estou usando uma imagem transparente de 1x1 com uma imagem de fundo, para poder usar sprites e ainda fornecer texto alternativo para alguns ícones.

Desejo usar um URI de dados para a imagem para reduzir o número de solicitações HTTP, mas qual seria a menor string possível para produzir uma imagem transparente ?

Sei que poderia usar dados URI: s para as imagens reais em vez de sprites, mas é mais fácil manter quando tudo é mantido no CSS em vez de espalhado.

Depois de brincar com diferentes GIFs transparentes, alguns são instáveis ​​e causam falhas de CSS. Por exemplo, se você possui um <img>e usa o menor GIF transparente possível, ele funciona bem; no entanto, se você deseja que seu GIF transparente tenha um background-image, isso é impossível. Por alguma razão, alguns GIFs, como os seguintes, impedem os fundos CSS (em alguns navegadores).

Mais curto (mas instável - 74 bytes)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Eu recomendaria usar a versão um pouco mais longa e mais estável da seguinte maneira:

⇊ Estável ⇊ (mas um pouco mais longo - 78 bytes)

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

Como outra dica, não omita image/gifcomo sugere um comentário. Isso quebrará em vários navegadores.

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

O comprimento final depende do que foi compactado.

Eu acho que deve ser um arquivo GIF 1x1 transparente compactado (82 bytes):

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

Gerado com dados dopiaza.org: gerador de URI .

PNG menor - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Esse cara detalha o problema por meio da especificação do GIF. Sua solução para o transparent.gifseria 37 bytes:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Ele fica ainda menor removendo primeiro a transparência e depois a tabela de cores ...

Especificação GIF89a

• Cabeçalho (6 bytes)

  Consiste nos bytes "GIF" e no número da versão, normalmente 89a.

• Descritor de tela lógica (7 bytes)

  Sem entrar em muitos detalhes, esta seção do arquivo indica o seguinte:

  • O arquivo tem tamanho de 1x1 pixels.
  • Existe uma tabela de cores global.
  • Existem 2 cores na tabela de cores global; a segunda deve ser usada como cor de fundo.

• Tabela de cores global (6 bytes)

  Consiste em 3 bytes por cor, um byte para vermelho, verde e azul, respectivamente. Em nosso arquivo, a primeira cor é branca e a segunda cor é preta.

• Extensão de controle gráfico (8 bytes)

  Usado para indicar que a segunda cor na tabela de cores deve ser tratada como transparente (também pode ser usada para parâmetros de animação, mas não está neste arquivo).

• Descritor de Imagem (10 bytes)

  Na verdade, um arquivo GIF pode conter várias "imagens", o que impede que você precise especificar dados da imagem para partes da imagem com a mesma cor da cor de fundo. Cada bloco de imagem tem uma posição e tamanho dentro do tamanho geral da imagem. No arquivo acima, a posição é 0,0 e o tamanho é 1x1.

• Dados da imagem (5 bytes)

  Um bloco de dados de imagem codificado em LZW . São necessários 5 bytes para representar o pixel único que a imagem possui. O algoritmo de compactação não foi projetado para compactar um único byte muito bem.

• Trailer GIF (1 byte)

  Um byte único com um valor hexadecimal de 3B( ;em ASCII) indica o final do GIF.

Com base nas estruturas necessárias para um GIF transparente, verifica-se que 43 bytes são quase tão pequenos quanto você pode obter.

Mas consegui descobrir um truque para torná-lo um pouco menor. É mencionado no padrão que é opcional ter uma tabela de cores global. Obviamente, é indefinido o que acontece quando você cria um GIF sem uma tabela de cores.

Quando você tem um índice de tabela de cores definido como transparente, no entanto, os decodificadores de GIF parecem não se importar com a inexistência de uma tabela de cores.

Então, mudei o descritor de tela lógica para indicar que não havia tabela de cores global e removi a tabela em si, economizando um total de seis bytes, diminuindo o tamanho do arquivo para meros 37 bytes.

Curiosamente, o Wordpress me deu uma lista adorável de mensagens de erro do GD reclamando que este não é um arquivo GIF válido, apesar do fato de o Firefox e o GIMP serem abertos e exibidos (ele é "exibido" quando é transparente?) bem.

Para torná-lo ainda menor, procurei o maior bloco “opcional” restante da imagem, a extensão do controle gráfico. Se você não precisa de transparência, esse bloco não é mais necessário e outros 8 bytes podem ser removidos.

Fonte: O menor GIF de todos os tempos .

Você pode tentar os seguintes dados SVG (60 bytes):

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

O arquivo svg autônomo teria a aparência (62 bytes):

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

Veja também:

• Otimizando SVGs em URIs de dados
• Codificador de URL para URI SVG ( GitHub ) / CSS SVG - substituto otimizado

Este é o menor que encontrei (26 bytes):

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

Estou usando os seguintes dados uri para obter uma imagem vazia: //:0

Para imagem vazia:

data:null

(será traduzido para src=(unknown))