Codificar e decodificar Base64

O Base64, definido na RFC 4648, escreve bytes quaisquer usando 64 caracteres ASCII imprimíveis: A–Z, a–z, 0–9, + e /. Cada grupo de três bytes (24 bits) é dividido em quatro números de 6 bits, e cada número escolhe um caractere do alfabeto. Quando o tamanho da entrada não é múltiplo de três, o último grupo recebe um ou dois sinais = de preenchimento. O resultado é sempre cerca de 33% maior que a entrada: 4 caracteres para cada 3 bytes.

Ele existe porque muitos canais foram criados para texto. E-mail (MIME), URLs data: em HTML e CSS, campos JSON que carregam imagens ou certificados e cabeçalhos de autenticação HTTP Basic usam Base64 para transportar dados binários com segurança. Não é criptografia e não esconde nada; para decodificar não é preciso chave.

O Base64 codifica bytes, não letras, então o texto precisa primeiro ser transformado em bytes. Esta ferramenta sempre usa UTF-8, a codificação em que a web funciona: o é vira dois bytes e um emoji, quatro. A função btoa do navegador, sozinha, gera erro em qualquer caractere acima de U+00FF, e por isso codificadores ingênuos falham com acentos e emojis; aqui o texto passa antes pelo TextEncoder, e a decodificação faz o caminho inverso com o TextDecoder. Se os bytes decodificados não forem UTF-8 válido (uma imagem, um arquivo zip), a ferramenta os mostra em hexadecimal em vez de texto ilegível.

O Base64 padrão usa + e /, que têm significado em URLs e nomes de arquivo. O alfabeto seguro para URL, da seção 5 da RFC 4648, os substitui por - e _, e o preenchimento geralmente é omitido. Os JSON Web Tokens usam exatamente essa forma. O decodificador aceita os dois alfabetos e a falta de preenchimento, então você pode colar qualquer um.

Escolha um arquivo e a ferramenta o lê localmente com FileReader e devolve o Base64 dele, ou uma URL data: completa com o tipo MIME do arquivo, pronta para colar em uma tag img ou em um background de CSS. Imagens embutidas economizam uma requisição HTTP, mas ficam um terço maiores e não podem ser armazenadas em cache separadamente, por isso servem para ícones pequenos, não para fotos. Para imagens com pré-visualização e trechos de HTML e CSS prontos, use Imagem para Base64.