Conversor de imagem para Base64

Como converter uma imagem em Base64

1. Em Imagem → Base64, larga uma imagem na zona de largar ou clica nela para escolher uma (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
2. Escolhe o Resultado: Data URI (data:image/png;base64,…), Apenas Base64, CSS background-image ou Etiqueta HTML , que inclui também a largura e a altura da imagem.
3. Clica em Copiar, ou em Transferir como .txt para resultados longos.

A linha por baixo da zona de largar indica o formato real (lido a partir dos bytes do ficheiro, não do nome), as dimensões, o tamanho do ficheiro e o comprimento do data URI.

Como converter Base64 de volta em imagem

1. Em Base64 → imagem, cola o texto em Texto Base64 ou data URI. Podes colar uma cadeia Base64 simples, um data URI completo ou até uma regra CSS ou uma etiqueta <img> inteira: o data URI é encontrado lá dentro. As quebras de linha e os espaços são ignorados, e o Base64 seguro para URL (com - e _) também funciona.
2. Clica em Descodificar imagem. Aparecem a pré-visualização, o tipo, as dimensões e o tamanho.
3. Clica em Transferir imagem para a guardar com a extensão de ficheiro certa.

O tipo é verificado pelos «bytes mágicos» do ficheiro, a assinatura no início de cada formato de imagem (por exemplo 89 50 4E 47 para PNG ou FF D8 FF para JPEG). Se um data URI disser que é image/jpeg mas contiver um PNG, a ferramenta avisa-te e usa o tipo real. Tudo o que não for uma imagem reconhecida é recusado, e o limite é de 20 MB de dados de imagem.

Como funciona o Base64

O Base64 transforma cada 3 bytes de um ficheiro em 4 caracteres imprimíveis tirados de A–Z, a–z, 0–9, + e /, com = como preenchimento no fim. É por isso que o texto codificado é cerca de 33 % maior do que o ficheiro: um ícone de 30 KB passa a cerca de 40 KB de texto. Um data URI acrescenta um pequeno cabeçalho, data:<type>;base64,, para que o navegador saiba como o ler.

Quando incorporar imagens como data URI

Os data URI são práticos para:

• pequenos ícones, logótipos e fundos em CSS, para poupar um pedido;
• emails em HTML e documentos HTML num único ficheiro que têm de funcionar sem ficheiros externos;
• APIs JSON e ficheiros de configuração que só podem transportar texto.

Não são boa ideia para fotos grandes. O texto é um terço maior do que o ficheiro, não pode ser guardado em cache separadamente da página ou da folha de estilos que o contém e atrasa a apresentação da página. Acima de cerca de 10 a 100 KB, um ficheiro de imagem normal, servido com uma boa cache, costuma ser melhor, e é por isso que a ferramenta mostra um lembrete para imagens com mais de 100 KB.

Tudo corre no teu navegador: as imagens e o texto colado nunca são enviados.