Conversor de Imagem para Base64 – Codificar Imagens como Data URIs

Codifique uma imagem como um data URI em Base64 e copie como uma tag img HTML, um valor url() de CSS, Markdown, ou o texto bruto. A codificação roda no seu navegador; nada é enviado.

O Que Imagem para Base64 Faz

Esta ferramenta lê o seu arquivo com a API FileReader do navegador e o devolve como um data URI: a string `data:image/png;base64,` seguida pelos bytes do arquivo reescritos em Base64. Base64 é uma codificação de transporte, não um esquema de compressão. Ela mapeia cada 3 bytes de binário em 4 caracteres ASCII tirados de A-Z, a-z, 0-9, mais e barra, o que significa que a forma codificada é sempre cerca de 33% maior que o arquivo com que você começou. Nada muda na imagem em si — os pixels, o formato, o perfil de cor e qualquer metadado EXIF sobrevivem intactos, e decodificar a string devolve um arquivo idêntico byte a byte. O que você ganha é uma representação feita inteiramente de caracteres seguros para colar em código-fonte, e é por isso que data URIs funcionam em qualquer lugar onde uma URL é esperada: um src de img, um url() de CSS, uma imagem Markdown, um campo JSON. A ferramenta monta esses quatro trechos para você e copia a string completa mesmo quando a prévia na tela está truncada, porque um data URI de uma imagem modesta chega a dezenas de milhares de caracteres, e renderizar todos eles travaria a página. Ao lado de cada arquivo ela mostra o tamanho original, o tamanho codificado e a porcentagem de sobrecarga, então o custo de incorporar fica visível antes de você se comprometer com ele. A leitura acontece inteiramente no seu dispositivo; nenhum arquivo é enviado, e a página continua funcionando com a rede desconectada.

Por Que Codificar uma Imagem como Base64

Um data URI transforma uma imagem em texto, o que elimina a necessidade de um arquivo separado e de uma requisição HTTP separada. Isso é genuinamente útil para recursos pequenos e uma má ideia para os grandes.

Incorporar um ícone pequeno, sprite ou placeholder diretamente no HTML ou CSS e economizar uma requisição na primeira renderização
Enviar uma imagem dentro de um único arquivo autocontido — uma página HTML independente, um modelo de e-mail, um bookmarklet, um PDF gerado
Incorporar dados de imagem em JSON, YAML, ou uma coluna de banco de dados que só aceita texto
Reproduzir um bug ou escrever um fixture de teste sem enviar um arquivo binário para o repositório

Como Converter uma Imagem para Base64

Quatro passos, todos locais — o arquivo é lido no navegador e a string é montada no seu dispositivo.

1

Solte uma imagem ou várias — cada arquivo ganha o seu próprio cartão com os números de tamanho

2

Confira o tamanho codificado e a sobrecarga; abaixo de cerca de 10 KB costuma ser onde incorporar vale a pena

3

Escolha a saída que você precisa — Base64 puro, uma tag img HTML, uma declaração url() de CSS, ou Markdown

4

Copie o trecho para a área de transferência ou baixe-o como um arquivo .txt

Perguntas Frequentes

