Imagen a Base64
NuevoConvierte cualquier imagen a una cadena de URL de datos Base64
Cómo usar Imagen a Base64
- 1Upload your image
- 2Copy the generated Base64 string
- 3Paste it into your HTML img src, CSS background-image, or JSON payload
- 4Pégalo directamente en tu HTML o CSS
Acerca de Imagen a Base64
Imagen a Base64 convierte su archivo de imagen en una cadena de texto Base64 que puede integrarse directamente en etiquetas HTML img, fondos CSS o cargas útiles JSON — sin archivo de imagen separado. La herramienta muestra la URL de datos completa, la porción Base64 pura y un fragmento HTML de ejemplo.
Características principales de Imagen a Base64
- Conversión instantánea sin viaje de ida y vuelta al servidor
- Salida de URL de datos completa lista para pegar en atributos src HTML
- Salida de cadena Base64 pura para APIs JSON e integraciones personalizadas
- Fragmento de etiqueta HTML img listo con un clic
- Botón copiar al portapapeles para cada sección de salida
- Soporta todos los formatos de imagen que el navegador puede mostrar
- Sin restricciones de tamaño de archivo más allá de la memoria del navegador
- Completamente del lado del cliente — sus datos de imagen nunca salen de su dispositivo
Formatos compatibles
Formatos de entrada
Formatos de salida
La URL de datos de salida incluye automáticamente el prefijo de tipo MIME correcto (data:image/png;base64, etc.).
Ejemplos
Icono inline en correo HTML
Incruste el icono directamente en el HTML de su correo para que se muestre incluso cuando las imágenes externas estén bloqueadas.
Entrada
Pequeño icono PNG 32x32
Salida
data:image/png;base64,iVBOR... (URL de datos completa)
Imagen de fondo CSS
Use la URL de datos en una propiedad CSS background-image para evitar una solicitud HTTP adicional.
Entrada
Pequeña textura PNG decorativa
Salida
background-image: url("data:image/png;base64,...")Imagen en respuesta de API JSON
Copie la cadena Base64 sin procesar como valor de un campo "avatar" en una carga útil JSON sin el prefijo de URL de datos.
Entrada
Avatar PNG de usuario
Salida
Cadena Base64 sin procesar para valor de campo JSON
Casos de uso comunes
- Incrustar iconos pequeños directamente en HTML para evitar solicitudes HTTP adicionales
- Incluir imágenes en línea en CSS para gráficos de fondo
- Almacenar datos de imagen en cargas útiles JSON de API o archivos de configuración
- Crear plantillas de correo electrónico HTML autónomas con imágenes integradas
- Codificar imágenes de firma para incrustarlas en scripts de generación de PDF
- Agrupar sprites pequeños directamente en archivos fuente JavaScript
Solución de problemas
La cadena de salida es extremadamente larga y ralentiza el editor
Solución
La codificación Base64 aumenta el tamaño en ~33%. Para imágenes de más de 100 KB, considera servirlas como archivos normales.
El URI de datos no se muestra en el navegador
Solución
Asegúrate de que el URI de datos incluya el prefijo MIME correcto, ej: "data:image/png;base64," — la herramienta lo genera automáticamente, verifica truncamiento accidental.
La codificación SVG produce salida rota
Solución
Para archivos SVG, la codificación URL a veces es más confiable que Base64. Usa la fuente SVG sin procesar o codifica la cadena SVG en URL.
Preguntas frecuentes
¿Por qué usar Base64 para imágenes?
Las imágenes codificadas en Base64 pueden integrarse directamente en HTML, CSS o JSON sin alojar la imagen como archivo separado.
¿Base64 aumenta el tamaño del archivo?
Sí, la codificación Base64 aumenta la cadena en aproximadamente un 33%. Es más apropiada para imágenes pequeñas de menos de 10 KB.
¿Cuál es la diferencia entre la URL de datos y la cadena Base64 sin procesar?
La URL de datos incluye el prefijo de tipo MIME (ej. data:image/png;base64,). La cadena Base64 sin procesar es solo los datos codificados sin ese prefijo.
¿Hay un límite de tamaño de archivo?
No hay límite del lado del servidor. Las imágenes de hasta 10 MB se codifican de forma confiable en dispositivos modernos.
¿Qué formatos de imagen son compatibles?
Cualquier formato que su navegador pueda cargar: PNG, JPG, WEBP, GIF, SVG, BMP e ICO son todos compatibles.
¿Puedo usar la salida Base64 en CSS?
Sí. Use la URL de datos completa como valor de una propiedad CSS background-image.
¿Puedo usar la salida Base64 en una API JSON?
Sí. Copie la cadena Base64 sin procesar (sin el prefijo de URL de datos) para usarla como valor de un campo de imagen en una carga útil JSON.
¿Qué sucede con la transparencia en la salida Base64?
La transparencia se preserva completamente cuando la fuente es un PNG o WEBP con canal alfa.