Imagen a Base64: data URI, HTML y CSS
Convierte una imagen en una cadena Base64 o data URI, con etiqueta HTML img, fondo CSS y salida JSON listos para pegar. En tu navegador.
Cargando Convertidor de imagen a Base64…
Tus archivos nunca salen de tu dispositivo
Cómo usar Convertidor de imagen a Base64
- 1
Abre Convertidor de imagen a Base64 en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Cómo convertir una imagen a Base64
Base64 convierte los datos binarios de una imagen en texto formado por letras, números y algunos símbolos. Ese texto puede incrustarse donde solo se admite texto: en HTML o CSS como data URI, en un JSON enviado a una API, en una plantilla de correo o en un archivo de configuración. El navegador lo decodifica de nuevo en la imagen original al mostrarla.
El convertidor lee tu imagen en el navegador y genera al instante la cadena codificada junto con fragmentos listos para usar: un data URI completo (data:image/png;base64,…), solo la cadena Base64, una etiqueta HTML img, una regla CSS background-image y un objeto JSON. Puedes copiar cualquiera al portapapeles o descargar la salida como archivo de texto o JSON. Se aceptan imágenes de hasta 10 MB.
Cómo usar: Convertidor de imagen a Base64
- Sube o arrastra una imagen (JPG, PNG, WebP, GIF, SVG y otros formatos que lea el navegador, hasta 10 MB). Se muestran el formato, las dimensiones y el peso del original.
- Elige el formato de salida: Data URI, Base64 Only, CSS Background, HTML Image o JSON.
- Copia el resultado con un clic o descárgalo y pégalo en tu HTML, CSS, JavaScript o petición a una API.
- Revisa el número de caracteres y el tamaño codificado en el panel de estadísticas antes de usar imágenes grandes.
Cuándo tienen sentido las imágenes en Base64
- Iconos y logos pequeños en CSS o HTML, ahorrando una petición HTTP aparte.
- Plantillas de correo HTML en las que las imágenes externas pueden bloquearse.
- APIs y JSON que solo aceptan imágenes como campos de texto.
- Demos y prototipos de un solo archivo que deben funcionar sin recursos externos.
Ejemplos de salida
Un data URI tiene el aspecto data:image/png;base64,iVBORw0KGgo… y puede usarse en cualquier lugar donde se espere una URL. En HTML se convierte en <img src="data:image/png;base64,…" alt=""> y en CSS en background-image: url(data:image/png;base64,…). La salida JSON envuelve la cadena con su tipo MIME y dimensiones, práctico para peticiones a APIs y datos de prueba.
Tamaño y rendimiento
Como Base64 pesa un 33 % más que el archivo binario y se procesa junto con el HTML o CSS que lo contiene, incrustarlo compensa sobre todo con imágenes de pocos kilobytes, como iconos, logos pequeños y marcadores de posición. Comprime o redimensiona antes la imagen, idealmente al tamaño exacto de visualización, para que la cadena sea corta y tus páginas rápidas.
Base64 hace los datos alrededor de un tercio más grandes que el archivo original, y las imágenes incrustadas no pueden almacenarse en caché por separado. Úsalo para imágenes pequeñas; para fotos y gráficos grandes, un archivo normal comprimido con el compresor de imágenes es más rápido.
Privado, gratis y rápido
La herramienta funciona por completo en tu navegador: tus archivos y textos se procesan en tu propio dispositivo y no se suben a ningún servidor. Sin registro, sin marca de agua y sin límite diario.
Funciones
- Salida data URI y Base64 puro
- Fragmentos HTML img y fondo CSS listos
- Salida JSON para APIs
- Copiar al portapapeles o descargar
- Número de caracteres y tamaño codificado
- Imágenes de hasta 10 MB, procesadas en tu navegador
Preguntas frecuentes
¿Qué es una imagen en Base64?
Una imagen cuyos datos binarios se han codificado como texto. Como data URI puede colocarse directamente en HTML o CSS en lugar de enlazar a un archivo aparte.
¿Base64 hace las imágenes más grandes?
Sí, alrededor de un 33 %, porque cada 3 bytes se convierten en 4 caracteres. Es mejor para imágenes pequeñas.
¿Cómo uso una imagen Base64 en HTML?
Elige la salida HTML Image y pega la etiqueta img generada, o pon el data URI en el atributo src de cualquier elemento img.
¿Cómo la uso en CSS?
Elige la salida CSS Background: genera una regla background-image con el data URI que puedes pegar en tu hoja de estilos.
¿Cómo vuelvo a convertir Base64 en imagen?
Pega el data URI en la barra de direcciones del navegador para ver la imagen, o decodifica la cadena con cualquier decodificador Base64 y guarda los bytes con la extensión correcta.
¿Se suben mis archivos a un servidor?
No. Todo se procesa localmente en tu navegador y no se envía nada a ningún servidor. Al cerrar la pestaña se descartan tus datos.