Conversor de imagem para Base64 e de Base64 para imagem

O que é este conversor

Base64 é uma forma de representar dados binários — como os bytes de uma imagem — usando apenas 64 caracteres imprimíveis, o que permite colar uma imagem onde só se aceita texto: um ficheiro CSS, um documento JSON, um e-mail em HTML. Este conversor faz as duas direções: converter imagem em Base64 a partir de um PNG, JPEG, GIF, WebP, BMP, SVG ou ICO, e o inverso, transformar uma cadeia Base64 de volta numa imagem que se pode pré-visualizar e transferir.

Quando se quer incorporar uma imagem numa página sem um pedido HTTP separado, o mecanismo é o data URI: uma cadeia como data:image/png;base64,iVBORw0… que declara o tipo MIME e traz os bytes codificados logo a seguir, pronta a usar num atributo src ou numa propriedade background-image do CSS. É por isso que pesquisas como converter imagem em base64, base64 para imagem ou png para base64 acabam todas na mesma ferramenta: a codificação em si é só um passo, o que as pessoas querem é o data URI, a declaração CSS ou a tag HTML já prontos para colar.

Por baixo, a ferramenta lê o ficheiro como bytes binários em vez de o ler como texto — o método btoa nativo do navegador rejeita qualquer carácter acima de U+00FF, por isso ler uma imagem como texto corrompe-a silenciosamente — e codifica em blocos para não ultrapassar o limite da pilha de chamadas. No sentido inverso, quando se cola uma cadeia Base64 sem o prefixo data:, a ferramenta identifica o formato pelos primeiros bytes descodificados, tal como um PNG começa sempre pelos mesmos oito bytes e um JPEG por FF D8 FF.

Como converter

1. Escolha a direção e carregue a imagem: no seletor no topo, indique se quer imagem para Base64 ou Base64 para imagem; no primeiro modo, arraste um ficheiro para a zona de largar ou clique em escolher uma imagem, que aceita PNG, JPEG, GIF, WebP, BMP, SVG e ICO até 10 MB.
2. Copie o resultado que precisar: a ferramenta mostra quatro saídas separadas — o Base64 em bruto, o data URI completo, uma declaração CSS de background já pronta e uma tag HTML img — e um clique em qualquer uma copia-a; o painel de tamanho ao lado indica o nome do ficheiro, o tipo, os bytes originais, os caracteres Base64, a sobrecarga e as dimensões em pixels.
3. Faça o caminho inverso quando precisar: mude para Base64 para imagem, cole um data URI completo ou apenas a cadeia Base64 na caixa de texto, veja a pré-visualização aparecer e clique em transferir imagem para guardar o ficheiro; o botão limpar repõe tudo para começar de novo.

Quando incorporar uma imagem e quando não

Um data URI não é um ficheiro à parte, por isso não pode ficar em cache de forma independente: está embutido no HTML ou no CSS que o transporta, é descarregado outra vez sempre que esse ficheiro muda e não pode ser partilhado entre páginas diferentes que usem a mesma imagem. Um ficheiro de imagem normal, pelo contrário, fica em cache uma vez e é reaproveitado por qualquer página que o referencie.

Uma imagem incorporada também não pode ser carregada de forma preguiçosa nem responsiva: não há carregamento diferido nem srcset para aplicar a uma cadeia de texto, por isso todos os bytes chegam ao navegador mesmo que a imagem esteja fora do ecrã ou o ecrã seja pequeno demais para precisar da versão grande. Incorporada numa folha de estilos, a imagem fica ainda dentro de um recurso bloqueante de renderização, o que atrasa o primeiro desenho da página até o CSS inteiro estar disponível.

A regra prática: incorpore imagens pequenas, estáticas e sempre necessárias — um ícone, um gradiente de um pixel, um logótipo que aparece em todas as páginas — e mantenha fotografias e qualquer imagem reutilizada entre páginas como ficheiros normais. Vale a pena lembrar que o texto descodificado ocupa mesmo um terço a mais, tanto em memória como no próprio ficheiro CSS ou HTML que depois se tem de editar.

O tamanho, em números

A codificação Base64 agrupa os bytes de três em três e escreve-os como quatro caracteres de um alfabeto de 64 símbolos, por isso o comprimento codificado é exatamente 4 × arredondar-para-cima(n / 3) caracteres para n bytes, confirmado para todos os comprimentos entre 0 e 4000. Quando o número de bytes não é múltiplo de três, o resultado é completado com um ou dois caracteres =: 3 bytes dão 4 caracteres sem preenchimento, 4 bytes dão 8 caracteres com dois =, 5 bytes dão 8 caracteres com um =. No limite, a sobrecarga é exatamente um terço, 33,33%.

É esta a conta que está por trás do conselho repetido em todo o lado, de que Base64 torna uma imagem 33% maior, e é verdadeira para o texto descodificado, mas quase falsa para o que realmente viaja na rede, porque as respostas HTTP normais seguem comprimidas com gzip. O alfabeto Base64 usa exatamente 64 símbolos distintos, ou seja, exatamente 6 bits de informação por cada carácter de 8 bits — medido diretamente: 64 símbolos, log2(64) = 6,00 bits — e é precisamente essa regularidade que a etapa de Huffman do Deflate recupera quase por completo.

Medido em imagens PNG de tamanho crescente, comparando o gzip do ficheiro original com o gzip da sua versão em Base64: 8×8 pixels, +11,3%; 16×16, +4,2%; 32×32, +1,5%; 64×64, +0,9%; 128×128, +0,9%; 256×256, +0,9%; 512×512, +0,9%. Em 60 000 bytes de dados aleatórios incompressíveis, a Base64 chega aos +33,33% em bruto, mas a apenas +0,97% depois de gzip.

Ou seja, a partir de cerca de 64×64 pixels, incorporar uma imagem custa perto de 1% numa resposta HTTP normal, não os 33% do costume. Leia esse valor como «cerca de um por cento» e não como uma constante: depende da implementação de Deflate que comprime a resposta, e duas delas medidas aqui diferem nas décimas. A sobrecarga só pesa mesmo em payloads muito pequenos, onde é a própria tabela do compressor que domina o resultado.

Porque é gratuito

Todo o trabalho — ler o ficheiro, codificar ou descodificar, gerar a pré-visualização — acontece no seu navegador; nenhuma imagem é alguma vez enviada para um servidor, por isso não há custo de largura de banda a repercutir em contas, limites de uso ou marcas de água. Não é preciso criar conta nem indicar um e-mail.

A correção da codificação e da descodificação foi verificada contra o módulo base64 da biblioteca padrão do Python, em milhares de entradas binárias aleatórias de todos os comprimentos, com sucesso total na viagem de ida e volta.