Imagem para Base64
Envie uma imagem e obtenha a sua representação em Base64, com a variante pronta para colar em CSS ou em uma tag img.
Arraste a sua imagem aqui ou clique para escolher
Aceita qualquer formato de imagem, incluindo SVG e GIF
O seu arquivo nunca sai do navegador: todo o processamento acontece no seu dispositivo.
O que é Base64 e quando compensa usá-lo
O Base64 representa dados binários usando apenas 64 caracteres imprimíveis. Cada 3 bytes do arquivo tornam-se 4 caracteres de texto, por isso o resultado ocupa cerca de 33% mais do que a imagem original.
comprimento Base64 ≈ ceil(bytes ÷ 3) × 4
Lemos o arquivo com FileReader.readAsDataURL, que devolve o binário exato codificado, sem recomprimir nem tocar nos pixels. Por isso o data URI mantém o formato e a qualidade originais.
sobrecarga % = (comprimento do texto − bytes) ÷ bytes × 100
Um data URI evita uma requisição HTTP, o que compensa em ícones muito pequenos incorporados em CSS. Para imagens grandes é contraproducente: engorda o HTML ou o CSS, não é colocado em cache separadamente e atrasa a renderização.
Exemplo prático
Um ícone PNG de 900 bytes se torna cerca de 1200 caracteres de Base64 (mais 33%), que você pode colar diretamente na folha de estilos e economizar uma requisição ao servidor.
Perguntas frequentes
- O Base64 comprime a imagem?
- Não, pelo contrário: sempre a aumenta em cerca de 33%. Serve para incorporar a imagem dentro de um arquivo de texto, não para reduzir o peso.
- Quando vale a pena incorporar uma imagem?
- Com ícones e padrões de poucos kilobytes usados em todas as páginas. A partir de uns 5-10 KB costuma ser melhor um arquivo separado, com cache independente.
- A minha imagem é alterada?
- Não. São codificados os bytes exatos do arquivo original, por isso o formato, a qualidade e os metadados são mantidos intactos.
- Posso usar com SVG?
- Sim, e funciona bem porque os SVG costumam ser pequenos. Para SVG também existe a opção de o incorporar sem codificar, mas o Base64 é o mais compatível.