Convertidor de imagen a Base64

Base64 escribe datos binarios, por ejemplo un archivo JPG o PNG, como una cadena de caracteres de texto normales. Cada tres bytes del archivo se convierten en cuatro caracteres de un alfabeto de 64: letras mayúsculas y minúsculas, cifras, el signo más y la barra[1]. Una imagen escrita así va directamente al código de la página, a una hoja de estilos o a un campo JSON, sin un archivo aparte en el servidor.

La cadena sola todavía no dice que se trata de una imagen. Lo dice la URL data:, descrita en el RFC 2397, que pone el tipo de archivo delante de la cadena, por ejemplo data:image/png;base64,. La cadena propiamente dicha empieza después de la coma[2]. La misma URL sirve como imagen en Markdown con la forma ![descripción](data:image/png;base64,…). El alfabeto y el camino inverso, de la cadena al archivo, los explica el convertidor de Base64 a imagen.

Arrastra un archivo al campo Imagen, o haz clic en él y elige una imagen. El campo Base64 muestra el resultado al instante, en la forma elegida en la lista Formato del resultado. Por defecto es URL data:, la cadena precedida del tipo de archivo, por ejemplo data:image/jpeg;base64,.

Puedes cambiar la lista cuando quieras sin volver a subir la imagen. Etiqueta <img> para HTML da un elemento listo con la URL en el atributo src, Fondo en CSS (background-image) da una declaración para una regla de la hoja de estilos, y Solo la cadena Base64 deja únicamente los caracteres tras la coma. El botón Copiar copia el resultado en la forma elegida, y Descargar lo guarda como archivo de texto, por ejemplo logo-base64.txt. Limpiar todo vacía el campo del resultado.

La herramienta codifica un archivo cada vez y, si sueltas varios, toma el primero. Un archivo que no es una imagen detiene la codificación con el mensaje Solo se admiten archivos de imagen.

El texto necesita cuatro caracteres por cada tres bytes, así que la cadena es alrededor de un tercio más larga que el archivo[1]. La longitud la calculas tú mismo: divide los bytes entre tres, redondea hacia arriba y multiplica por cuatro. Un icono de sitio de 2 678 bytes da 3 572 caracteres, y una foto de cámara de 1 405 512 bytes da 1 874 016.

Una imagen incrustada forma parte del archivo en el que está. El navegador descarga la imagen de una hoja de estilos junto con esa hoja, así que tras cada cambio en la hoja la vuelve a descargar. La misma imagen pegada en cinco páginas HTML viaja con cada una de ellas por separado. Por eso Base64 encaja con iconos y gráficos pequeños, mientras que la foto de un artículo sigue siendo un archivo normal.

La longitud la limita el navegador: Chromium y Firefox aceptan URL data: de hasta 512 MB, y Safari de hasta 2048 MB. Firefox movió ese límite dos veces, de 256 KB a 32 MB en la versión 97 y a 512 MB en la versión 136[3]. Los navegadores bloquean, en cambio, abrir URL data: en la ventana principal, porque por esa vía se difundían páginas de phishing[3]. Una cadena pegada en la barra de direcciones no mostrará la imagen, y la misma cadena en un atributo src sí.

Gmail no muestra imágenes escritas como URL data:, ni en el navegador ni en las aplicaciones para iOS y Android. caniemail.com lo comprobó en febrero de 2020 y volvió a probar la versión del navegador en mayo de 2024, con el mismo resultado[4]. Outlook para Windows, en las versiones de 2007 a 2016, se comporta igual.

Por eso conviene subir el logotipo de la firma o del boletín a un servidor como archivo normal y usar su dirección. Así funciona el generador de firma de correo: en el campo Avatar / logo (URL de imagen) escribes la dirección de una imagen, no una cadena Base64.