Como funciona a conversão de imagem para Base64
Toda a conversão é executada no seu navegador usando a File API e a função nativa btoa — nenhuma biblioteca de codec é baixada e nenhum servidor vê a imagem. Aqui está o processo, do início ao fim:
- Você solta ou seleciona uma imagem. O navegador a lê como um Blob do seu disco local, sem copiar bytes para um servidor.
- O arquivo é lido em blocos de 1 MB e os bytes de cada bloco são anexados a uma string binária. O processamento em blocos evita que imagens grandes transbordem a pilha de chamadas do JavaScript.
- A string binária é passada para btoa, que mapeia cada três bytes em quatro caracteres Base64 do alfabeto A–Z, a–z, 0–9, mais /.
- O tipo MIME do arquivo (image/png, image/jpeg, etc.) é lido do objeto File e adicionado como prefixo data:, produzindo uma URI data:image/…;base64,… completa.
- A página monta quatro saídas a partir dessa URI — a URI de dados completa, o Base64 sem prefixo, uma tag
pronta para colar e um trecho CSS background-image — cada uma com seu próprio botão de cópia.
Por que codificar uma imagem como URI de dados?
- Incorporar um logo ou ícone pequeno como URI de dados elimina uma requisição de rede adicional, de modo que a página ou e-mail renderiza seu primeiro quadro um pouco mais cedo.
- Uma página ou folha de estilo com imagens inline é autocontida. Funciona offline e você pode copiá-la sem arrastar uma pasta de recursos junto com ela.
- Muitos clientes de e-mail bloqueiam imagens remotas vinculadas por padrão. Incorpore um logo em Base64 e ele aparece no momento em que a mensagem é aberta, sem requisição remota necessária.
- A codificação ocorre inteiramente no seu navegador, então imagens sensíveis nunca viajam para um servidor de terceiros. Isso abrange capturas de tela, digitalizações de documentos e diagramas internos.
Usos comuns de imagens Base64
URIs de dados aparecem onde uma imagem é pequena o suficiente para que uma requisição separada custe mais do que a inflação de tamanho de ~33% que o Base64 adiciona. Três padrões surgem constantemente:
- Ícones CSS inline: um sprite ou ícone de 1–2 KB inserido em uma folha de estilo como background-image: url(data:…) para que a regra seja completamente autocontida.
- Assinaturas de e-mail e newsletters: um logo incorporado como
com uma URI data: src é renderizado mesmo quando o cliente bloqueia imagens remotas.
- Incorporação em ferramentas de build: bundlers como Webpack e Vite incorporam ativos abaixo de um limite de bytes automaticamente, e esta ferramenta permite que você visualize exatamente como essa saída se parece.
Como é uma imagem Base64?
Pegue um PNG transparente de 1×1 pixel. Seus bytes brutos são apenas 67 bytes, mas codificado ele se torna a string iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, e a URI de dados completa é data:image/png;base64,iVBORw0KGgo…. Observe que a forma codificada é aproximadamente um terço maior que o original. Esse é o compromisso por tornar dados binários seguros para incorporar diretamente em texto.
Minha imagem é enviada para algum lugar?
Não. A conversão usa a File API do navegador e a função nativa btoa para codificar a imagem inteiramente no seu dispositivo. Você pode confirmar isso: abra as ferramentas de desenvolvimento do seu navegador, mude para o painel Rede e converta uma imagem — as únicas requisições que você verá são o carregamento da página e os anúncios. Nada com formato de imagem é enviado a um servidor, o que torna isso seguro para capturas de tela, documentos de identidade e diagramas internos.
Por que a saída Base64 é maior que minha imagem original?
O Base64 representa cada três bytes de dados binários com quatro caracteres ASCII, então o texto codificado é cerca de 33% maior que o arquivo original. O indicador de tamanho da URI de dados nesta página mostra o comprimento exato inflado. É por isso que URIs de dados fazem sentido apenas para imagens pequenas — incorporar uma foto de 2 MB inflaria seu HTML ou CSS muito mais do que uma requisição separada teria custado. Como regra geral, incorpore imagens com menos de cerca de 4 KB e vincule a qualquer coisa maior.
Quais formatos de imagem posso converter?
Qualquer formato que seu navegador reconheça como imagem funciona, pois a ferramenta lê os bytes brutos em vez de decodificar a imagem. Isso abrange PNG, JPEG, GIF, WebP, SVG e BMP. O tipo MIME é lido diretamente do arquivo, então o prefixo data: sempre corresponde ao formato real — um JPEG produz data:image/jpeg e um SVG produz data:image/svg+xml. SVG merece uma nota especial: já é texto, então para SVGs uma URI de dados codificada por URL costuma ser menor que a versão Base64, embora esta ferramenta emita a forma Base64 por consistência.
Solte uma imagem, copie a URI de dados ou o trecho que você precisa e cole em seu HTML, CSS ou template de e-mail. Cada byte fica no seu dispositivo. Sem upload, sem conta, sem requisição ao servidor.