Como o Base64 funciona por dentro
O Base64 pega os bytes originais e os reagrupa em blocos de 6 bits. Como 6 bits produzem 64 combinações possíveis, cada bloco vira um caractere de um alfabeto fixo: A-Z, a-z, 0-9, + e /. Na prática, cada 3 bytes de entrada viram 4 caracteres de saída — daí o crescimento de aproximadamente 33% no tamanho.
Quando os bytes não fecham um grupo de 3, entra o padding: um ou dois sinais de = no final, só para completar o bloco de 4 caracteres. Por isso todo Base64 padrão tem comprimento múltiplo de 4, e por isso um texto colado pela metade quase sempre falha na decodificação.
| Texto | Bytes (UTF-8) | Base64 |
|---|---|---|
a | 1 | YQ== |
ab | 2 | YWI= |
abc | 3 | YWJj |
Olá | 4 (o á ocupa 2) | T2zDoQ== |
ação | 6 | YcOnw6Nv |
São Paulo | 10 | U8OjbyBQYXVsbw== |
Repare em Olá: são três letras, mas quatro bytes. Acentos, cedilha e emoji ocupam mais de um byte em UTF-8, e é exatamente aí que ferramentas mal feitas quebram.
Passo a passo
- Para codificar: escreva na caixa de cima e clique em Base64 encode ou URL encode. O resultado aparece na caixa de baixo.
- Para decodificar: cole o conteúdo codificado na caixa de baixo e clique em Base64 decode ou URL decode. O texto legível volta para a caixa de cima.
- Os botões Copiar de cada caixa levam o conteúdo para a área de transferência sem seleção manual.
- Tudo roda no navegador. Nada é enviado para servidor, o que importa quando o conteúdo é um token de sessão ou um payload de webhook.
Acentos e emoji: o bug clássico do btoa
O JavaScript tem a função btoa(), que só aceita caracteres de 0 a 255. Chamar btoa("ação") lança InvalidCharacterError, e muitas ferramentas antigas contornam isso descartando bits — o resultado decodifica como a��o.
A solução correta é converter o texto para bytes UTF-8 antes de codificar, com TextEncoder, e fazer o caminho inverso com TextDecoder na volta. É o que esta página faz, então coração, ç, ã e emoji atravessam íntegros nas duas direções.
Onde o Base64 aparece no dia a dia dev
- Imagens embutidas:
data:image/png;base64,...em CSS e HTML — a imagem vira texto e viaja junto com a página, economizando uma requisição. Só compensa em arquivos pequenos, tipo ícones abaixo de 5 KB; acima disso os 33% extras e a impossibilidade de cachear separadamente pesam mais que a requisição economizada. - Tokens JWT: as três partes separadas por ponto são Base64URL. Cole cabeçalho e payload aqui para inspecionar o conteúdo — a terceira parte é a assinatura binária e não vira texto legível.
- Autenticação básica: o cabeçalho
Authorization: Basiccarregausuário:senhaem Base64.admin:senha123viraYWRtaW46c2VuaGExMjM=, o que qualquer um reverte — daí a exigência absoluta de HTTPS. - Anexos de e-mail: todo anexo binário viaja como Base64 dentro do MIME, porque o protocolo SMTP nasceu assumindo texto de 7 bits.
- Certificados e chaves PEM: o miolo entre
-----BEGIN CERTIFICATE-----e-----END-----é Base64 puro. - Webhooks e filas: integrações que trafegam arquivo dentro de um campo JSON costumam mandar o conteúdo em Base64, já que JSON não tem tipo binário.
Base64 não é segurança
Vale repetir com todas as letras: Base64 é codificação reversível por definição, sem chave nenhuma. "Senha guardada em Base64 no banco" é senha em texto claro com um passo a mais. O mesmo vale para "esconder" o CPF do cliente numa URL ou mascarar uma chave de API no código do front-end — o valor está lá, visível para quem abrir o DevTools.
Para senhas, o caminho é hash com algoritmo próprio para isso (bcrypt, scrypt, Argon2). Para dados que precisam voltar ao original, é criptografia de verdade, com chave gerenciada fora do código. Base64 entra depois, se você precisar transportar o resultado binário da criptografia por um canal de texto.
Base64, Base64URL e hexadecimal
| Codificação | Alfabeto | Aumento de tamanho | Uso típico |
|---|---|---|---|
| Base64 padrão | A-Z a-z 0-9 + / = | +33% | E-mail, data URI, PEM, campos JSON |
| Base64URL | A-Z a-z 0-9 - _ | +33% | JWT e valores dentro de URLs, onde + e / atrapalham |
| Hexadecimal | 0-9 a-f | +100% | Hashes, cores, dumps de memória — mais legível, mas o dobro do tamanho |
| URL encode | texto + %XX | variável | Parâmetros de URL e formulários |
URL encode: quando e por quê
Use sempre que um valor com espaço, acento ou símbolo entra numa URL: busca interna, UTMs com nome de campanha composto, links de WhatsApp com mensagem pronta. O que acontece é a substituição do caractere pelo seu byte em hexadecimal, precedido de %.
| Caractere | Codificado | Por que precisa |
|---|---|---|
| espaço | %20 | Encerra a URL em muitos parsers e clientes de e-mail |
& | %26 | Separa parâmetros — sem escape, o valor é cortado ali |
# | %23 | Inicia o fragmento; tudo depois dele nem chega ao servidor |
+ | %2B | Em formulários, + significa espaço — comum quebrar telefone +55 |
ç | %C3%A7 | Dois bytes em UTF-8, logo dois grupos percentuais |
/ | %2F | Separador de caminho; sem escape vira uma rota diferente |
Assim, promoção verão vira promo%C3%A7%C3%A3o%20ver%C3%A3o e chega intacto ao servidor. E pedido#42 vira pedido%2342 — sem isso, o servidor receberia só pedido.
Erros comuns na decodificação
- Texto cortado. Base64 sem múltiplo de 4 caracteres falha. Confira se copiou até o último
=. - Quebras de linha coladas junto. Base64 de e-mail vem quebrado a cada 76 caracteres; junte tudo numa linha antes de decodificar.
- Base64URL colado como Base64. Se aparecem
-e_, troque por+e/antes. - Percentual órfão. No URL decode, um
%solto (sem dois dígitos hex depois) invalida a string inteira. - Decodificar duas vezes. Se o resultado ainda parece codificado, provavelmente estava — mas se já era texto normal, decodificar de novo só produz lixo.
Perguntas frequentes
Para que serve o sinal de igual no final do Base64?
É o padding. O Base64 trabalha em blocos de 3 bytes que viram 4 caracteres; quando o último bloco fica incompleto, entram um ou dois = para fechar o grupo. Por isso todo Base64 padrão tem tamanho múltiplo de 4.
Qual a diferença entre Base64 e Base64URL?
O Base64URL troca + e / por - e _, e normalmente remove o padding, porque + e / têm significado especial dentro de uma URL. É a variante usada em tokens JWT e em parâmetros de link.
Base64 aumenta o tamanho do arquivo?
Sim, em cerca de 33%: cada 3 bytes viram 4 caracteres. Uma imagem de 300 KB embutida como data URI ocupa aproximadamente 400 KB no HTML ou CSS. Por isso só compensa embutir arquivos pequenos.
Posso decodificar um token JWT aqui?
Sim, mas parte por parte: separe o token nos trechos delimitados por ponto e cole cada um. O primeiro é o cabeçalho, o segundo é o payload. O terceiro é a assinatura binária e não vira texto legível.
Quando devo usar URL encode em vez de Base64?
URL encode quando o valor vai dentro de um endereço — parâmetros de busca, UTMs, links de WhatsApp com mensagem pronta. Base64 quando você precisa transportar dados binários ou com quebras de linha por um canal que só aceita texto simples.