Base64 DataURI Bench
Mirá la sobrecarga exacta antes de incrustar una imagen o fuente como Data URI. Tu archivo nunca sale de tu navegador.
Archivo
Arrastrá una imagen o fuente acá, o
Análisis de sobrecarga
¿Qué es un Data URI en Base64?
Un Data URI te permite incrustar un archivo —una imagen o una fuente, por ejemplo— directamente dentro de tu HTML o CSS como un bloque de texto, en vez de enlazar a un archivo aparte que el navegador tiene que pedir. Para convertir datos binarios en caracteres de texto seguros hace falta codificarlos en Base64, y eso es justamente lo que hace que el texto resultante sea más largo que el archivo original. Esta herramienta te muestra cuánto más largo exactamente, y si conviene incrustarlo o no.
Cómo usar Base64 DataURI Bench
- Arrastrá una imagen o fuente al panel Archivo, o hacé clic en "elegí un archivo" (o probá con Ejemplo).
- Mirá el detalle de tamaños en el panel Análisis de sobrecarga: tamaño original, tamaño en Base64, sobrecarga y Data URI completo.
- Leé el veredicto para saber, en lenguaje simple, si conviene incrustar ese archivo.
- Hacé clic en Copiar Data URI para copiar el texto listo para pegar en tu HTML o CSS.
Cómo se calcula la sobrecarga
Base64 (RFC 2045) representa datos binarios usando solo 64 caracteres imprimibles, empaquetando cada 3 bytes crudos en 4 caracteres de salida:
tamaño_codificado = ceil(tamaño_original / 3) * 4 // Ejemplo: un ícono de 300 bytes ceil(300 / 3) * 4 = 400 caracteres → +33.33% de sobrecarga // Ejemplo: un ícono de 301 bytes (no múltiplo de 3) ceil(301 / 3) * 4 = 404 caracteres (incluye relleno "=") → +34.22% de sobrecarga
La sobrecarga siempre ronda el 33%, pero el porcentaje exacto varía levemente según el tamaño del archivo cuando no es múltiplo de 3 bytes, por el carácter de relleno agregado al final. Esta herramienta calcula la cifra real para el archivo que cargues, en vez de mostrar un "33%" fijo para todos los casos.
El tamaño es solo la mitad del problema — incrustar también significa que el navegador no puede cachear ni reutilizar ese recurso de forma independiente de la página/CSS/JS donde vive, y una cadena inline muy grande ralentiza el parseo de HTML/CSS. Por eso la guía de abajo piensa en el costo total de la petición, no solo en los bytes.
Preguntas frecuentes
¿Por qué un Data URI en Base64 siempre pesa ~33% más que el archivo original?
Base64 empaqueta cada 3 bytes crudos en 4 caracteres imprimibles (RFC 2045), así que el tamaño codificado siempre es ceil(bytesOriginales / 3) * 4 — una expansión fija de ~33% que no depende del contenido del archivo.
¿Cuándo conviene incrustar una imagen o fuente como Data URI?
Aproximadamente por debajo de ~2KB, donde evitar una petición HTTP extra suele compensar la sobrecarga de Base64. Por encima de eso, una petición HTTP/2 cacheada suele ser más eficiente — esto es una guía general, no una regla absoluta, ya que el cacheo y el multiplexado cambian la ecuación según el proyecto.
¿En qué se diferencia de la herramienta Base64 Switch del sitio?
Base64 Switch es un codificador/decodificador genérico de texto, JSON o archivos. Esta herramienta es específica para imágenes y fuentes, y su foco es el análisis de sobrecarga y el veredicto de incrustar o no, más que la conversión simple.
¿Mi archivo se sube a algún servidor?
No. El archivo se lee localmente con la File API del navegador y se codifica con btoa() en tu navegador — nunca sale de tu equipo.