Imagen a Base64

O que é o conversor de Imagem para Base64

O conversor de Imagem para Base64 transforma um arquivo de imagem em uma string de texto (data URI) que você cola direto no seu HTML ou CSS. Em vez de referenciar a imagem por um arquivo externo, você a incorpora como código dentro da própria página.

A ferramenta gera uma string no formato data:image/png;base64,iVBORw0KGgo..., chamada de data URI. Ela é usada por desenvolvedores front-end, autores de e-mails HTML e quem monta protótipos ou temas de CSS. O problema que resolve é simples: eliminar uma requisição HTTP separada para imagens pequenas, como ícones, spinners e fundos leves, embutindo o dado da imagem no próprio código.

Como usar

1. Clique em "Selecionar Imagem" e escolha o arquivo no seu computador.
2. Aguarde a conversão, que acontece na hora dentro do navegador.
3. Confira o preview da imagem para garantir que enviou o arquivo certo.
4. Veja a string completa no campo "String Base64", com o total de caracteres exibido ao lado.
5. Clique em "Copiar Tudo" para levar o código para a área de transferência.
6. Cole a string no seu CSS ou HTML.

Exemplo prático: você tem um ícone logo.png de 24x24 pixels. Ao enviá-lo, a ferramenta devolve algo como data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA.... Você cola isso no CSS assim: background-image: url('data:image/png;base64,iVBORw0KGgo...');. Pronto, o ícone aparece sem precisar hospedar um arquivo separado.

Como funciona

A ferramenta usa o FileReader do navegador com o método readAsDataURL. Ele lê os bytes do arquivo original e os codifica em Base64, montando a data URI com o tipo MIME correto na frente. Todo esse processo acontece localmente, no seu navegador. O arquivo não é enviado para nenhum servidor, o que mantém sua imagem privada.

A codificação Base64 não recomprime nem altera a imagem: ela apenas representa os mesmos bytes em texto. Por isso não há perda de qualidade nesse passo. A contrapartida é o tamanho: uma string Base64 fica cerca de 33% maior que o arquivo original, então o recurso é indicado para imagens pequenas, não para fotos grandes.

O campo de saída mostra a quantidade de caracteres para você avaliar se a string cabe bem no seu projeto.

Como o campo de upload aceita image/*, a ferramenta trabalha com qualquer imagem que o seu navegador reconheça.