Decodificador de Imagens Base64 | Decodificar e Visualizar Imagens Online

O que é um decodificador de imagem em base64?

Um decodificador de imagem em base64 é uma ferramenta que transforma uma cadeia de texto codificada em base64 de volta em uma imagem. Base64 é uma forma de escrever dados binários, como os bytes de um arquivo de imagem, usando apenas 64 caracteres de texto simples (letras, dígitos, +, / e = para preenchimento). Navegadores, e-mails e muitas APIs guardam imagens assim para que uma figura possa viajar dentro de texto simples, em vez de ser um arquivo separado. O decodificador faz o caminho inverso: cole a cadeia e a imagem original aparece.

O formato de URL de dados

Na web, uma imagem em base64 costuma ser escrita como uma URL de dados. O esquema de URL data: foi definido em 1998. O padrão é:

Por exemplo:

Cada parte tem uma função:

• data: indica que é uma URL de dados, e não um endereço web comum.
• image/png é o tipo MIME, que informa ao navegador de que tipo de arquivo se trata.
• ;base64 indica que os dados depois da vírgula estão codificados em base64. É opcional. Sem ele, os dados são texto simples ou codificado com porcentagem.
• Tudo o que vem depois da vírgula é a própria imagem codificada.

Como o decodificador funciona

A decodificação acontece em quatro etapas.

1. A ferramenta verifica se a cadeia começa com data:. Se começar, lê o tipo MIME a partir desse prefixo.
2. Ela remove espaços, tabulações e quebras de linha, já que cadeias longas em base64 às vezes são divididas em várias linhas. Isso segue a regra de decodificação base64 tolerante usada pelos navegadores, cuja primeira etapa é remover todos os espaços em branco.
3. Ela decodifica o texto base64 de volta para bytes brutos.
4. Ela examina os primeiros bytes do resultado. Todo formato de imagem comum começa com uma sequência fixa de bytes, chamada assinatura ou "número mágico". Os arquivos PNG começam com 89 50 4E 47, os JPEG começam com FF D8 FF e assim por diante. O decodificador usa a tabela de assinaturas de imagem do WHATWG MIME Sniffing Standard. Ele compara essas assinaturas para confirmar o tipo da imagem e, se necessário, corrigi-lo.

Uma URL data: cujo tipo não seja image/... é rejeitada por não ser uma imagem. Uma URL data:image/... sem ;base64 é repassada ao navegador sem alterações.

Se a cadeia não tiver o prefixo data:, o decodificador a trata como dados base64 brutos, decodifica e lê a assinatura da mesma forma. Se os bytes não corresponderem a nenhuma assinatura de imagem conhecida e não parecerem texto SVG, o decodificador informa que a cadeia não parece ser uma imagem. Ele não adivinha um formato nem recorre a um tipo padrão.

O SVG é tratado de forma diferente porque é um formato de texto (XML), e não binário, e por isso não tem assinatura de bytes fixa. Em vez disso, o decodificador verifica se o texto decodificado começa com uma tag <svg ou com uma declaração XML que a contenha.

Fórmula do tamanho de uma imagem em base64

O base64 transforma cada 3 bytes de dados binários em 4 caracteres de texto. A fórmula do comprimento codificado é:

Os símbolos ⌈ ⌉ significam "arredondar para o próximo número inteiro", porque o base64 sempre trabalha em grupos de 4 caracteres e completa um grupo restante com sinais =.

Em arquivos grandes, o resultado fica cerca de um terço maior que o original, pois 4 ÷ 3 ≈ 1,33. Arquivos pequenos podem mostrar um aumento percentual maior, porque o arredondamento para o próximo grupo de 4 caracteres pesa mais quando há poucos dados.

Exemplo prático

O exemplo de PNG acima se decodifica em 85 bytes de dados de imagem. Usando a fórmula:

De fato, a cadeia base64 tem 116 caracteres, o que confere. Isso é um aumento de 36% sobre os 85 bytes originais (116 ÷ 85 ≈ 1,36), um pouco acima dos 33% porque o arquivo é muito pequeno.

Formatos de imagem compatíveis

O decodificador lê a assinatura de bytes dos dados decodificados para identificar o formato. Ele reconhece estes tipos:

Como decodificar uma imagem em base64

1. Copie a cadeia base64, com ou sem o prefixo data:image/..., de HTML, CSS, uma resposta de API ou um e-mail.
2. Cole-a na caixa de entrada.
3. A imagem é decodificada automaticamente um instante depois que a digitação para, ou ao se pressionar o botão de decodificar.
4. A imagem decodificada aparece na área de visualização. Sua URL de dados pode ser copiada com o botão "Copiar URL da imagem", e a própria imagem pode ser salva clicando nela com o botão direito na visualização e escolhendo salvar a imagem, já que ela é exibida como um elemento de imagem normal no navegador.

