Imagen a Base64
Convierte imágenes a formato Base64
Arrastra una imagen aquí o
PNG, JPG, GIF, SVG, WebP (máx. 5MB)
Imagen a Base64
Convierte imágenes a formato Base64 para incrustarlas directamente en HTML o CSS. Útil para pequeños iconos y evitar peticiones HTTP adicionales. Todo el procesamiento ocurre localmente en tu navegador.
Convertir Imagen a Base64 Online - Codificar Imágenes para CSS/HTML
¿Qué es Base64 y por qué embeber imágenes?
Base64 es una codificación que representa datos binarios (como imágenes) en texto ASCII. Un Data URI (data:image/png;base64,...) permite incluir la imagen directamente en CSS o HTML sin archivo separado. Ventajas: elimina una petición HTTP, la imagen carga con el CSS/HTML (sin FOUC), simplifica deployment al tener menos archivos. Desventajas: aumenta tamaño ~33% (Base64 es ineficiente), no se cachea independientemente, el CSS/HTML se vuelve enorme si la imagen es grande. Ideal para: íconos pequeños (<5KB), sprites, imágenes críticas above-the-fold.
Uso de imágenes Base64 en CSS, HTML y JavaScript
En CSS: background-image: url(data:image/png;base64,iVBORw0KGgo...). En HTML: <img src="data:image/png;base64,iVBORw0KGgo...">. En JavaScript: document.getElementById("img").src = "data:image/png;base64,...". Para SVG, puedes usar data:image/svg+xml directamente sin Base64 (más eficiente): data:image/svg+xml,%3Csvg.... El MIME type debe coincidir con el formato: image/png, image/jpeg, image/gif, image/svg+xml, image/webp. Esta herramienta detecta el tipo y genera el Data URI completo.
Cuándo usar y cuándo evitar Base64
Usar Base64 cuando: la imagen es menor a 5-10KB, es crítica para el primer render, quieres reducir peticiones HTTP en conexiones lentas, necesitas embeber en emails HTML (muchos clientes bloquean imágenes externas). Evitar cuando: la imagen es grande (>10KB), se usa en múltiples páginas (mejor cache como archivo), necesitas lazy loading, la imagen cambia frecuentemente (invalida todo el CSS). Herramientas de build (Webpack, Vite) pueden automatizar: convertir a Base64 imágenes pequeñas y mantener como archivos las grandes.
Preguntas frecuentes
¿Por qué el Base64 es más grande que el archivo original?
Base64 codifica cada 3 bytes binarios en 4 caracteres ASCII, aumentando el tamaño ~33%. Para una imagen de 10KB, el Base64 será ~13.3KB. Sin embargo, si tu CSS se sirve con gzip/brotli, la compresión reduce esta diferencia. El beneficio de eliminar una petición HTTP puede superar el costo del tamaño extra para imágenes pequeñas.
¿Puedo usar Base64 para imágenes grandes?
Técnicamente sí, pero no es recomendable. Una imagen de 100KB en Base64 son 133KB adicionales en tu CSS que deben descargarse y parsearse antes de mostrar cualquier estilo. Además, no se puede cachear independientemente. Para imágenes grandes, usa archivos normales con lazy loading y cache HTTP apropiado.
¿El navegador decodifica Base64 en cada carga?
El navegador decodifica Base64 cada vez que parsea el CSS/HTML que lo contiene. Es rápido para imágenes pequeñas pero puede impactar en páginas con muchas imágenes Base64 grandes. Para imágenes que aparecen múltiples veces, es más eficiente como archivo separado que se cachea decodificado.
¿Cómo convierto Base64 de vuelta a imagen?
En JavaScript: crea un Blob desde el Base64 decodificado y genera un URL con createObjectURL(). Online, busca "Base64 to image decoder". El Data URI completo incluye el MIME type, así que la conversión sabe el formato. Esta herramienta también puede realizar la conversión inversa.