¿Qué es un Data URI?
Un esquema Data URI (Identificador de Recursos Uniforme) te permite incrustar pequeños archivos en línea directamente dentro de documentos HTML o CSS. En lugar de enlazar a un archivo de imagen externo, la imagen se codifica en una cadena de texto Base64. Esto permite que el navegador renderice la imagen inmediatamente sin realizar una solicitud HTTP adicional.
¿Por qué procesar imágenes localmente?
Seguridad y velocidad. Muchas herramientas en línea suben tus archivos a servidores externos para procesarlos, lo que puede ser un riesgo de seguridad si trabajas con activos propietarios, diseños de interfaz no publicados o imágenes confidenciales. Esta herramienta utiliza la API nativa FileReader de tu navegador para generar las cadenas Base64. Tus imágenes nunca abandonan tu dispositivo.
¿Cuándo debo usar imágenes Base64?
Aunque incrustar imágenes directamente en tu código puede reducir las solicitudes HTTP, debe usarse de manera estratégica.
- Ideal para: Iconos pequeños, marcadores de carga (placeholders), pequeños elementos de interfaz, o plantillas de correo electrónico HTML donde las imágenes externas podrían bloquearse.
- Evitar para: Fotografías grandes o gráficos complejos. La codificación Base64 aumenta el tamaño de los archivos en aproximadamente un 33%. Colocar una imagen de 2MB directamente en tu archivo CSS causará un bloqueo de renderizado severo y ralentizará los tiempos de carga de tu página.