CodeKitHubO que é esta ferramenta?
Base64 é uma forma de representar dados binários — como os bytes brutos de uma imagem — como texto simples, usando apenas letras, dígitos e alguns símbolos. Por ser texto simples, uma imagem codificada em Base64 pode ser incorporada diretamente em HTML, CSS ou JSON, em vez de ser referenciada como um arquivo separado.
Uma "URL data" envolve esse texto Base64 com um pequeno prefixo (data:image/png;base64,) que informa ao navegador que tipo de arquivo é, para que possa ser inserida diretamente em um atributo src ou url() e renderizada sem nenhuma requisição extra.
Por que usar?
- Obtenha os dois formatos de uma vez — a URL data completa para HTML/CSS, e o Base64 puro (sem prefixo) para incorporar em arquivos JSON ou de configuração.
- Sem ida e volta ao servidor: elimina uma requisição HTTP para ícones pequenos, avatares ou imagens inline.
- Preserva exatamente os bytes do arquivo original — sem recodificação nem perda de qualidade, diferente de ferramentas que decodificam e salvam a imagem novamente.
- Mostra a diferença de tamanho para você saber o que está trocando pela conveniência.
- Privado: o arquivo é lido localmente com a API FileReader do navegador e nunca sai do seu dispositivo.
Como usar
- Clique na área de upload ou arraste um arquivo de imagem até ela.
- Copie a URL data completa se for colar em um <img src> ou background-image CSS.
- Copie o Base64 puro (sem o prefixo data:) se estiver incorporando o valor em JSON, YAML ou outro formato de configuração que já saiba o tipo de arquivo.
- Confira a nota de tamanho — o texto Base64 é cerca de um terço maior que o arquivo binário original.
Exemplo
Entrada
Um arquivo de ícone PNG de 12 KB.Resultado
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB de texto) mais a mesma string sem o prefixo data:.O aumento de ~33% no tamanho é inerente à codificação Base64 (3 bytes de binário viram 4 caracteres de texto) — não é um bug da ferramenta.
Onde cada formato é usado
| Formato | Uso típico |
|---|---|
| URL data completa | HTML <img src="...">, CSS background-image: url(...), imagens inline em e-mails |
| Base64 puro | Payloads de API JSON, arquivos YAML/config, campos BLOB de banco de dados, protocolos binários personalizados |
Base64 e tamanho de imagem — a troca na prática
A sobrecarga de ~33% significa que a incorporação em Base64 é melhor para recursos pequenos: um ícone de 2 KB vira um inofensivo texto inline de ~2,7 KB, mas uma foto de 500 KB vira ~665 KB de texto sentado inline no seu HTML, o que desacelera a análise e não pode ser armazenado em cache separadamente da página.
Se você está incorporando muitas imagens ou imagens maiores, pese o benefício da requisição economizada contra o custo do peso da página — e considere comprimir primeiro.
Perguntas frequentes
Por que a string Base64 é tão maior que o arquivo da minha imagem?
O Base64 codifica cada 3 bytes de dados binários como 4 caracteres de texto, o que representa uma sobrecarga fixa de ~33%. Para uma imagem de 100 KB, espere cerca de 133 KB de texto Base64. Isso é normal e inevitável — é o custo de representar dados binários como texto seguro e portátil.
Qual é a diferença entre a URL data e a string Base64 pura?
A URL data inclui um prefixo data:image/png;base64, que informa ao navegador ou renderizador para qual tipo MIME o texto seguinte deve ser decodificado. Cole a URL data completa em um src HTML ou url() CSS. O Base64 puro (tudo depois da vírgula) é o que você quer quando um sistema já sabe o tipo de arquivo separadamente — por exemplo, um campo JSON como { "format": "png", "data": "<base64 puro>" }.
Quando devo incorporar uma imagem como Base64 em vez de vincular a um arquivo?
A incorporação em Base64 é útil para imagens pequenas e reutilizadas com frequência (ícones, logos, pequenos gráficos de interface) onde economizar uma requisição HTTP compensa a penalidade de ~33% no tamanho, ou em contextos em que um arquivo separado não é prático, como imagens inline em e-mails ou exportações HTML de arquivo único. Para fotos grandes ou qualquer coisa reutilizada em muitas páginas, um arquivo vinculado normal com cache do navegador é quase sempre melhor.
Converter para Base64 altera ou comprime minha imagem?
Não. Base64 é uma codificação de texto sem perdas dos bytes originais exatos — não mexe em pixels, resolução ou compressão. Se quiser um arquivo menor, comprima a imagem primeiro com um compressor de imagens e depois converta o resultado comprimido para Base64.
Minha imagem é enviada para algum lugar?
Não. O arquivo é lido diretamente no seu navegador usando a API FileReader e codificado localmente — nunca é enviado pela rede.