Codificador Base64 de archivos gratuito
Convierte cualquier archivo a una URL de datos Base64 · todo permanece en tu navegador.
Arrastra y suelta un archivo aquí
o
Selecciona o suelta un archivo para codificar.
Cómo funciona
- Sube tu archivo: suelta cualquier archivo (imagen, PDF, fuente, audio o binario) en la zona de carga o haz clic para buscar.
- Obtén la cadena Base64: El archivo se lee y codifica a Base64 instantáneamente en tu navegador.
- Copia y usa: Copia la cadena Base64 para incrustarla en HTML, CSS, cargas JSON, URIs de datos o cualquier formato de texto.
¿Por qué usar el codificador Base64 de archivos?
Los archivos binarios no se pueden incrustar directamente en formatos de texto como HTML, CSS, JSON o XML. La codificación Base64 convierte cualquier archivo binario en una cadena ASCII segura que se puede incrustar en cualquier lugar donde se permita texto. Esto es esencial para incrustar imágenes directamente en HTML (URIs de datos), incluir fuentes en CSS, enviar archivos en APIs de correo electrónico o JSON sin endpoints de carga, y crear documentos HTML independientes.
Características
- Cualquier tipo de archivo: Codifica imágenes, PDFs, fuentes, audio, video y todos los archivos binarios.
- Salida de URI de datos: Actívalo para obtener una URI de datos lista para usar para incrustación directa.
- Visualización del tamaño del archivo: Muestra los tamaños original y codificado para conocer la sobrecarga.
- Procesamiento local: los archivos se leen y codifican completamente en tu navegador, nada se sube.
Preguntas frecuentes
¿Cuánto más grande es Base64 en comparación con el archivo original?
La codificación Base64 aumenta el tamaño del archivo aproximadamente un 33 %. Una imagen de 100 KB se convierte en aproximadamente 133 KB cuando se codifica en Base64. Esta sobrecarga es el precio por poder incrustar contenido binario en texto.
¿Puedo usar imágenes Base64 en HTML?
Sí. Usa una URI de datos como <img src="data:image/png;base64,[tu-base64]">. Esto incrusta la imagen directamente en el HTML sin solicitud HTTP externa, aunque aumenta el tamaño de la página.
¿Hay un límite de tamaño de archivo?
La herramienta no tiene límite impuesto, pero los archivos muy grandes (más de 10 MB) pueden ser lentos de codificar y la cadena resultante será extremadamente larga. Para archivos grandes, considera una solución del lado del servidor.
De dónde viene Base64 y por qué todavía lo usamos
Base64 fue diseñado para transportar datos binarios de 8 bits a través de canales ASCII de 7 bits. La primera especificación formal fue la RFC 989 (febrero de 1987) para Privacy-Enhanced Mail. La RFC 1341 (junio de 1992) y especialmente la RFC 2045 «MIME Parte Uno» (noviembre de 1996) la convirtieron en la forma estándar de adjuntar archivos binarios al correo electrónico. El documento canónico actual es la RFC 4648 (octubre de 2006), que también definió la variante URL-safe. La mecánica es simple: tome 3 bytes de entrada (24 bits), divida en cuatro grupos de 6 bits, busque cada uno en el alfabeto de 64 caracteres A-Z a-z 0-9 + /, agregue el relleno = para que la longitud de salida sea un múltiplo de 4. El tamaño de salida es exactamente 4 ÷ 3 ≈ 133 % de la entrada. Para incrustar en URLs (JWT, OAuth, URLs prefirmadas S3), la variante URL-safe de la RFC 4648 §5 sustituye - por + y _ por /; el relleno típicamente se omite.
La URL data:: Base64 en tu HTML y CSS
El esquema de URL data: se especificó en la RFC 2397 (agosto de 1998). Formato: data:[<mediatype>][;base64],<data>. Ejemplo: <img src="data:image/png;base64,iVBORw0KGgo..."> incrusta un PNG en línea sin solicitud HTTP adicional. El WHATWG URL Living Standard rige cómo los navegadores modernos interpretan estas URLs y el HTML Living Standard confirma que son válidas dondequiera que una URL esté permitida, incluyendo <img>, <link>, <iframe>, y la función CSS url(). Guía práctica: use URLs data para activos menores de aproximadamente 4 KB, donde ahorrar una solicitud HTTP supera el 33 por ciento de sobrecarga de carga útil. Por encima de 10 KB, las referencias de archivo regulares con almacenamiento en caché del navegador casi siempre ganan, especialmente sobre multiplexación HTTP/2.
APIs de navegador que potencian esta herramienta
Esta página utiliza la API FileReader del HTML Living Standard (originalmente W3C File API First Public Working Draft noviembre de 2009; enviado en Chrome 13 / Firefox 3.6 / Safari 6 / Internet Explorer 10). FileReader.readAsDataURL(blob) devuelve la cadena completa data:<mime>;base64,<...> con una sola llamada. La alternativa heredada es btoa() (nombrada por el comando histórico de Unix «binary-to-ASCII» y un vestigio de JavaScript DOM Level 0), pero arroja en entradas no Latin-1 a menos que transcodifique primero a través de UTF-8. El reemplazo moderno es Uint8Array.prototype.toBase64(), añadido a ECMAScript 2025 en TC39 Stage 4. Se envió en Chrome 132 (enero de 2025), Firefox 133 (noviembre de 2024), y Safari 18.2 (diciembre de 2024). Use la nueva API para cualquier código nuevo; reserve btoa para compatibilidad con navegadores más antiguos.
Adónde realmente va la salida de esta herramienta
- Íconos e imágenes pequeñas en línea en HTML / CSS para documentos autocontenidos u orientados a sin conexión.
- Cargas útiles de carga de archivos JSON cuando el backend espera una cadena Base64 en un campo JSON en lugar de
multipart/form-data. - Adjuntos de correo MIME: la RFC 2045 requiere Base64 (o quoted-printable) para cualquier cuerpo no de 7 bits, lo que significa cada adjunto PDF, imagen o documento.
- Tokens JWT / OAuth: cada JWT son tres segmentos Base64 URL-safe unidos por
.. - Fixtures de prueba confirmados en git, para que las imágenes de prueba / documentos de muestra viajen con el archivo de prueba.
- Cargas útiles de Web Push al entregar un blob binario a través de la API Push.
- Fuentes web de ruta crítica incrustadas en CSS para evitar el FOIT (flash de texto invisible) en la primera pintura, compromiso aceptado.
Errores comunes
- Tratar Base64 como cifrado. Base64 es codificación, no seguridad. Cualquiera con la cadena puede decodificarla en su navegador. Nunca use Base64 para «ocultar» credenciales, claves API o PII.
- Olvidar el prefijo
data:<mime>;base64,. Una cadena Base64 desnuda no es una URL data. Un<img>necesita la forma completadata:image/png;base64,<su-base64>para renderizar. - Mezclar Base64 URL-safe y estándar. JWT y URLs prefirmadas S3 usan URL-safe (
-y_). Pegar Base64 estándar (+y/) en estos contextos produce fallos silenciosos de decodificación. - Olvidar la directiva CSP
data:. Una página conimg-src 'self'en su Content Security Policy se negará a cargar cualquier URLdata:image/.... Tiene que permitir explícitamenteimg-src 'self' data:(y de manera similar parafont-src,media-src, etc.). - Codificar archivos de 100 MB de forma sincrónica en el hilo principal.
FileReader.readAsDataURLbloquea la UI durante varios segundos en un archivo de 200 MB. Para cualquier cosa de más de ~20 MB, use un Web Worker o flujo en trozos. - Llamar a
btoa("é")directamente. ArrojaInvalidCharacterErrorporquebtoaespera Latin-1, no UTF-8. O usebtoa(unescape(encodeURIComponent(text)))(heredado), o pase unUint8Arraya través del método modernotoBase64(). - Incrustar un logo de 500 KB como URL data. La sobrecarga del 33 por ciento más la pérdida del almacenamiento en caché del navegador significa que cada carga de página descarga 665 KB en lugar de 500 KB-una-vez. Use una referencia de activo regular.
Más preguntas frecuentes
¿Cuál es la sobrecarga exacta de tamaño de Base64?
Exactamente 4 ÷ 3 ≈ 1,333× la entrada, más 1-2 bytes de relleno =. Una entrada de 999 bytes se convierte en 1332 caracteres de Base64 (sin relleno porque 999 ÷ 3 = 333 exactamente). Una entrada de 1000 bytes se convierte en 1336 (un byte de relleno). Para una URL data, agregue los bytes del prefijo (p. ej. data:image/png;base64, son 23 caracteres).
¿Cómo obtengo Base64 URL-safe para JWT o URLs prefirmadas S3?
Tome la salida Base64 estándar de esta herramienta y aplique dos reemplazos: + → -, / → _. JWT específicamente elimina el relleno = final; S3 lo mantiene. La RFC 4648 §5 documenta la variante.
¿Puedo hacer round-trip de un archivo a través de Base64 sin corrupción?
Sí. Base64 es una codificación sin pérdidas. Codificar a Base64 y luego decodificar de vuelta produce un original idéntico byte por byte. La única forma de perder datos es truncar la cadena Base64 (p. ej. limitar caracteres en su almacenamiento) o confundir alfabetos estándar vs URL-safe al decodificar.
¿Cuál es el tamaño máximo de archivo que esta herramienta puede manejar?
Sin límite estricto; en la práctica la memoria del navegador es el techo. Codificar un archivo de 100 MB requiere aproximadamente 100 MB de entrada más 133 MB de salida, más sobrecarga DOM para la cadena resultante, quizás 400 MB en total. En móvil, espere fallos por encima de unos 30 MB. La codificación se ejecuta en el hilo principal, por lo que la UI se congela durante el procesamiento; para archivos de más de 20 MB, una solución del lado del servidor o Web Worker es más cómoda.
¿Se sube mi archivo a algún lugar?
No. El archivo se lee con la API FileReader.readAsDataURL del navegador, que se ejecuta enteramente en su navegador. No se hace ninguna solicitud de red y no se almacena ninguna copia de su archivo en ningún servidor. Abra la pestaña Red en DevTools y suelte un archivo: verá cero solicitudes salientes durante la codificación.