Sem upload, 100% local, sem conta

Conversor Imagem → Base64

Codifique qualquer imagem para uma data URI Base64, ou cole uma data URI para decodificá-la de volta em uma imagem. Copie o resultado ou use o snippet CSS url(). Nada sai do dispositivo.

Como o Imagem para Base64 funciona

Imagem para Base64 lê seu arquivo de imagem e o codifica como um URI de dados Base64 que você pode incorporar diretamente em HTML, CSS ou JSON sem precisar de uma requisição de arquivo separada. A conversão usa a API FileReader no seu navegador; nenhum byte da sua imagem é enviado para um servidor. Você também pode colar uma string Base64 de volta para decodificá-la e pré-visualizar a imagem, tudo localmente.

Um URI de dados Base64 é cerca de 33% maior do que o original binário porque cada grupo de três bytes é expandido para quatro caracteres ASCII. Esse aumento de tamanho é o custo esperado pela conveniência de incorporar uma imagem em um documento ou folha de estilos. A ferramenta mostra tanto a string Base64 bruta quanto um snippet de tag HTML img pronto para usar e um snippet CSS background-image para cópia e colagem rápida no seu projeto.

Escrito por Bastien Sulyan

Como usar o Imagem para Base64, passo a passo

  1. Arraste um arquivo de imagem para a área de upload ou clique para navegar. Formatos aceitos: JPEG, PNG, WebP, GIF, SVG.
  2. O URI de dados Base64 aparece imediatamente no campo de saída.
  3. Copie a string Base64 bruta ou use o snippet de tag HTML img pré-formatado ou o snippet CSS background-image.
  4. Para decodificar, cole uma string Base64 no campo de entrada e mude para o modo de decodificação para pré-visualizar a imagem.
  5. Clique no botão copiar ao lado de qualquer snippet para copiá-lo para a área de transferência.

Casos de uso comuns

  • Um desenvolvedor front-end incorpora um ícone pequeno como URI de dados em um arquivo CSS para eliminar uma requisição HTTP extra.
  • Um desenvolvedor incorpora um spinner de carregamento pequeno como atributo src Base64 para que a imagem de espaço reservado esteja disponível antes do carregamento do bundle JavaScript.
  • Um engenheiro de QA copia o Base64 de uma imagem de teste para colar diretamente em um payload JSON para um teste de API.
  • Um construtor de templates de e-mail incorpora um logo de assinatura como URI de dados Base64 porque alguns clientes de e-mail bloqueiam requisições de imagem externas.

Perguntas frequentes

Por que a saída Base64 é cerca de um terço maior do que meu arquivo original?

A codificação Base64 representa cada três bytes binários como quatro caracteres ASCII (uma proporção de 4/3). Uma imagem de 100 KB em binário se torna aproximadamente 133 KB como string Base64. Isso é inerente ao esquema de codificação, não uma limitação da ferramenta.

O conteúdo da imagem é transmitido para um servidor durante a codificação?

Não. A API FileReader lê o arquivo binário do seu disco local e passa o resultado diretamente para a função de codificação JavaScript dentro da aba do navegador. Os dados da imagem não saem do seu dispositivo.

Posso usar a saída de URI de dados em qualquer contexto HTML ou CSS?

Sim. Um URI de dados começando com data:image/jpeg;base64, seguido pela string codificada pode ser usado como o atributo src de uma tag img ou como o valor url() em uma propriedade CSS background-image. Todos os navegadores modernos suportam URIs de dados. URIs de dados muito grandes podem tornar a renderização da página mais lenta, portanto incorporar é tipicamente reservado para imagens pequenas de alguns kilobytes.

A ferramenta suporta GIFs animados?

A ferramenta codifica o conteúdo binário completo de qualquer arquivo que você fornecer, incluindo GIFs animados. O URI de dados resultante, quando usado como src de uma tag img, reproduzirá a animação em navegadores que suportam animação GIF.

Como faço para decodificar uma string Base64 de volta para uma imagem?

Mude a ferramenta para o modo de decodificação, cole sua string Base64 (com ou sem o prefixo data:) e a ferramenta a decodificará e oferecerá a imagem binária como download, além de mostrar uma pré-visualização.

Ferramentas relacionadas

Mantenha tudo local, explore ferramentas complementares.

Todas as ferramentas de imagem