Decodificador de Imagens Base64 | Decodificar e Visualizar Imagens Online

O que é um decodificador de imagens base64?

Um decodificador de imagens base64 é uma ferramenta que transforma uma sequência 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 armazenam imagens dessa forma para que uma imagem possa viajar dentro de texto simples, em vez de como um arquivo separado. O decodificador reverte esse processo: basta colar a sequência para que a imagem original apareça.

O formato de URL de dados

Na web, uma imagem base64 normalmente é escrita como uma URL de dados. O padrão é:

Por exemplo:

Cada parte tem uma função:

• data: indica que se trata de uma URL de dados, não de um endereço web comum.
• image/png é o tipo MIME, que informa ao navegador que tipo de arquivo é esse.
• ;base64 informa que os dados depois da vírgula estão codificados em base64.
• Tudo 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 sequência começa com data:. Uma URL de dados que informa um tipo de mídia diferente de imagem, como data:text/plain, é rejeitada imediatamente, pois nunca poderá ser exibida como imagem.
2. Ela remove espaços, tabulações e quebras de linha, já que sequências base64 longas às vezes são divididas em várias linhas. Um conteúdo que use codificação percentual em vez de base64, também permitida pela RFC 2397, é mantido sem alterações.
3. Ela decodifica o texto base64 de volta aos 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”. Arquivos PNG começam com 89 50 4E 47, arquivos JPEG começam com FF D8 FF e assim por diante. O decodificador compara essas assinaturas e identifica a imagem com o tipo correspondente.

Os bytes prevalecem sobre o rótulo. Se uma URL de dados informa data:image/png, mas os bytes começam com FF D8 FF, o decodificador reconstrói a URL como data:image/jpeg. Assim, a sequência fornecida pelo botão “Copiar URL da imagem” nunca descreve incorretamente o próprio conteúdo.

Se a sequência não tiver o prefixo data:, o decodificador a trata como dados base64 brutos, decodifica seu conteúdo e lê a assinatura da mesma maneira. Se os bytes não corresponderem a nenhuma assinatura de imagem conhecida e também não se parecerem com texto SVG, o decodificador informa que a sequência não parece ser uma imagem. Ele não tenta adivinhar o formato nem usa um tipo padrão como alternativa.

O SVG é tratado de outra forma porque é um formato de texto (XML), não binário, e por isso não tem uma assinatura fixa de bytes. O decodificador verifica os primeiros 1.024 bytes do texto decodificado em busca de uma tag <svg, de uma declaração XML como <?xml version="1.0"?> seguida por essa tag, ou de uma declaração de tipo de documento SVG seguida por ela. Um marcador de ordem de bytes no início do conteúdo, que alguns editores adicionam a arquivos UTF-8, é ignorado. Como o SVG não pode ser identificado por uma assinatura de bytes, uma URL de dados que declara image/svg+xml mantém o tipo declarado.

Fórmula do tamanho de uma imagem base64

Base64 transforma cada 3 bytes de dados binários em 4 caracteres de texto. A fórmula para o tamanho codificado é:

Os símbolos ⌈ ⌉ significam “arredondar para cima até o próximo número inteiro”, pois base64 sempre trabalha com grupos de 4 caracteres e preenche um grupo incompleto com sinais =.

Para arquivos grandes, isso resulta em um aumento de tamanho de aproximadamente 33%, já que 4 ÷ 3 ≈ 1,33. Arquivos pequenos podem apresentar um aumento percentual maior, porque o arredondamento para o próximo grupo de 4 caracteres tem mais impacto quando há poucos dados.

Exemplo calculado

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

A sequência base64 tem, de fato, 116 caracteres, o que corresponde ao cálculo. Isso representa um aumento de 36% em relação aos 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 dos bytes dos dados decodificados para identificar o formato. Ele reconhece estes tipos:

Como decodificar uma imagem base64

1. Copie a sequência base64, com ou sem o prefixo data:image/..., de HTML, CSS, uma resposta de API ou um e-mail.
2. Cole a sequência na caixa de entrada.
3. A imagem é decodificada automaticamente instantes depois que a digitação termina ou quando o botão de decodificação é pressionado.
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 a opção de salvar a imagem, pois ela é renderizada como um elemento de imagem normal no navegador.

