Cómo convertir una imagen a Base64
- Suelta una imagen en el recuadro de arriba o pulsa Elegir una imagen. Se admiten archivos PNG, JPG, GIF, WebP, SVG, AVIF, ICO y BMP.
- La herramienta muestra una vista previa, el tamaño de la imagen y la longitud del texto en Base64.
- Elige el formato que necesitas con las pestañas: Data URL (el texto completo
data:image/…;base64,…), Base64 (solo la parte codificada), HTML <img>, CSS (una líneabackground-image) o Markdown. - Para los fragmentos de HTML y Markdown, escribe un texto alternativo que describa la imagen y deja activada la opción Añadir ancho y alto para que la página no dé saltos mientras se carga.
- Pulsa Copiar y pega el código donde lo necesites. Si el resultado es muy largo, se acorta en el cuadro para que la página vaya rápida, pero Copiar siempre copia el texto completo.
Todo ocurre en tu navegador. La imagen no se sube nunca, no hace falta registrarse y tu archivo original no se modifica.
Qué es una imagen en Base64
Base64 es una forma de escribir cualquier dato binario usando solo 64 caracteres de texto seguros: las letras, los dígitos, el signo más y la barra. Cada 3 bytes del archivo pasan a ser 4 caracteres, y por eso el texto es aproximadamente un tercio más largo que el archivo. Una data URL coloca ese texto detrás de una cabecera corta, data:image/png;base64,, que indica al navegador el tipo de archivo y cómo está codificado. El navegador la trata como cualquier otra dirección de imagen, así que se puede usar en un atributo <img src>, en el url() de CSS y en las imágenes de Markdown.
La conversión no vuelve a comprimir nada. Los bytes de tu archivo se codifican exactamente como están, de modo que al decodificar el texto se obtiene una imagen idéntica a la original.
Cuándo conviene incrustar una imagen
- Iconos y logotipos pequeños de unos pocos kilobytes, cuando ahorrar una petición compensa el tamaño adicional.
- Páginas de un solo archivo, como un informe guardado, una demostración de código o un archivo HTML que envías a alguien y que debe funcionar sin más archivos.
- Bundles de CSS y JavaScript que necesitan una imagen de relleno diminuta o un patrón de fondo.
- Datos de prueba y documentación, donde un texto corto de ejemplo resulta más cómodo que un archivo.
Evítalo con fotos e imágenes grandes: el texto es un tercio mayor que el archivo, hace que el HTML o el CSS tarden más en descargarse y procesarse, y el navegador no puede guardar la imagen en caché por separado de la página. Muchos clientes de correo, entre ellos Gmail, tampoco muestran las imágenes en data URL. Si tu web usa una política de seguridad de contenido (CSP), hay que permitir data: en img-src.
Ejemplo práctico
Tienes un icono PNG de 3000 bytes y 40×20 píxeles y quieres incluirlo en un botón de un único archivo HTML. Suéltalo en la herramienta: el texto en Base64 tiene 4000 caracteres, un 33 % más que el archivo, porque 3000 ÷ 3 × 4 = 4000. En la pestaña HTML, escribe el texto alternativo Descargar y copia el resultado, que tiene este aspecto:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="Descargar" width="40" height="20">
Pégalo dentro del botón y el icono pasa a formar parte de la página, sin un segundo archivo que alojar. Para usar el mismo icono como fondo de CSS, ve a la pestaña CSS y pega background-image: url("data:…"); en la regla.
Consejos y problemas frecuentes
- Imágenes SVG. Ya son texto, así que es posible una data URL de SVG más corta y escapada, sin Base64, pero la versión en Base64 funciona en todas partes y es la más sencilla.
- Reduce antes el tamaño. Si el texto en Base64 es enorme, comprime o redimensiona la imagen antes de convertirla.
- Comprueba el tipo. El comienzo de la data URL debe indicar el tipo de imagen correcto; esta herramienta lo establece a partir de tu archivo.
- Saltos de línea. Una data URL debe ir en una sola línea. Cópiala tal cual y no añadas espacios ni saltos.
- Accesibilidad. Escribe siempre un texto alternativo útil, o déjalo vacío en las imágenes puramente decorativas.
Preguntas frecuentes
¿Se sube mi imagen a algún servidor?
No. El archivo se lee y se convierte en tu navegador, en tu propio dispositivo. Ni la imagen ni su texto en Base64 salen de él.
¿Qué es una data URL en Base64?
Es la imagen entera escrita como texto con la forma data:image/png;base64,… para poder colocarla directamente en un atributo src de HTML, en un url() de CSS o en una imagen de Markdown, en lugar de enlazar a un archivo aparte.
¿Por qué el texto en Base64 es más grande que mi imagen?
Base64 escribe cada 3 bytes como 4 caracteres, así que el texto es un 33 % más largo que el archivo. Además, el navegador no puede guardar en caché por separado las imágenes incrustadas; úsalas para imágenes pequeñas, como iconos, y deja las fotos grandes como archivos normales.
¿Puedo usar una data URL en un correo electrónico?
A menudo no. Muchos clientes de correo, entre ellos Gmail, no muestran las imágenes incrustadas como data URL. En los correos HTML, enlaza a una imagen alojada en un servidor o adjúntala.
¿Cambia la calidad de la imagen?
No. Los bytes de tu archivo se codifican tal cual, sin volver a comprimirlos, de modo que la imagen que se obtiene al decodificar el texto Base64 es idéntica a la original.