Cargadores GIF frente a animación vectorial: por qué los equipos están reemplazando los GIF animados en la interfaz de usuario
Por qué los GIF animados no son adecuados para los cargadores e íconos de UI, qué usar en su lugar (CSS, SVG, Lottie, video, tiempos de ejecución basados en estado) y cómo elegir.
Idea clave
Los GIF animados están limitados a paletas de 256 colores como máximo, tienen transparencia activada o desactivada, se vuelven borrosos cuando se escalan y no pueden reaccionar al estado de la aplicación. Para los iconos y cargadores de UI, la animación CSS o SVG suele ser más clara y nítida; Lottie funciona para ilustraciones más ricas; y los tiempos de ejecución basados en estado como ExodeUI o Rive son mejores cuando la animación debe cambiar con la carga, el éxito y el error.
Qué puede y no puede hacer GIF
La guía de formato de imagen de MDN explica que cada píxel GIF es un índice en una paleta de como máximo 256 colores y señala que los formatos más antiguos, como GIF, funcionan mal en comparación con los más nuevos, como WebP y AVIF. Para la interfaz de usuario, los problemas prácticos son bandas en degradados, bordes irregulares en fondos transparentes, escalas borrosas en pantallas de alta densidad y no hay forma de responder a lo que hace la aplicación.
Que usar en su lugar
Elija según lo que debe hacer la animación:
- Spinner o pulso simple: animación CSS o SVG en línea. Pequeño, nítido y fácil de pausar para reducir el movimiento.
- Bucle o icono ilustrado: Lottie o SVG animado. Vectorial, escalable, pequeño para obras de arte sencillas.
- Material fotográfico o complejo: vídeo (WebM o MP4) o WebP/AVIF animado, no GIF.
- Cargador que se convierte en éxito o error: un tiempo de ejecución basado en estado como ExodeUI o Rive, controlado por el estado de su aplicación.
Los cargadores deben saber lo que está pasando
Un GIF se repite de la misma manera ya sea que la solicitud demore un segundo o un minuto, y no puede convertirse en una marca de verificación cuando el trabajo esté terminado. Un cargador basado en estados puede pasar de la carga al éxito o al error y mostrar el progreso, lo que le dice a la gente mucho más que una imagen giratoria.
Accesibilidad
Los GIF en bucle no pueden respetar la configuración de movimiento reducido por sí solos. CSS, SVG y las animaciones en tiempo de ejecución se pueden pausar o simplificar cuando el usuario solicita menos movimiento. También proporcione a los cargadores una etiqueta accesible, como "Resultados de carga", para que los usuarios de lectores de pantalla sepan lo que está sucediendo.
Principios clave para recordar
- Las paletas GIF contienen como máximo 256 colores y escalan mal
- Utilice CSS o SVG para cargadores simples
- Utilice Lottie para bucles ilustrados y vídeo para metraje.
- Utilice un tiempo de ejecución basado en estado cuando la carga deba convertirse en un éxito o un error
- Admite movimiento reducido y agrega etiquetas accesibles
Preguntas frecuentes
Fuentes
- Image file type and format guide — Documentos web MDN
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — Documentos web MDN