Caricatori GIF e animazione vettoriale: perché i team stanno sostituendo gli GIF animati nell'interfaccia utente
Perché gli GIF animati non sono adatti ai caricatori e alle icone dell'interfaccia utente, cosa utilizzare invece (CSS, SVG, Lottie, video, runtime basati sullo stato) e come scegliere.
Punto chiave
Gli GIF animati sono limitati a tavolozze di massimo 256 colori, hanno trasparenza attivata o disattivata, sfocano quando ridimensionati e non possono reagire allo stato dell'app. Per i caricatori e le icone dell'interfaccia utente, l'animazione CSS o SVG è generalmente più chiara e nitida; Lottie funziona per illustrazioni più ricche; e runtime basati sullo stato come ExodeUI o Rive sono i migliori quando l'animazione deve cambiare con caricamento, successo ed errore.
Cosa GIF può e non può fare
La guida al formato immagine di MDN spiega che ogni pixel GIF è un indice in una tavolozza di un massimo di 256 colori e rileva che i formati più vecchi come GIF hanno prestazioni scarse rispetto a quelli più recenti come WebP e AVIF. Per quanto riguarda l'interfaccia utente, i problemi pratici sono le bande nei gradienti, i bordi frastagliati su sfondi trasparenti, il ridimensionamento sfocato su schermi ad alta densità e l'impossibilità di rispondere a ciò che sta facendo l'app.
Cosa usare invece
Scegli in base a cosa deve fare l'animazione:
- Spinner o impulso semplice: animazione CSS o SVG in linea. Piccolo, nitido e facile da mettere in pausa per movimenti ridotti.
- Loop o icona illustrata: Lottie o SVG animato. Vettoriale, scalabile, piccolo per opere d'arte semplici.
- Riprese fotografiche o complesse: video (WebM o MP4) o WebP/AVIF animato, non GIF.
- Caricatore che si trasforma in successo o errore: un runtime basato sullo stato come ExodeUI o Rive, guidato dallo stato della tua app.
I caricatori dovrebbero sapere cosa sta succedendo
Un GIF si ripete allo stesso modo indipendentemente dal fatto che la richiesta richieda un secondo o un minuto e non può diventare un segno di spunta una volta terminato il lavoro. Un caricatore basato sullo stato può passare dal caricamento al successo o all'errore e mostrare i progressi, il che dice alle persone molto più di un'immagine che gira.
Accessibilità
Gli GIF in loop non possono rispettare da soli l'impostazione del movimento ridotto. CSS, SVG e le animazioni runtime possono essere messe in pausa o semplificate quando l'utente richiede meno movimento. Assegna inoltre ai caricatori un'etichetta accessibile, ad esempio "Caricamento risultati", in modo che gli utenti dei lettori di schermo sappiano cosa sta succedendo.
Principi chiave da ricordare
- Le tavolozze GIF contengono al massimo 256 colori e hanno una scalabilità scarsa
- Utilizzare CSS o SVG per caricatori semplici
- Utilizza Lottie per loop illustrati, video per filmati
- Utilizzare un runtime basato sullo stato quando il caricamento deve trasformarsi in un successo o in un errore
- Supporta il movimento ridotto e aggiungi etichette accessibili
Domande frequenti
Fonti
- Image file type and format guide — MDN Documenti Web
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN Documenti Web