Imagem ↔ Base64

O que é a conversão de imagem para Base64?#

Um data URL é uma string que embute um arquivo inteiro inline, prefixado com o seu tipo MIME: data:image/png;base64,iVBORw0KGgo…. Quando uma imagem vive dentro de uma string dessas, ela se comporta como texto — você pode colá-la em HTML, CSS, JSON, um arquivo Markdown ou um arquivo de código-fonte, e o consumidor a renderiza sem nunca buscar um arquivo separado. Esta página transforma um arquivo de imagem em um data URL e transforma um data URL de volta em uma imagem visível, inteiramente no seu navegador.

O Base64 infla os dados binários em cerca de 33% (cada três bytes viram quatro caracteres ASCII), então um data URL é maior que o arquivo que substitui. A troca vale a pena quando você quer zero requisições externas: assinaturas de e-mail em HTML, demonstrações em arquivo único, favicons embutidos em um <head>, ícones empacotados em uma configuração JSON ou assets em ambientes (algumas páginas com CSP restritiva, pré-visualizações em sandbox) onde carregar um <img src> do disco não é opção.

Esta ferramenta analisa data URLs conforme a RFC 2397, aceita tanto payloads em texto base64 quanto codificados em URL, detecta o MIME e valida que é realmente uma imagem antes de pré-visualizar — então colar uma string quebrada falha de forma evidente em vez de renderizar um ícone de imagem partido.

Como usar#

1. Solte uma imagem na zona tracejada, ou clique em Enviar e escolha um arquivo. PNG, JPEG, WebP, GIF, SVG, BMP, AVIF e ICO são todos aceitos.
2. A área de texto Data URL Base64 à esquerda é preenchida com a string completa data:image/…;base64,…. Use Copiar à direita para pegá-la.
3. Para fazer o caminho inverso, cole um data URL nessa mesma área de texto. A pré-visualização à direita re-renderiza a imagem, e Baixar a salva de volta como um arquivo real com a extensão correta.
4. Limpar esvazia ambos os painéis.

O MIME é lido do cabeçalho do data URL, não deduzido da extensão do arquivo — então renomear um .png para .jpg não engana a ferramenta, e a extensão do download sempre corresponde ao tipo real.

Principais funcionalidades#

• Conversão nos dois sentidos. Imagem → data URL para embutir; data URL → arquivo para extrair. O mesmo painel cuida das duas direções.
• Consciente do MIME. A extensão de download sugerida deriva do tipo de mídia real (image/svg+xml → .svg, image/jpeg → .jpg), não do nome do arquivo.
• Valida antes de pré-visualizar. Cadeias malformadas são sinalizadas como inválidas em vez de mostrar silenciosamente uma imagem quebrada.
• Lida com bytes arbitrários com segurança. A codificação Base64 é fragmentada, então payloads multibyte e binários fazem o trajeto de ida e volta sem corrupção.
• Permanece local. As APIs FileReader e atob/btoa fazem o trabalho dentro da página; nada é enviado.

Exemplo prático#

Você tem pixel.gif, um pixel transparente de 1×1 de rastreamento (do tipo que clientes de e-mail usam como sinal de abertura), com 43 bytes. Envie-o. A área de texto do Data URL produz a string completa e exata:

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

Esse é um data URL real e completo — cole-o em um <img src="…"> em HTML, em um background-image: url('…') do CSS, ou em um campo JSON, e o consumidor renderiza o pixel original sem buscar nenhum arquivo. O MIME (image/gif) e a extensão de download .gif vêm do cabeçalho do data URL, não do nome do arquivo original.

Para uma foto maior, o princípio é idêntico — apenas o corpo em base64 cresce (cerca de 1,33× o tamanho em bytes) e o MIME passa a ser image/jpeg ou image/webp.

FAQ#

Por que o meu data URL fica muito maior que o arquivo original?#

O Base64 representa cada três bytes como quatro caracteres, então a string tem cerca de 1,33× o tamanho binário. Para imagens grandes, isso é desperdício — considere a ferramenta de compactação primeiro, ou hospede o arquivo e referencie-o em vez de embutir.

Existe limite de tamanho?#

O navegador lida com data URLs de até centenas de megabytes, mas na prática qualquer coisa acima de algumas centenas de KiB incha o seu HTML, CSS e JSON e torna os parsers mais lentos. Embuta apenas ícones pequenos, logos e sprites.

Posso converter um SVG?#

Sim. O SVG tem o MIME image/svg+xml e já é texto, então o data URL é compacto e faz o trajeto de ida e volta sem perdas.

O data URL que colei diz “inválido”. O que aconteceu?#

A string precisa começar com data: e conter uma vírgula separando o cabeçalho do payload. Uma cópia truncada, um espaço acidental no início, ou a ausência da flag ;base64 farão a análise falhar. Recopie a string completa, incluindo o cabeçalho.