HTML a Base64: codificar marcado para data URI

Cómo codificar HTML a Base64

1. Pega tu marcado en Entrada · texto, o pulsa Ejemplo para un documento pequeño.
2. Copia el Base64 de Salida · Base64.
3. Deja Juego de caracteres en UTF-8 y declara UTF-8 en el data URI o en el documento (ver abajo).
4. Antepón data:text/html;charset=utf-8;base64, si necesitas un data URI, o pega el Base64 sin más en el campo de la API que lo pidió.

El ejemplo <!doctype html> más <h1>Hello from base64hub</h1> en dos líneas se codifica como PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+. Base64 a HTML hace el camino inverso.

Ejemplos

Para Base64, entidades como € son simple texto y se quedan tal cual; el navegador las resuelve después de decodificar. Una cadena que empieza por PCFkb2N0eXBl o PCFET0NUWVBF es un documento HTML (<!doctype o <!DOCTYPE), y PGh0bWw es <html.

Construir un URI data:text/html

Un data URI completo tiene cuatro partes: el esquema, el tipo de medio, un charset opcional y el indicador Base64.

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

Sin charset=utf-8 en el URI ni un <meta charset="utf-8"> en el documento, el navegador puede leer los bytes en una codificación heredada, y café aparece como café. Poner la etiqueta meta dentro del HTML protege el documento vaya a donde vaya.

Usos típicos:

• En un iframe, <iframe src="data:text/html;base64,..."> muestra un fragmento autocontenido sin un archivo aparte. Para HTML escrito a mano, el atributo srcdoc suele ser más sencillo, ya que no necesita ninguna codificación.
• Las pruebas de navegador y otras automatizaciones pueden cargar una página de fixture desde un data URI sin servidor web.
• Algunas API de correo, de generación de PDF y de documentos aceptan un cuerpo HTML como campo Base64, para que las comillas y los saltos de línea no necesiten escape en JSON.

Los navegadores no dejan que una página web lleve la ventana principal a una URL data:text/html, así que los enlaces y redirecciones a una de ellas fallan sin avisar o muestran un error. A los iframes no les afecta.

Tamaño y alternativas

Base64 hace el marcado alrededor de un tercio más grande: el documento de 49 bytes <!doctype html><meta charset="utf-8"><p>café</p> pasa a 68 caracteres. Para HTML casi todo ASCII, un data URI con codificación porcentual suele ser más corto, porque solo unos pocos caracteres, como #, % y los bytes no ASCII, necesitan escape. Base64 es la opción más segura cuando el marcado es grande, contiene muchos caracteres especiales o va en un campo que solo acepta Base64. El generador de data URI crea enlaces data: para HTML, CSS e imágenes, y el rendimiento de los data URI analiza la caché y el tamaño.

HTML a Base64 en 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+"

En el navegador, usa el método con TextEncoder de Base64 en JavaScript, porque btoa por sí solo estropea o rechaza los caracteres no ASCII. Consulta también Base64 en Python.

Preguntas frecuentes