GIF-lastere vs vektoranimasjon: Hvorfor team erstatter animerte GIF-er i brukergrensesnittet
Hvorfor animerte GIF-er passer dårlig for UI-lastere og ikoner, hva du skal bruke i stedet (CSS, SVG, Lottie, video, tilstandsbaserte kjøretider) og hvordan du velger.
Kjerne takeaway
Animerte GIF-er er begrenset til paletter med maksimalt 256 farger, har på-eller-av-gjennomsiktighet, uskarphet når de skaleres og kan ikke reagere på apptilstand. For brukergrensesnittlastere og ikoner er CSS- eller SVG-animasjonen vanligvis lettere og skarpere; Lottie fungerer for rikere illustrasjoner; og tilstandsbaserte kjøretider som ExodeUI eller Rive er best når animasjonen må endres med lasting, suksess og feil.
Hva GIF kan og ikke kan gjøre
MDN's image format guide explains that each GIF pixel is an index into a palette of at most 256 colours, and notes that older formats such as GIF perform poorly compared with newer ones such as WebP and AVIF. For UI er de praktiske problemene bånd i gradienter, taggete kanter på gjennomsiktig bakgrunn, uskarp skalering på skjermer med høy tetthet, og ingen måte å svare på hva appen gjør.
Hva du skal bruke i stedet
Velg hva animasjonen skal gjøre:
- Enkel spinner eller puls: CSS-animasjon eller en innebygd SVG. Liten, skarp og lett å sette på pause for redusert bevegelse.
- Illustrert loop eller ikon: Lottie eller animert SVG. Vektor, skalerbar, liten for enkle kunstverk.
- Fotografiske eller komplekse opptak: video (WebM eller MP4) eller animert WebP/AVIF, ikke GIF.
- Laster som blir til suksess eller feil: en tilstandsbasert kjøretid som ExodeUI eller Rive, drevet av appens tilstand.
Lastere bør vite hva som skjer
En GIF går på samme måte enten forespørselen tar ett sekund eller ett minutt, og den kan ikke bli et hakemerke når arbeidet er ferdig. En tilstandsbasert laster kan gå fra lasting til suksess eller feil og vise fremgang, noe som forteller folk mye mer enn et spinnende bilde.
Tilgjengelighet
Looping GIFs kan ikke respektere innstillingen for redusert bevegelse alene. CSS, SVG og kjøretidsanimasjoner kan settes på pause eller forenkles når brukeren ber om mindre bevegelse. Gi også lastere en tilgjengelig etikett, for eksempel "Laster resultater", slik at brukere av skjermlesere vet hva som skjer.
Tast Principles å huske
- GIF-paletter holder på det meste 256 farger og skaleres dårlig
- Bruk CSS eller SVG for enkle lastere
- Bruk Lottie for illustrerte looper, video for opptak
- Bruk en tilstandsbasert kjøretid når lasting må bli til suksess eller feil
- Støtt redusert bevegelse og legg til tilgjengelige etiketter
Ofte stilte spørsmål
Kilder
- Image file type and format guide — MDN Web Docs
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN Web Docs