HTML para Base64: codificar markup para data URIs

Como codificar HTML em Base64

1. Cole o markup em Entrada · texto, ou clique em Exemplo para um documento pequeno.
2. Copie o Base64 de Saída · Base64.
3. Mantenha Charset em UTF-8 e declare UTF-8 no data URI ou no documento (veja abaixo).
4. Acrescente data:text/html;charset=utf-8;base64, no início se precisar de um data URI, ou cole o Base64 puro no campo da API que o pediu.

O exemplo <!doctype html> mais <h1>Hello from base64hub</h1>, em duas linhas, vira PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+. O Base64 para HTML faz o caminho inverso.

Exemplos

Entidades como € são só texto para o Base64 e ficam como estão; o navegador as resolve depois de decodificar. Uma string que começa com PCFkb2N0eXBl ou PCFET0NUWVBF é um documento HTML (<!doctype ou <!DOCTYPE), e PGh0bWw é <html.

Montar um URI data:text/html

Um data URI completo tem quatro partes: o esquema, o media type, um charset opcional e a marcação de Base64.

data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+

Sem charset=utf-8 no URI nem <meta charset="utf-8"> no documento, o navegador pode ler os bytes numa codificação legada, e café aparece como café. Colocar a meta tag dentro do HTML protege o documento onde quer que ele vá parar.

Usos típicos:

• Num iframe, <iframe src="data:text/html;base64,..."> mostra um trecho autossuficiente sem arquivo separado. Para HTML escrito à mão, o atributo srcdoc costuma ser mais simples, porque não exige codificação nenhuma.
• Testes de navegador e outras automações podem carregar uma página de fixture a partir de um data URI sem servidor web.
• Algumas APIs de e-mail, de renderização de PDF e de documentos aceitam o corpo HTML como campo Base64, para que aspas e quebras de linha não precisem de escape no JSON.

Os navegadores não deixam uma página web navegar a janela principal para uma URL data:text/html, então links e redirecionamentos para uma delas falham em silêncio ou mostram um erro. Iframes não são afetados.

Tamanho e alternativas

O Base64 deixa o markup cerca de um terço maior: o documento de 49 bytes <!doctype html><meta charset="utf-8"><p>café</p> vira 68 caracteres. Para HTML quase todo em ASCII, um data URI com percent-encoding costuma ser mais curto, porque só alguns caracteres, como #, % e bytes não ASCII, precisam de escape. O Base64 é a escolha mais segura quando o markup é grande, tem muitos caracteres especiais ou vai para um campo que só aceita Base64. O gerador de data URI monta links data: para HTML, CSS e imagens, e desempenho de data URIs trata de cache e de trade-offs de tamanho.

HTML para Base64 no código

import base64

html = '<!doctype html><meta charset="utf-8"><p>café</p>'
uri = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode("utf-8")).decode()

// Node.js
const html = "<p>café</p>";
const uri = "data:text/html;charset=utf-8;base64," + Buffer.from(html, "utf8").toString("base64");
// "data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+"

No navegador, use a abordagem com TextEncoder de Base64 em JavaScript, já que o btoa sozinho embaralha ou rejeita caracteres não ASCII. Veja também Base64 em Python.

Perguntas frequentes