Qué es Base64
Base64 es una forma de escribir datos binarios usando caracteres ordinarios: letras, dígitos y unos pocos símbolos. Una imagen codificada de esta manera se convierte en una cadena larga que puedes colocar en un URI de datos, por ejemplo dentro de una etiqueta img o de un fondo CSS.
Un URI de datos empieza con un breve prefijo que indica el tipo de archivo, seguido del texto codificado. El navegador lo decodifica y muestra la imagen sin hacer una solicitud aparte para un archivo.
Buenos usos
- Iconos o marcadores de posición muy pequeños que ahorran una solicitud adicional
- Correos HTML o páginas de un solo archivo donde los archivos externos resultan incómodos
- Datos de prueba, ejemplos de documentación y cargas JSON, donde una referencia a un archivo no estaría disponible
- Imágenes pequeñas en una hoja de estilos que debe funcionar sin ningún otro archivo
Inconvenientes
El texto es aproximadamente un tercio más grande que el archivo original. El navegador no puede guardar en caché una imagen incrustada por separado de la página, así que se vuelve a descargar cada vez que se descarga el HTML o el CSS. Las cadenas largas también hacen que el HTML y el CSS sean más pesados de analizar y más difíciles de leer y editar.
Algunos programas de correo bloquean o limitan las imágenes incrustadas, así que haz pruebas antes de confiar en ellas en un boletín.
Como regla general, incrusta solo imágenes pequeñas, de hasta unos pocos kilobytes. Sirve todo lo más grande como un archivo normal, donde puede almacenarse en caché, comprimirse y cargarse de forma diferida. Los servidores modernos también permiten que varios archivos viajen por una misma conexión, así que el ahorro de evitar una solicitud suele ser menor que antes.
Un ejemplo práctico (ilustrativo)
Supón que tienes un icono de flecha de 2 KB usado en un solo botón. Codificado, se convierte en aproximadamente 2,7 KB de texto en tu CSS. Está bien, y ahorras una solicitud.
Ahora supón que incrustas una foto de 300 KB. El texto crece hasta unos 400 KB dentro de tu HTML. En cada visita hay que descargar y analizar todo antes de que la página pueda terminar, y la foto no puede guardarse en caché por sí sola. Un archivo normal, comprimido antes, es la mejor opción.
Flujo de trabajo paso a paso
- Haz la imagen lo más pequeña posible primero: redimensiónala y comprímela.
- Comprueba el tamaño final del archivo. Si supera unos pocos kilobytes, considera un archivo normal en su lugar.
- Conviértela a Base64 y elige la salida que necesitas: URI de datos, etiqueta img de HTML, fondo CSS o Base64 sin procesar.
- Pégala en tu página, hoja de estilos o JSON.
- Abre la página y confirma que la imagen se muestra.
Errores comunes
- Incrustar fotos grandes, lo que infla la página.
- Codificar una imagen antes de optimizarla, de modo que incrustas bytes innecesarios.
- Repetir la misma cadena larga en varios lugares en lugar de definirla una vez, por ejemplo como una clase CSS.
- Olvidar el prefijo del URI de datos al usar Base64 sin procesar en HTML o CSS.
- Tratar Base64 como una forma de seguridad. Es solo una codificación y cualquiera puede decodificarla.
- Pegar una cadena muy larga en un lugar que limita la longitud de línea o el tamaño del campo, lo que puede cortar la imagen.
Lista de comprobación rápida
- ¿La imagen pesa solo unos pocos kilobytes?
- ¿Ya está redimensionada y comprimida?
- ¿Realmente necesita evitar un archivo aparte?
- ¿Has probado el resultado en el lugar donde se usará?
- ¿Se reutilizará la imagen en varias páginas? En ese caso, probablemente sea mejor un archivo normal.
Hazlo con DoneImg en tu navegador
Abre la herramienta de Base64 y añade tu imagen. Elige la salida que necesitas: un URI de datos, una etiqueta img de HTML ya preparada, una regla de fondo CSS o el texto Base64 sin procesar, y cópiala. Si la cadena parece muy larga, vuelve atrás y usa primero las herramientas de redimensionar y comprimir.
La conversión ocurre en tu navegador, así que la imagen nunca se sube y permanece en tu dispositivo.
Preguntas frecuentes
¿Base64 hace más pequeña una imagen?
No. Hace los datos aproximadamente un tercio más grandes, porque almacena el archivo como texto.
¿Puedo convertir Base64 de nuevo en una imagen?
Sí. Base64 es reversible, y los navegadores decodifican automáticamente un URI de datos.
¿Es Base64 buena opción para un logotipo en el encabezado de mi sitio web?
Normalmente no. Un logotipo que aparece en todas las páginas es mejor como archivo normal o como SVG, para que el navegador pueda guardarlo en caché una vez y reutilizarlo en todas partes.
¿Qué tipo de archivo debo codificar?
Usa el que pese menos para esa imagen: SVG para formas sencillas, WebP o PNG para gráficos pequeños, y JPG o WebP para fotos. Codificar no cambia la imagen, solo cómo se escribe.