Porque Base64 é uma codificação, não um compressor. Ela representa 3 bytes de binário usando 4 caracteres ASCII imprimíveis, então a saída é sempre cerca de 33% mais longa que a entrada, mais alguns bytes para o prefixo data:. Esse crescimento é inerente ao formato, e não há nenhuma configuração que evite isso. Se você precisa de um arquivo menor, comprima a imagem antes de codificá-la — a etapa de codificação só pode aumentar o tamanho.
Incorpore quando o recurso for pequeno e sempre necessário: ícones, espaçadores de 1x1, pequenas texturas de fundo, geralmente abaixo de 10 KB. Abaixo disso, economizar uma requisição HTTP costuma valer mais que a penalidade de 33% no tamanho. Não incorpore fotos, imagens principais, ou qualquer coisa acima de cerca de 100 KB. Um data URI grande não pode ser armazenado em cache de forma independente, precisa ser baixado novamente a cada revisão de página ou folha de estilo, e bloqueia o analisador até ser lido por completo.
Muitas vezes não. O Gmail remove data URIs de tags img completamente, e os clientes de desktop do Outlook nunca deram suporte confiável a eles. O Apple Mail e alguns webmails renderizam sim. A abordagem confiável para e-mail continua sendo uma URL de imagem hospedada, ou um anexo CID referenciado com cid: no src. Teste nos clientes que os seus destinatários realmente usam antes de confiar em dados incorporados.
Sim, e é sem perdas — os bytes decodificados são idênticos ao arquivo original, incluindo EXIF e dados de perfil de cor. Cole um data URI completo na barra de endereço de um navegador e a imagem renderiza. Em código, atob() em JavaScript ou base64 -d na linha de comando fazem isso. Note que a saída bruta nesta página omite o prefixo data:, então adicione-o de volta se o destino esperar um URI completo.
Não. O SVG já é texto, então Base64 adiciona 33% à toa. Cole o markup diretamente no seu HTML em vez disso, o que também permite que o CSS estilize as formas e o JavaScript as alcance. Para fundos de CSS, use um SVG codificado por URL em url() em vez de um em Base64 — ele fica menor e comprime melhor com gzip. Base64 para SVG só faz sentido onde um URI estrito é exigido e a codificação percentual não é uma opção.
Não há limite na especificação de HTML ou CSS, e navegadores modernos lidam com data URIs de vários megabytes em atributos src. Os limites práticos estão em outro lugar: barras de endereço tipicamente cortam por volta de 2 MB ou menos, algumas configurações de servidor e CDN limitam o tamanho de cabeçalhos e requisições, e strings muito longas deixam a análise perceptivelmente mais lenta. Esta ferramenta não impõe nenhum limite próprio, mas avisa acima de 100 KB, porque é a partir daí que incorporar deixa de valer a pena.
Não. O arquivo é lido com a API FileReader do navegador, que opera sobre o identificador de arquivo local, e a string resultante fica na memória da página. Nada é enviado pela rede, e não há nenhum componente do lado do servidor, então a ferramenta continua funcionando offline depois que a página carrega. As cópias para a área de transferência passam pela área de transferência padrão do navegador, não por nós.
Todos eles, para imagens — data URIs em src de img e url() de CSS funcionam desde o IE8 e têm suporte universal hoje. A área de transferência é a parte mais nova: navigator.clipboard exige um contexto seguro, então em HTTP puro ou em navegadores mais antigos esta página recorre a selecionar a textarea e usar document.execCommand('copy'). Se os dois caminhos falharem, você verá uma mensagem pedindo para selecionar e copiar o texto manualmente.

Mais Ferramentas de Imagem

Explore outras ferramentas poderosas para suas necessidades de edição de imagem

Comprimir Imagem

Reduzir tamanho

Redimensionar

Alterar dimensões

Recortar Imagem

Cortar área

Converter Formato

Mudar formato

Editor de Fotos

Editar fotos

Girar Imagem

Girar imagem

Virar Imagem

Horizontal/Vertical

Adicionar Marca d'Água

Marca d'água

Adicionar Borda

Adicionar borda de imagem

Cantos Arredondados

Adicionar cantos arredondados

Filtros

Brilho/Contraste

Desfocar Rosto

Ocultar rostos

Mosaico

Desfocar regiões

Remover Fundo

Remover fundo

Melhorar Imagem

IA upscale

Adicionar Texto

Adicionar texto a imagem

Colagem

Combinar múltiplas imagens

HTML para Imagem

Web para imagem

GIF para Sequência

Extrair frames

Remover bordas vazias

Remover bordas vazias

Renomear imagens em lote

Renomeie arquivos em lote com segurança

Recorte Circular

Recortar imagens em círculo

Preto e Branco

Converter imagens em tons de cinza

Dividir Imagem

Cortar uma imagem em grade

Mesclar Imagens

Combinar imagens em uma só

Alterar DPI

Definir metadados de DPI da imagem

Imagem para PDF

Combine imagens em um PDF

HEIC para JPG

Converta fotos HEIC do iPhone para JPG

Remover EXIF

Visualize e remova metadados ocultos de fotos, incluindo localização GPS

Gerador de Favicon

Conjunto completo de ícones mais HTML

Paleta de Cores

Extraia cores de uma imagem

Base64 para Imagem

Decodifique Base64 de volta para imagem

HEIC para PNG

Converta fotos HEIC do iPhone para PNG sem perdas

Texto Atrás da Imagem

Coloque texto atrás do assunto de uma foto, tudo no seu navegador

Conta-gotas de Cores

Obtenha o HEX, RGB e HSL de qualquer pixel

Criador de Assinatura

Desenhe uma assinatura e baixe como PNG transparente

Removedor de Fundo de Assinatura

A tinta do papel, sobre transparência

Criador de Fundo Transparente

Deixar um fundo transparente