Image to Base64

Image to Base64

Envie qualquer imagem e converta para uma data URL Base64 pronta para HTML, CSS ou JSON — conversor online grátis, suporta PNG, JPEG, SVG, WebP. Sem upload para servidor.

Velocidade
Privacidade
Apenas Local
Payload
0 KB

Codificação Rápida

Processamento assíncrono lida com arquivos grandes sem travar a interface.

Processamento Local

Os assets são codificados no browser. Os dados nunca saem do seu dispositivo.

Suporte a Data URI

Gere formatos prontos para CSS, HTML e Data URL diretamente.

Faça upload de qualquer imagem e obtenha sua data URL em Base64 em segundos com este conversor gratuito de imagem para Base64 online — 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 Converter uma Imagem para Base64

  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.

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.

Related Tools