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
- Clique em "Selecionar Imagem" e escolha o arquivo no seu computador.
- Aguarde a conversão, que acontece na hora dentro do navegador.
- Confira o preview da imagem para garantir que enviou o arquivo certo.
- Veja a string completa no campo "String Base64", com o total de caracteres exibido ao lado.
- Clique em "Copiar Tudo" para levar o código para a área de transferência.
- 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.
| Formato | Suportado | Bom para Base64 |
|---|---|---|
| PNG | Sim | Ícones e imagens com transparência |
| JPG | Sim | Fotos pequenas |
| WEBP | Sim | Gráficos leves |
| SVG | Sim | Ícones vetoriais |
| GIF | Sim | Animações curtas e simples |
Como o campo de upload aceita image/*, a ferramenta trabalha com qualquer imagem que o seu navegador reconheça.