GIF Loaders vs Vector Animation: Varför team ersätter animerade GIF i användargränssnittet
Varför animerade GIF passar dåligt för UI-laddare och ikoner, vad man ska använda istället (CSS, SVG, Lottie, video, tillståndsbaserade körtider) och hur man väljer.
Core Takeaway
Animerade GIF är begränsade till paletter med högst 256 färger, har på- eller av-transparens, oskarpa när de skalas och kan inte reagera på appens tillstånd. För UI-laddare och ikoner är CSS- eller SVG-animering vanligtvis lättare och skarpare; Lottie fungerar för rikare illustrationer; och tillståndsbaserade körtider som ExodeUI eller Rive är bäst när animeringen måste ändras med laddning, framgång och fel.
Vad GIF kan och inte kan göra
MDN:s bildformatguide förklarar att varje GIF-pixel är ett index till en palett med högst 256 färger, och noterar att äldre format som GIF presterar dåligt jämfört med nyare som WebP och AVIF. För användargränssnittet är de praktiska problemen bandning i gradienter, ojämna kanter på transparenta bakgrunder, suddig skalning på högdensitetsskärmar och inget sätt att svara på vad appen gör.
Vad ska man använda istället
Välj efter vad animeringen behöver göra:
- Enkel spinner eller puls: CSS-animation eller en inline SVG. Liten, skarp och lätt att pausa för minskad rörelse.
- Illustrerad slinga eller ikon: Lottie eller animerad SVG. Vektor, skalbar, liten för enkla konstverk.
- Fotografiskt eller komplext material: video (WebM eller MP4) eller animerad WebP/AVIF, inte GIF.
- Laddare som förvandlas till framgång eller misstag: en tillståndsbaserad körtid som ExodeUI eller Rive, som drivs av appens tillstånd.
Lastare bör veta vad som händer
En GIF loopar på samma sätt oavsett om begäran tar en sekund eller en minut, och den kan inte bli en bock när arbetet är klart. En tillståndsbaserad laddare kan gå från laddning till framgång eller misstag och visa framsteg, vilket berättar mycket mer än en snurrande bild.
Tillgänglighet
Looping GIFs kan inte respektera inställningen för reducerad rörelse på egen hand. CSS, SVG och runtime-animationer kan pausas eller förenklas när användaren ber om mindre rörelse. Ge även laddare en tillgänglig etikett, till exempel "Laddar in resultat", så att användare av skärmläsare vet vad som händer.
Nyckel Principles att komma ihåg
- GIF-paletter håller som mest 256 färger och skalar dåligt
- Använd CSS eller SVG för enkla lastare
- Använd Lottie för illustrerade loopar, video för film
- Använd en tillståndsbaserad körning när laddningen måste bli framgångsrik eller fel
- Stöd minskad rörelse och lägg till tillgängliga etiketter
Vanliga frågor
Källor
- Image file type and format guide — MDN Web Docs
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN Web Docs