🖼️Imagem para Base64

Carregue uma imagem para gerar seu código Base64 (data URI), pronto para colar em HTML, CSS ou JSON — ou cole um Base64 já pronto para transformá-lo de volta em imagem e baixar. Tudo acontece no seu navegador.

Carregue uma imagem. Ela é processada no seu navegador — nada é enviado para servidores.

🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.

Fonte: RFC 4648 (Base64) · FileReader API (readAsDataURL) — processamento 100% local; a imagem não sai do seu dispositivo · Última verificação em 23/09/2026

Converter uma imagem para Base64 transforma seus bytes em um texto (data URI) que pode ser colado direto em HTML, CSS ou JSON, sem arquivo separado. Serve para ícones pequenos, mas o texto fica cerca de 33% maior que o arquivo original. O processamento é 100% local, no navegador.

Como usar o conversor

  1. Escolha a direção da conversãoUse o alternador no topo para trocar entre codificar uma imagem em Base64 ou decodificar um Base64 de volta em imagem.
  2. Carregue a imagem ou cole o textoNo modo de codificação, escolha o arquivo do seu dispositivo. No modo de decodificação, cole o Base64 (com ou sem o prefixo data:image/...;base64,).
  3. Copie ou baixe o resultadoNo modo de codificação, copie o texto Base64 com um clique. No modo de decodificação, baixe a imagem reconstruída como arquivo.

Como funciona a codificação Base64 de imagens

Uma imagem, como qualquer arquivo, é armazenada como uma sequência de bytes. O Base64 reagrupa esses bytes de 3 em 3 (24 bits) e mapeia cada grupo de 6 bits resultante para um caractere de um alfabeto de 64 símbolos seguros para texto: letras maiúsculas, minúsculas, números, mais + e /. O resultado é um data URI, que começa com data:image/png;base64, (ou jpeg, webp etc.) seguido do texto codificado — um formato que qualquer navegador entende e consegue renderizar diretamente, sem precisar buscar um arquivo separado.

O ponto importante é que essa conversão não comprime nem melhora a imagem de forma alguma: ela apenas troca a representação binária por uma representação em texto. Como consequência direta da matemática (4 caracteres de saída para cada 3 bytes de entrada), o texto Base64 final é sempre cerca de 33% maior que o arquivo binário original. Isso torna a técnica prática só para arquivos pequenos.

3 bytes da imagem (24 bits) → 4 caracteres Base64. Data URI: data:image/png;base64,iVBORw0KGgo...

Quando vale a pena embutir uma imagem em Base64

Embutir uma imagem como Base64 direto no HTML ou no CSS (por exemplo, em background-image: url(data:image/png;base64,...)) elimina uma requisição HTTP separada para aquele arquivo. Para ícones pequenos, pontos de interrogação, setas ou logotipos minúsculos que aparecem em muitos lugares da página, isso pode reduzir o número total de requisições e simplificar o deploy — o arquivo vira parte do próprio CSS ou HTML, sem depender de um caminho de pasta separado.

É também a técnica usada para anexar pequenas imagens em e-mails com HTML embutido, ou para guardar um ícone dentro de um arquivo JSON de configuração, onde não é possível referenciar um arquivo externo. A desvantagem real, e que vale sempre lembrar, é o tamanho: como o texto Base64 é ~33% maior que o binário, usar essa técnica para fotos grandes deixa a página mais pesada e mais lenta para carregar, exatamente o oposto do que se busca em performance web. A regra prática é: Base64 para ícones e imagens muito pequenas, arquivo separado (com cache do navegador) para fotos.

Suposições e limitações

  • Converte a imagem inteira; não há compressão ou redimensionamento automático no processo
  • O texto Base64 gerado é sempre cerca de 33% maior que o arquivo binário original
  • No modo de decodificação, se nenhum prefixo data:image/...;base64, for colado, a ferramenta assume image/png por padrão
  • Depende do navegador conseguir decodificar o formato da imagem para gerar a prévia
  • Todo o processamento é local; nada da imagem ou do texto é enviado a servidores

Dicas para tirar o melhor proveito

Use Base64 para ícones pequenos (poucos KB), spinners de carregamento, ou logotipos que aparecem repetidamente numa página — nesses casos, eliminar a requisição HTTP extra compensa o aumento de tamanho do texto. Para fotos, banners ou qualquer imagem acima de uns 10 KB, prefira sempre um arquivo separado: o navegador consegue colocá-lo em cache entre páginas, o que um Base64 embutido no HTML não permite (ele é baixado de novo a cada carregamento da página que o contém).

Se você está montando uma data URI manualmente para colar em um arquivo CSS ou JSON, lembre-se que o prefixo data:image/tipo;base64, precisa bater com o formato real do arquivo (png, jpeg, webp, svg+xml) — um prefixo errado pode fazer alguns navegadores recusarem a renderização. Ao decodificar um Base64 recebido de outra fonte, cole o texto completo, sem cortes: um Base64 incompleto gera um erro de decodificação em vez de uma imagem corrompida.

Erros comuns a evitar

O erro mais frequente é usar Base64 para fotos grandes achando que é apenas "outro jeito de salvar a imagem" — na prática isso deixa a página mais pesada, porque o texto gerado é sempre maior que o arquivo original, e ainda perde o benefício do cache do navegador entre visitas. Outro erro é esquecer o prefixo data:image/tipo;base64, ao montar manualmente uma data URI para CSS: sem ele, alguns navegadores não reconhecem o conteúdo como imagem.

Também é comum colar um Base64 cortado pela metade (copiado de um campo de texto pequeno, por exemplo) e reclamar que "não decodifica" — o texto precisa estar completo. Por fim, vale lembrar que Base64 não é criptografia nem proteção de conteúdo: qualquer pessoa com o texto Base64 consegue reconstruir a imagem original exatamente como ela é, sem senha nenhuma.

Veja também

Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Conversor de Base64, Conversor de imagem, Gerador de favicon, Divisor de imagem.

Perguntas frequentes

Como converter uma imagem para Base64?

Escolha o modo Imagem → Base64, carregue o arquivo e o texto Base64 (data URI) aparece automaticamente na caixa, pronto para copiar e colar em HTML, CSS ou JSON.

Minha imagem é enviada para algum servidor?

Não. Toda a conversão — nos dois sentidos — acontece no seu navegador, no seu dispositivo. A imagem e o texto Base64 nunca são enviados para nós nem para terceiros.

Por que o Base64 gerado é maior que o arquivo original?

Porque cada 3 bytes do arquivo binário viram 4 caracteres de texto Base64, um aumento matemático de aproximadamente 33%. É o preço de representar dados binários usando apenas caracteres seguros para texto.

Quando vale a pena usar Base64 para imagens?

Principalmente para ícones e imagens muito pequenas (poucos KB), onde eliminar uma requisição HTTP extra compensa o aumento de tamanho do texto. Para fotos e imagens grandes, um arquivo separado com cache do navegador é sempre mais eficiente.

Posso colar qualquer texto no modo Base64 → Imagem?

Não — o texto precisa ser um Base64 válido de uma imagem, completo e sem cortes. Você pode colar com ou sem o prefixo data:image/tipo;base64,; se ele faltar, a ferramenta assume PNG por padrão.

Explore mais ferramentas gratuitas

Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.