Convertir imagen a Base64 online | Data URL | Awesome Toolkit

Imagen a Base64

Convierte una imagen a Base64 / Data URL. Modos HTML, CSS y texto plano. Todo ocurre en tu navegador.

Por Marshkalk

Suelta una imagen aquí o

Cómo usar el convertidor de imagen a Base64

  1. Suelta o selecciona una imagen.
  2. Elige el formato de salida, Data URL, Base64 puro, snippet CSS o etiqueta HTML.
  3. Haz clic en Copiar y pega el resultado donde lo necesites.

Guía de formatos de salida

  • Data URL: URI autónoma (data:image/png;base64,...) usable en cualquier lugar donde se acepte una URL.
  • Solo Base64: la cadena codificada sin el prefijo data:. Útil para endpoints de API o integración en JSON.
  • CSS background-image: regla CSS lista para pegar: background-image: url("data:...")
  • Etiqueta HTML img: elemento <img src="data:..."> completo para insertar directamente en HTML.

Cuándo usar imágenes Base64

Las imágenes en Base64 pueden insertarse directamente en HTML, CSS, JSON o plantillas de correo sin una petición HTTP separada. Reduce los viajes de red para assets pequeños.

Sin embargo, Base64 aumenta el tamaño del archivo en un 33 %. Regla general: inline para imágenes menores de ~5 KB; usa archivos separados para todo lo demás.

Casos de uso más habituales

  • Iconos inline en CSS sin peticiones HTTP adicionales
  • Plantillas de correo: incrustar imágenes directamente para evitar imágenes externas bloqueadas
  • Cargas JSON de API: enviar datos de imagen en el cuerpo de una petición
  • HTML autónomo: crear documentos que funcionen sin conexión

Privacidad

Toda la conversión se realiza en el navegador usando la API FileReader. No se sube ninguna imagen.