Imagem para Base64
Carregue uma imagem e obtenha a sua representação em Base64, com a variante pronta a colar em CSS ou numa etiqueta img.
Arraste a sua imagem aqui ou clique para escolher
Aceita qualquer formato de imagem, incluindo SVG e GIF
O seu ficheiro 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 carateres imprimíveis. Cada 3 bytes do ficheiro tornam-se 4 carateres de texto, por isso o resultado ocupa cerca de 33 % mais do que a imagem original.
comprimento Base64 ≈ ceil(bytes ÷ 3) × 4
Lemos o ficheiro com FileReader.readAsDataURL, que devolve o binário exato codificado, sem recomprimir nem tocar nos píxeis. Por isso o data URI mantém o formato e a qualidade originais.
sobrecarga % = (comprimento do texto − bytes) ÷ bytes × 100
Um data URI evita um pedido 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 em separado e atrasa a renderização.
Exemplo prático
Um ícone PNG de 900 bytes torna-se cerca de 1200 carateres de Base64 (mais 33 %), que pode colar diretamente na folha de estilos e poupar um pedido ao servidor.
Perguntas frequentes
- O Base64 comprime a imagem?
- Não, pelo contrário: aumenta-a sempre cerca de 33 %. Serve para incorporar a imagem dentro de um ficheiro 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 ficheiro à parte, com cache independente.
- A minha imagem é alterada?
- Não. São codificados os bytes exatos do ficheiro original, por isso o formato, a qualidade e os metadados mantêm-se 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.