GIF-Loader vs. Vektoranimation: Warum Teams animierte GIFs in der Benutzeroberfläche ersetzen
Warum animierte GIFs nicht für UI-Loader und -Symbole geeignet sind, was man stattdessen verwenden sollte (CSS, SVG, Lottie, Video, zustandsbasierte Laufzeiten) und wie man wählt.
Kernaussage
Animierte GIFs sind auf Paletten mit maximal 256 Farben beschränkt, haben eine ein- oder ausschaltbare Transparenz, verschwimmen beim Skalieren und können nicht auf den App-Status reagieren. Bei UI-Loadern und Symbolen ist die CSS- oder SVG-Animation normalerweise heller und schärfer; Lottie eignet sich für reichhaltigere Illustrationen; und zustandsbasierte Laufzeiten wie ExodeUI oder Rive eignen sich am besten, wenn sich die Animation beim Laden, Erfolg und Fehler ändern muss.
Was GIF kann und was nicht
Im Bildformatleitfaden von MDN wird erklärt, dass jedes GIF-Pixel ein Index für eine Palette von höchstens 256 Farben ist, und es wird darauf hingewiesen, dass ältere Formate wie GIF im Vergleich zu neueren Formaten wie WebP und AVIF eine schlechte Leistung erbringen. Bei der Benutzeroberfläche liegen die praktischen Probleme in der Streifenbildung in Farbverläufen, gezackten Kanten auf transparenten Hintergründen, verschwommener Skalierung auf Bildschirmen mit hoher Dichte und der fehlenden Möglichkeit, auf die Aktionen der App zu reagieren.
Was stattdessen verwendet werden sollte
Wählen Sie aus, was die Animation tun soll:
- Einfacher Spinner oder Puls: CSS-Animation oder ein Inline-SVG. Winzig, scharf und leicht anzuhalten, um die Bewegung zu reduzieren.
- Illustrierte Schleife oder Symbol: Lottie oder animiert SVG. Vektor, skalierbar, klein für einfache Grafiken.
- Fotografisches oder komplexes Filmmaterial: Video (WebM oder MP4) oder animiertes WebP/AVIF, nicht GIF.
- Loader, der zu Erfolg oder Fehler führt: eine zustandsbasierte Laufzeit wie ExodeUI oder Rive, gesteuert durch den Zustand Ihrer App.
Lader sollten wissen, was passiert
Ein GIF durchläuft die gleiche Schleife, unabhängig davon, ob die Anforderung eine Sekunde oder eine Minute dauert, und kann nicht zu einem Häkchen werden, wenn die Arbeit erledigt ist. Ein zustandsbasierter Lader kann vom Laden zum Erfolg oder Fehler wechseln und den Fortschritt anzeigen, was den Leuten weit mehr sagt als ein sich drehendes Bild.
Zugänglichkeit
Looping-GIFs können die Einstellung für reduzierte Bewegung nicht alleine berücksichtigen. CSS, SVG und Laufzeitanimationen können angehalten oder vereinfacht werden, wenn der Benutzer weniger Bewegung wünscht. Geben Sie Loadern außerdem eine zugängliche Bezeichnung, z. B. „Ergebnisse werden geladen“, damit Benutzer von Bildschirmleseprogrammen wissen, was passiert.
Wichtige Prinzipien
- GIF-Paletten enthalten höchstens 256 Farben und lassen sich schlecht skalieren
- Verwenden Sie CSS oder SVG für einfache Lader
- Verwenden Sie Lottie für illustrierte Loops und Video für Filmmaterial
- Verwenden Sie eine zustandsbasierte Laufzeit, wenn der Ladevorgang zu einem Erfolg oder Fehler führen muss
- Unterstützen Sie reduzierte Bewegungen und fügen Sie barrierefreie Beschriftungen hinzu
Häufige Fragen
Quellen
- Image file type and format guide — MDN Webdokumente
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN Webdokumente