Usos comuns de imagens em base64

• Incorporação em HTML, CSS ou JavaScript: colocar os dados da imagem diretamente no código evita uma requisição de arquivo separada.
• Modelos de e-mail: alguns clientes de e-mail bloqueiam por padrão imagens vinculadas externamente, mas uma imagem base64 incorporada continua aparecendo.
• Ferramentas HTML de arquivo único: uma página inteira, com suas imagens, pode ser distribuída como um único arquivo autossuficiente.
• Respostas de API: uma imagem pode viajar dentro de uma carga JSON, sem precisar de um endpoint próprio.
• Planos de fundo e ícones em CSS: ícones pequenos às vezes são escritos diretamente em uma folha de estilo como URL de dados.

Vantagens e desvantagens das imagens em base64

A codificação base64 é prática, mas tem custo:

• O texto codificado é cerca de um terço maior que o arquivo original.
• Os navegadores não conseguem manter em cache uma imagem incorporada como fazem com um arquivo vinculado, por isso ela é baixada de novo toda vez que a página ou a folha de estilo ao redor é baixada.
• O navegador precisa decodificar o texto base64 antes de exibir a imagem, o que exige um pequeno processamento extra.
• Por causa do aumento de tamanho e da perda de cache, a incorporação em base64 funciona melhor com imagens pequenas, como ícones ou logotipos simples. Fotos maiores costumam ser mais bem servidas como arquivos de imagem comuns.

Perguntas frequentes

O que é um decodificador de imagem em base64?

É uma ferramenta que converte uma cadeia de texto codificada em base64 de volta em uma imagem visualizável, como um arquivo PNG, JPEG, GIF, WebP, BMP ou SVG.

Como decodificar uma imagem em base64?

Cole a cadeia base64, com ou sem o prefixo data:image/..., no decodificador. Ele lerá a cadeia, a decodificará e mostrará a imagem resultante.

É possível decodificar uma cadeia base64 sem o prefixo da URL de dados?

Sim. O decodificador trata a cadeia como dados base64 brutos, decodifica os bytes e lê os primeiros bytes para identificar o formato pela assinatura, como PNG, JPEG, GIF, WebP, BMP ou ICO. O SVG é identificado procurando uma tag <svg no texto decodificado. Se nada disso corresponder, o decodificador informa que a cadeia não parece ser uma imagem, em vez de adivinhar um formato.

Por que minha imagem em base64 não é decodificada?

As causas mais comuns são uma cadeia cortada no meio ou caracteres extras que não fazem parte do alfabeto base64. A variante segura para URL, que usa - e _ no lugar de + e /, também é rejeitada. A falta do preenchimento = no final geralmente não é um problema. Copiar a cadeia inteira, incluindo o prefixo data:image/... se houver, costuma resolver.

A codificação base64 é uma forma de segurança ou criptografia?

Não. O base64 é apenas uma maneira de representar bytes como texto; ele não esconde nada. Qualquer pessoa pode decodificar uma cadeia base64 em segundos com uma ferramenta gratuita, por isso ele nunca deve ser usado para proteger imagens privadas ou outros dados.

Quanto maior é uma cadeia base64 em relação à imagem original?

Cerca de um terço maior em arquivos grandes, pois cada 3 bytes dos dados originais viram 4 caracteres de texto. Uma imagem de 100 KB passa a ter cerca de 133 KB depois de codificada. Imagens pequenas podem mostrar um aumento percentual um pouco maior por causa do arredondamento.

História

O base64 surgiu do e-mail, que antigamente transportava apenas texto simples. Uma especificação de correio com privacidade aprimorada de 1987 descreveu a transformação de cada 3 bytes em 4 caracteres imprimíveis de um conjunto de 64 caracteres. O esquema de URL data: de 1998 tornou possível, mais tarde, incorporar imagens base64 diretamente em páginas web. A definição atual do base64 é a RFC 4648 (2006).

Referências

1. IETF. RFC 4648: The Base16, Base32, and Base64 Data Encodings. RFC 4648 — 3 bytes viram 4 caracteres; preenchimento com =.
2. IETF. RFC 2397: The "data" URL scheme. RFC 2397 — sintaxe da URL de dados; ;base64 é opcional; publicada em 1998.
3. WHATWG. Infra Standard. Decodificação base64 tolerante — remoção de espaços em branco; tratamento do preenchimento.
4. WHATWG. MIME Sniffing Standard. Correspondência de padrão de tipo de imagem — assinaturas de bytes de imagens.
5. MDN Web Docs. Base64. Entrada do glossário sobre Base64 — a saída codificada é cerca de um terço maior.
6. IETF. RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I. RFC 989 — codificação de e-mail de 1987 de 3 bytes em 4 caracteres imprimíveis.