Imagem para Base64 — Image to Base64 e Data URL

Image to Base64 Online — Encode Imagens Grátis, Sem Upload

Faça image to base64 encode de qualquer imagem em segundos — arraste e solte ou escolha o arquivo, sem envio para servidor, sem cadastro. O resultado está pronto para colar diretamente em HTML, CSS, JSON ou qualquer API que aceite imagens em Base64.

Escolha entre quatro formatos de saída: Base64 puro, data URL completa, tag HTML <img> ou valor CSS url() — o que melhor se encaixa no seu fluxo. Uma pré-visualização com zoom e metadados (dimensões, tamanho original, tamanho codificado) confirma a conversão antes de copiar.

Como Fazer Image to Base64 Encode

1. Solte sua imagem na área de upload, ou clique em navegar para selecionar o arquivo — PNG, JPG, GIF, SVG, WebP até 20 MB.
2. Escolha o formato de saída — selecione Raw Base64, Data URL, HTML <img> ou CSS url() no seletor de formato.
3. Copie o resultado — clique em Copiar ou pressione Shift + Enter para copiar a string codificada para a área de transferência.

A ferramenta exibe as dimensões da imagem, tamanho original e tamanho codificado para que você saiba exatamente o que está embutindo antes de colocar no código.

O que é uma Data URL Base64?

Uma data URL embutia o conteúdo inteiro de um arquivo binário — como uma imagem — como texto dentro do seu código. Para uma imagem, fica assim:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

O navegador lê essa string e renderiza a imagem sem fazer nenhuma requisição de rede. Você pode colocar isso diretamente no atributo src de uma tag <img>, em background-image no CSS, ou passar como campo JSON para uma API. O custo é tamanho: a codificação Base64 adiciona cerca de 33% em relação ao arquivo binário original.

Casos de Uso Comuns

• Eliminar requisições HTTP para assets pequenos: Ícones pequenos, logos e elementos de UI codificados como data URL carregam junto com o documento HTML/CSS em vez de disparar requisições de rede separadas. Ideal para assets abaixo de 5–10 KB onde o overhead de tamanho é negligível.
• Arquivos HTML autocontidos: Ao construir demos de arquivo único, templates de e-mail ou documentos offline, embutir imagens em Base64 faz o arquivo funcionar em qualquer lugar sem dependências externas.
• Imagens em e-mail HTML: Muitos clientes de e-mail bloqueiam imagens carregadas remotamente por padrão, mas renderizam data URLs inline sem problemas, tornando o Base64 a escolha confiável para assinaturas de e-mail e logos em e-mails transacionais.
• Payloads de API e JSON: APIs REST e payloads de webhook que transferem imagens frequentemente esperam uma string Base64. Gere o valor codificado aqui e cole diretamente no corpo da requisição ou arquivo de configuração.
• Workflows com Canvas e WebGL: Ao carregar imagens programaticamente em um contexto <canvas>, strings Base64 evitam restrições de cross-origin (CORS) que se aplicam a URLs de imagens hospedadas externamente.
• CSS sprites e ícones personalizados: Inline ícones SVG ou sprites PNG pequenos como Base64 em uma stylesheet para entregar um único arquivo CSS sem dependências externas de imagens.
• Decodificar Base64 de volta para imagem: Para fazer o caminho inverso — colar uma string Base64 e visualizar a imagem — use o conversor Base64 para Imagem.

Perguntas Frequentes

Como embutir uma imagem Base64 no HTML?

Use o formato de saída data URL. Copie a string completa começando com data:image/...;base64, e cole como valor do atributo src de uma tag <img>: <img src="data:image/png;base64,iVBOR..." alt="descrição" />. Ou use a opção de saída HTML <img> — esta ferramenta gera a tag completa para você.

Como usar uma imagem Base64 no CSS?

Copie a saída CSS url() do seletor de formato. Ela gera uma string como url('data:image/png;base64,...') que você pode colar diretamente em qualquer propriedade CSS que aceite uma imagem, como background-image ou content.

Qual é o tamanho máximo de arquivo suportado?

Até 20 MB. Para imagens maiores, a string Base64 fica muito longa e pode causar problemas de performance ao ser embutida em HTML ou CSS — o navegador precisa analisar e decodificar a string inteira inline. Para imagens acima de alguns KB, considere se hospedar o arquivo separadamente e linkar para ele não seria mais adequado.

Codificar uma imagem para Base64 reduz sua qualidade?

Não. Base64 é uma codificação sem perdas — converte o arquivo binário para texto e de volta sem nenhuma modificação nos dados de pixel. A string codificada representa exatamente a mesma imagem que o arquivo original.

Minha imagem é enviada para algum servidor?

Não. Toda a conversão acontece no seu navegador usando a FileReader API. Sua imagem nunca sai do seu dispositivo, e a ferramenta funciona completamente offline depois que a página carrega.

Recursos

• MDN — FileReader API — Documentação oficial da API do navegador usada para ler arquivos de imagem localmente antes de codificar.
• MDN — Data URLs — Referência completa para o formato data:image/...;base64,... usado em HTML e CSS.