Chargeurs GIF vs animation vectorielle : pourquoi les équipes remplacent les GIF animés dans l'interface utilisateur
Pourquoi les GIF animés ne conviennent pas aux chargeurs et aux icônes de l'interface utilisateur, quoi utiliser à la place (CSS, SVG, Lottie, vidéo, environnements d'exécution basés sur l'état) et comment choisir.
À retenir
Les GIF animés sont limités à des palettes de 256 couleurs maximum, ont une transparence activée ou désactivée, sont floues lorsqu'elles sont mises à l'échelle et ne peuvent pas réagir à l'état de l'application. Pour les chargeurs et les icônes de l'interface utilisateur, l'animation CSS ou SVG est généralement plus claire et plus nette ; Lottie fonctionne pour des illustrations plus riches ; et les environnements d'exécution basés sur l'état tels que ExodeUI ou Rive sont les meilleurs lorsque l'animation doit changer en fonction du chargement, du succès et des erreurs.
Ce que GIF peut et ne peut pas faire
Le guide des formats d'image de MDN explique que chaque pixel GIF est un index dans une palette d'au plus 256 couleurs, et note que les anciens formats tels que GIF fonctionnent mal par rapport aux plus récents tels que WebP et AVIF. Pour l’interface utilisateur, les problèmes pratiques sont les dégradés de bandes, les bords irréguliers sur les arrière-plans transparents, la mise à l’échelle floue sur les écrans haute densité et l’absence de moyen de répondre à ce que fait l’application.
Quoi utiliser à la place
Choisissez en fonction de ce que l'animation doit faire :
- Simple spinner ou impulsion : animation CSS ou SVG en ligne. Minuscule, net et facile à mettre en pause pour réduire les mouvements.
- Boucle ou icône illustrée : Lottie ou SVG animée. Vecteur, évolutif, petit pour des illustrations simples.
- Images photographiques ou complexes : vidéo (WebM ou MP4) ou WebP/AVIF animé, pas GIF.
- Chargeur qui se transforme en succès ou en erreur : un runtime basé sur l'état tel que ExodeUI ou Rive, piloté par l'état de votre application.
Les chargeurs devraient savoir ce qui se passe
Un GIF boucle de la même manière, que la requête prenne une seconde ou une minute, et il ne peut pas devenir une coche une fois le travail terminé. Un chargeur basé sur l'état peut passer du chargement au succès ou à l'erreur et afficher la progression, ce qui en dit bien plus qu'une image tournante.
Accessibilité
Les GIF en boucle ne peuvent pas respecter à eux seuls le réglage du mouvement réduit. CSS, SVG et les animations d'exécution peuvent être mises en pause ou simplifiées lorsque l'utilisateur demande moins de mouvement. Donnez également aux chargeurs une étiquette accessible, telle que « Résultats de chargement », afin que les utilisateurs de lecteurs d'écran sachent ce qui se passe.
Principes clés à retenir
- Les palettes GIF contiennent au maximum 256 couleurs et sont mal mises à l'échelle
- Utilisez CSS ou SVG pour les chargeurs simples
- Utilisez Lottie pour les boucles illustrées et la vidéo pour les séquences
- Utilisez un runtime basé sur l'état lorsque le chargement doit se transformer en succès ou en erreur
- Prend en charge la réduction des mouvements et ajoute des étiquettes accessibles
Questions fréquentes
Sources
- Image file type and format guide — Documents Web MDN
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — Documents Web MDN