Base64 es una forma de escribir cualquier cosa (un texto, una imagen, un archivo) usando solo letras y números. Sirve cuando algo tiene que viajar por un canal que solo admite texto. El codificador de NEUBOX lo hace en tu navegador, en los dos sentidos.
Herramienta: Codificador y decodificador Base64
Paso 1. Texto, en cualquier dirección
Funciona en los dos sentidos: pega texto normal y te da el código, o pega el código y te devuelve el texto.
Un detalle que importa con el español: la codificación debe ser UTF-8. Con otra, los acentos y las eñes salen mal al decodificar.
Base64 no es cifrado
Esto es lo más importante de todo el tutorial, y es la confusión que provoca problemas de seguridad reales.
Base64 no protege nada. No es una contraseña, no es una clave. Es una forma distinta de escribir lo mismo, y cualquiera lo revierte en dos segundos con esta misma herramienta.
Que parezca ilegible no significa que esté protegido. Nunca guardes ni mandes contraseñas, llaves de acceso o datos personales “protegidos” en Base64. Es como escribir la contraseña al revés y sentirse seguro.
Paso 2. Archivos y data URI
La pestaña de archivo convierte una imagen o un documento en texto. La de data URI te da ese texto ya envuelto para pegarlo directo en el HTML o el CSS, sin necesidad de un archivo aparte.
Sirve para un icono chico, un patrón de fondo, o cuando el correo o la plantilla no admiten archivos adjuntos.
Cuándo conviene y cuándo no
Base64 hace que el archivo pese alrededor de un tercio más. No es un método de compresión, es lo contrario.
- Conviene con imágenes muy chicas, de unos pocos kilobytes: te ahorras una petición al servidor y sale ganando.
- No conviene con fotografías. Una foto en Base64 hace enorme el archivo HTML, y el navegador no puede guardarla en memoria por separado, así que la vuelve a descargar en cada página.
Herramientas que se usan junto con esta
- Comprimir imágenes, para dejar el icono ligero antes de codificarlo.
- Minificador de código, si estás optimizando el sitio.
En la página de la herramienta está la guía completa, con los usos comunes en desarrollo web.