Convertir cualquier archivo a Base64

Funciones

• Cualquier tipo de archivo, arrastrar y soltar, con salida en Base64 y la data URL completa
• El titular es la data URL con su botón de copiar: lista para src, url() o JSON
• Indica el nombre, el tamaño original, el codificado, el MIME y la longitud real
• Un MIME vacío se trata como application/octet-stream en vez de adivinarlo
• Explica el coste de Base64 (un tercio más, sin caché propia) y no solo el resultado
• No se sube nada: funciona sin conexión

Cómo se usa

1. Arrastra el archivo al recuadro de puntos
2. La data URL aparece arriba; cópiala con el botón de la derecha
3. En la tabla de abajo ves los tamaños, el MIME y la longitud codificada
4. Pégala en `src`, en `url()` o en un campo data

Preguntas frecuentes

¿Qué diferencia hay entre Base64 y una data URL?

Base64 es el texto codificado en sí; una data URL es la dirección completa que lleva el tipo: `data:image/png;base64,` seguido de ese texto. Para pegar en `src` o `url()` hace falta lo segundo: con Base64 a secas el navegador no sabe qué es. Aquí se dan las dos, con la data URL utilizable en el titular.

¿Por qué no conviene incrustarlo todo como Base64?

Por tres costes. Tamaño: Base64 es alrededor de un tercio mayor (3 bytes pasan a 4 caracteres). Caché: el recurso incrustado viaja con el HTML/CSS, así que cualquier cambio obliga a bajar todo el bloque, mientras que un archivo aparte se cachea por su cuenta. Paralelismo: el navegador ya no puede pedir ese recurso en paralelo. La regla es unos pocos KB, y solo para lo que de verdad se use: iconos pequeños, un marcador de 1×1, cientos de bytes de tipografía. Los archivos grandes, referéncialos como siempre.

¿Qué tipografía puedo incrustar en CSS?

Las tipografías son las mejores candidatas: bloquean el dibujo del texto, así que cada petición extra es un tramo en blanco más largo (FOIT). Pero una tipografía CJK puede pesar varios MB: ese es un caso para incrustar un subconjunto (solo los glifos que se usan), no el archivo entero. Las latinas suelen ir de 10 a 30 KB e incrustarlas es habitual. En CJK, el subconjunto importa mucho más que incrustar.

¿Por qué el límite de 4 MB?

Porque la salida Base64 es texto que tiene que entrar en el DOM para mostrarse y copiarse. Un archivo de 4 MB se vuelve una cadena de 5,5 MB, y dibujar tanto texto ya fuerza al navegador. El de hash admite 512 MB porque su salida siempre es un resumen de longitud fija: leer más bytes no produce más texto. Para archivos mayores, `base64 -w0 entrada > salida.txt`.