Conversor de Imagem para Base64 – Codificar Imagens como Data URIs

Porque Base64 é uma codificação, não um compressor. Ela representa 3 bytes de binário usando 4 caracteres ASCII imprimíveis, então a saída é sempre cerca de 33% mais longa que a entrada, mais alguns bytes para o prefixo data:. Esse crescimento é inerente ao formato, e não há nenhuma configuração que evite isso. Se você precisa de um arquivo menor, comprima a imagem antes de codificá-la — a etapa de codificação só pode aumentar o tamanho.

Incorpore quando o recurso for pequeno e sempre necessário: ícones, espaçadores de 1x1, pequenas texturas de fundo, geralmente abaixo de 10 KB. Abaixo disso, economizar uma requisição HTTP costuma valer mais que a penalidade de 33% no tamanho. Não incorpore fotos, imagens principais, ou qualquer coisa acima de cerca de 100 KB. Um data URI grande não pode ser armazenado em cache de forma independente, precisa ser baixado novamente a cada revisão de página ou folha de estilo, e bloqueia o analisador até ser lido por completo.

Muitas vezes não. O Gmail remove data URIs de tags img completamente, e os clientes de desktop do Outlook nunca deram suporte confiável a eles. O Apple Mail e alguns webmails renderizam sim. A abordagem confiável para e-mail continua sendo uma URL de imagem hospedada, ou um anexo CID referenciado com cid: no src. Teste nos clientes que os seus destinatários realmente usam antes de confiar em dados incorporados.

Sim, e é sem perdas — os bytes decodificados são idênticos ao arquivo original, incluindo EXIF e dados de perfil de cor. Cole um data URI completo na barra de endereço de um navegador e a imagem renderiza. Em código, atob() em JavaScript ou base64 -d na linha de comando fazem isso. Note que a saída bruta nesta página omite o prefixo data:, então adicione-o de volta se o destino esperar um URI completo.

Não. O SVG já é texto, então Base64 adiciona 33% à toa. Cole o markup diretamente no seu HTML em vez disso, o que também permite que o CSS estilize as formas e o JavaScript as alcance. Para fundos de CSS, use um SVG codificado por URL em url() em vez de um em Base64 — ele fica menor e comprime melhor com gzip. Base64 para SVG só faz sentido onde um URI estrito é exigido e a codificação percentual não é uma opção.

Não há limite na especificação de HTML ou CSS, e navegadores modernos lidam com data URIs de vários megabytes em atributos src. Os limites práticos estão em outro lugar: barras de endereço tipicamente cortam por volta de 2 MB ou menos, algumas configurações de servidor e CDN limitam o tamanho de cabeçalhos e requisições, e strings muito longas deixam a análise perceptivelmente mais lenta. Esta ferramenta não impõe nenhum limite próprio, mas avisa acima de 100 KB, porque é a partir daí que incorporar deixa de valer a pena.

Não. O arquivo é lido com a API FileReader do navegador, que opera sobre o identificador de arquivo local, e a string resultante fica na memória da página. Nada é enviado pela rede, e não há nenhum componente do lado do servidor, então a ferramenta continua funcionando offline depois que a página carrega. As cópias para a área de transferência passam pela área de transferência padrão do navegador, não por nós.

Todos eles, para imagens — data URIs em src de img e url() de CSS funcionam desde o IE8 e têm suporte universal hoje. A área de transferência é a parte mais nova: navigator.clipboard exige um contexto seguro, então em HTTP puro ou em navegadores mais antigos esta página recorre a selecionar a textarea e usar document.execCommand('copy'). Se os dois caminhos falharem, você verá uma mensagem pedindo para selecionar e copiar o texto manualmente.