Guía para desarrolladores
Imagen Base64 en HTML, CSS y JavaScript
Ejemplos prácticos para incrustar datos de imagen Base64 en código front-end, con notas sobre rendimiento y tamaño de archivo.
4.8 / 5 124 valoraciones
¿Qué es un Data URI de Imagen Base64?
Un data URI combina el tipo MIME y el contenido Base64 en una sola cadena. Un formato común tiene la forma data:image/png;base64,iVBORw0KGgo...
Usas un valor data image base64 cuando quieres referenciar una imagen sin una URL de archivo separada. El navegador lee el texto y renderiza la imagen directamente.
Nota: las búsquedas de html a base64 suelen referirse a codificar un archivo HTML en sí. Esta guía se centra en colocar datos de imagen Base64 dentro de HTML, CSS y JavaScript.
Imagen Base64 en una Etiqueta HTML Img
Usa un data URI en el atributo src cuando necesites un fragmento HTML autocontenido con un patrón base64 img tag.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1x1 pixel" />Reemplaza el valor de ejemplo con la salida del convertidor Imagen a Base64.
Imagen de Fondo Base64 en CSS
Usa imágenes codificadas para iconos pequeños, marcadores de posición y fondos decorativos con un patrón background image base64.
.icon { width: 24px; height: 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="); background-size: cover; }Mantén los data URIs CSS pequeños para que tu hoja de estilos se analice y descargue rápidamente.
Convertir Imagen a Base64 con JavaScript
Genera Base64 en el navegador cuando necesites flujos convert image to base64 javascript para subidas, vistas previas o llamadas a API.
function fileToDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); }El resultado incluye el prefijo del data URI y el contenido codificado. Este es un enfoque común de imagen a base64 javascript.
const dataUrl = canvas.toDataURL('image/png'); const base64 = dataUrl.split(',')[1];Usa la salida del canvas cuando ya hayas dibujado la imagen en un elemento canvas.
Ejemplos de Imagen Base64
Las cadenas Base64 PNG y GIF son comunes para recursos de interfaz diminutos como iconos, marcadores de posición y puntos de carga.
JPEG Base64 suele comenzar con /9j/ cuando ves solo los caracteres codificados sin el prefijo.
Cuando la documentación menciona una cadena image to base64, normalmente se refiere a los caracteres codificados sin procesar o al data URI completo. Ambos formatos aparecen en proyectos reales.
Usa nuestras páginas de convertidores para crear un ejemplo base64 image o image base64 example desde tus propios archivos en lugar de depender de texto de marcador de posición.
Convertidores Relacionados
Ventajas y Desventajas de las Imágenes Base64
Ventajas
Reduces peticiones de archivos separados para recursos diminutos, mueves imágenes a través de JSON fácilmente y copias una cadena en múltiples lugares.
Desventajas
La salida de codificación base64 de imagen es más grande que el archivo fuente, más difícil de cachear como recurso independiente y poco adecuada para fotos grandes.
Preguntas Frecuentes
Pega el data URI completo en el atributo src de una etiqueta img. Puedes copiar un fragmento listo desde el convertidor Imagen a Base64.
Usa Base64 en CSS para recursos muy pequeños como iconos. Evita valores background image base64 grandes porque aumentan el tamaño de la hoja de estilos.
Base64 puede ayudar con archivos diminutos, pero normalmente perjudica el rendimiento con imágenes grandes porque la cadena codificada es más grande y más difícil de cachear por separado.
Usa FileReader con readAsDataURL para subidas o canvas.toDataURL cuando la imagen ya esté dibujada en un canvas. Ambos métodos devuelven una cadena que puedes dividir o pegar directamente.