HerramientasConvertir imagen a Base64 online
Sube una imagen y obtén su código Base64 al instante, listo para copiar como Data URI, solo Base64, etiqueta HTML <img>, CSS background o Markdown. También funciona al revés: pega un código Base64 y conviértelo en imagen (PNG, JPG, GIF, WEBP o SVG) para verla y descargarla.
🔒 La imagen no se sube a ningún servidor: la conversión se hace en tu navegador.
¿Para qué sirve una imagen en Base64?
- Incrustar imágenes en HTML o CSS sin tener que subir archivos aparte, por ejemplo íconos o logos pequeños.
- Firmas y plantillas de correo que deben mostrar la imagen sin enlaces externos.
- Enviar imágenes en JSON o APIs, donde solo se puede mandar texto.
- Páginas de un solo archivo, como las plantillas que puedes probar en nuestro visor HTML.
Imagen Base64 en HTML, CSS y JavaScript
En HTML: <img src="data:image/png;base64,iVBORw0…">. En CSS: background-image: url("data:image/png;base64,…"). En JavaScript puedes asignar el mismo Data URI a img.src.
💡 Base64 hace que el archivo pese aproximadamente un 33% más. Úsalo para imágenes pequeñas (menos de 10–20 KB); las fotos grandes es mejor enlazarlas.
Preguntas frecuentes
¿Cómo convertir una imagen a Base64?
Arrastra tu imagen o tócala para elegirla. Al instante verás el código Base64; elige el formato (Data URI, HTML, CSS o Markdown) y cópialo.
¿Cómo convertir Base64 a imagen?
Toca «Base64 a imagen», pega el código (con o sin «data:image/…;base64,») y pulsa «Ver imagen». Luego puedes descargarla como PNG, JPG o el formato original.
¿Cómo poner una imagen Base64 en HTML?
Usa la opción «HTML <img>»: obtendrás una etiqueta como <img src="data:image/png;base64,…"> lista para pegar en tu código.
¿Por qué el Base64 pesa más que la imagen?
Base64 representa los datos con texto, lo que aumenta el tamaño un 33% aproximadamente. Por eso conviene usarlo solo para imágenes pequeñas, como íconos y logos.