Como usar

Escolha Imagem → Base64 e selecione um arquivo de imagem, ou escolha Base64 → Imagem para fazer o caminho inverso.
Selecione o formato de saída desejado: data URL, Base64 simples, uma tag img em HTML, uma regra background-image em CSS ou Markdown.
Copie o resultado e cole no código, no modelo de e-mail ou no JSON.
Para decodificar, cole uma data URL ou Base64 simples. A imagem será exibida em uma prévia e poderá ser baixada.

Como funciona

Base64 representa dados binários usando 64 caracteres imprimíveis, permitindo inserir imagens diretamente em formatos de texto. Uma data URL adiciona o tipo de mídia antes dos dados, por exemplo, data:image/png;base64, seguido dos bytes codificados. Os navegadores aceitam data URLs sempre que uma URL de imagem é permitida: no atributo src de uma tag img, em um url() do CSS ou em uma referência de imagem SVG.

O texto codificado é sempre cerca de um terço maior que o arquivo original (4 caracteres para cada 3 bytes). Inserir ícones pequenos e imagens de espaço reservado pode evitar uma solicitação de rede separada, mas os dados inseridos não podem ser armazenados em cache separadamente e são baixados novamente com cada página ou folha de estilos que os contém. Por isso, raramente vale a pena usar esse método para imagens com mais de alguns quilobytes. Muitos clientes de e-mail bloqueiam ou removem imagens em data URLs, então teste antes de usá-las em newsletters.

O arquivo é codificado byte a byte: nada é recomprimido, e os metadados presentes no arquivo (como EXIF) são preservados. Na decodificação, a ferramenta aceita uma data URL completa, Base64 simples, Base64 compatível com URL e texto copiado junto com um invólucro url(…) do CSS. O tipo de imagem é detectado pelos bytes decodificados, em vez de ser determinado pelo rótulo.

Exemplos

Ícone pequeno em uma folha de estilos

Um ícone PNG de 600 bytes se transforma em uma string Base64 de 800 caracteres. A saída em CSS gera uma regra background-image que você pode colar em uma classe sem hospedar um arquivo separado.

Imagem de uma resposta da API

Uma API retorna um campo JSON como "iVBORw0KGgoAAAANSUhEUg…". Cole-o em Base64 → Imagem para ver a imagem, conferir o tamanho e baixá-la como PNG.

Logo SVG em HTML

A codificação de um SVG gera uma URL data:image/svg+xml;base64 que funciona em uma tag img. No caso de SVG, o código SVG sem compressão costuma ser menor que o Base64, então considere inserir o SVG diretamente.

Perguntas frequentes

Por que a versão em Base64 é maior que minha imagem?

Base64 usa 4 caracteres de texto para armazenar 3 bytes, acrescentando cerca de 33%, além de um pequeno extra pelo prefixo da data URL. A compressão Gzip ou Brotli em um servidor web reduz essa diferença, mas não a elimina.

A codificação altera ou comprime a imagem?

Não. Os bytes exatos do arquivo são codificados, incluindo todos os metadados. Para encurtar a string, comprima ou redimensione a imagem antes.

Qual é a diferença entre uma data URL e Base64 simples?

Base64 simples contém apenas os bytes codificados. Uma data URL adiciona um prefixo, como data:image/jpeg;base64,, que informa ao navegador o tipo de arquivo e permite usá-lo diretamente como fonte de imagem.

Há um limite de tamanho?

É possível codificar arquivos de até 10 MB aqui. Strings muito longas podem deixar campos de texto e editores lentos, e data URLs desse tamanho não são práticas em sites.

Privacidade

A codificação e a decodificação são feitas no seu navegador. Sua imagem e o texto Base64 não são enviados, armazenados nem incluídos em análises.