Usos comuns de imagens base64

• Incorporação em HTML, CSS ou JavaScript: inserir os dados da imagem diretamente no código evita uma solicitação de arquivo separada.
• Modelos de e-mail: alguns clientes de e-mail bloqueiam imagens vinculadas externamente por padrão, mas uma imagem base64 incorporada ainda é exibida.
• Ferramentas HTML de arquivo único: uma página inteira, incluindo suas imagens, pode ser distribuída como um único arquivo independente.
• Respostas de API: uma imagem pode viajar dentro de um conteúdo JSON, sem precisar de um endpoint próprio.
• Planos de fundo e ícones em CSS: ícones pequenos às vezes são inseridos diretamente em uma folha de estilos como uma URL de dados.

Compromissos das imagens base64

A codificação base64 é conveniente, mas tem custos:

• O texto codificado é aproximadamente um terço maior que o arquivo original.
• Os navegadores não conseguem armazenar uma imagem incorporada em cache da mesma forma que armazenam um arquivo vinculado. Por isso, ela é baixada novamente sempre que a página ou a folha de estilos que a contém é carregada.
• O navegador precisa decodificar o texto base64 antes de exibir a imagem, o que exige uma pequena quantidade adicional de processamento.
• Por causa do aumento de tamanho e da perda de cache, a incorporação em base64 é adequada para imagens pequenas, como ícones e logotipos simples. Fotos maiores geralmente funcionam melhor como arquivos de imagem comuns.

Perguntas frequentes

O que é um decodificador de imagens base64?

É uma ferramenta que converte uma sequência 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 base64?

Cole a sequência base64, com ou sem o prefixo data:image/..., no decodificador. Ele lerá a sequência, fará a decodificação e exibirá a imagem resultante.

É possível decodificar uma sequência base64 sem o prefixo da URL de dados?

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

Por que minha imagem base64 não é decodificada?

Três causas abrangem a maioria dos casos. A sequência pode conter caracteres fora do alfabeto base64 padrão, que é A–Z, a–z, 0–9, +, / e =; a variante base64url usada em alguns tokens da web escreve - e _ no lugar desses caracteres e não é aceita. A sequência pode ter sido cortada no meio, deixando um tamanho que é uma unidade maior que um múltiplo de quatro, algo que nenhuma sequência base64 válida apresenta. Ou os bytes podem simplesmente não corresponder a um dos formatos de imagem compatíveis. A ausência do preenchimento = por si só não é um problema, e espaços ou quebras de linha são removidos antes da decodificação.

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

Não. Base64 é apenas uma forma de representar bytes como texto; ela não oculta nada. Qualquer pessoa pode decodificar uma sequência base64 em poucos segundos usando uma ferramenta gratuita. Por isso, ela nunca deve ser usada para proteger imagens privadas ou outros dados.

Quanto uma sequência base64 é maior que a imagem original?

Cerca de um terço maior em arquivos grandes, pois cada 3 bytes dos dados originais se transformam em 4 caracteres de texto. Uma imagem de 100 KB se torna aproximadamente 133 KB depois da codificação. Imagens pequenas podem apresentar um aumento percentual um pouco maior por causa do arredondamento.

História

Base64 surgiu a partir de esquemas de codificação desenvolvidos nas décadas de 1970 e 1980 para enviar dados binários por sistemas de e-mail que lidavam apenas com texto simples. O uso foi formalizado para e-mail na RFC 989 (1987) e, posteriormente, na RFC 1421. A incorporação de imagens em páginas da web tornou-se possível quando o esquema de URL data: foi definido na RFC 2397 (1998). A prática se tornou mais comum em meados dos anos 2000, quando desenvolvedores procuravam reduzir o número de solicitações HTTP separadas, especialmente em conexões móveis lentas.

Referências

1. RFC 4648: As codificações de dados Base16, Base32 e Base64
2. RFC 2397: O esquema de URL “data”
3. MDN Web Docs: URLs de dados
4. Padrão WHATWG de detecção de tipo MIME