Carregadores GIF versus animação vetorial: por que as equipes estão substituindo GIFs animados na interface do usuário
Por que GIFs animados não são adequados para carregadores de UI e ícones, o que usar em vez disso (CSS, SVG, Lottie, vídeo, tempos de execução baseados em estado) e como escolher.
Ponto principal
GIFs animados são limitados a paletas de no máximo 256 cores, têm transparência ativada ou desativada, desfocados quando dimensionados e não podem reagir ao estado do aplicativo. Para carregadores e ícones de UI, a animação CSS ou SVG geralmente é mais leve e nítida; Lottie funciona para ilustrações mais ricas; e tempos de execução baseados em estado, como ExodeUI ou Rive, são melhores quando a animação precisa mudar com carregamento, sucesso e erro.
O que GIF pode e não pode fazer
O guia de formato de imagem do MDN explica que cada pixel GIF é um índice em uma paleta de no máximo 256 cores e observa que formatos mais antigos, como GIF, têm desempenho ruim em comparação com os mais recentes, como WebP e AVIF. Para a UI, os problemas práticos são faixas em gradientes, bordas irregulares em fundos transparentes, dimensionamento borrado em telas de alta densidade e nenhuma maneira de responder ao que o aplicativo está fazendo.
O que usar em vez disso
Escolha o que a animação precisa fazer:
- Spinner ou pulso simples: animação CSS ou um SVG embutido. Minúsculo, nítido e fácil de pausar para reduzir o movimento.
- Loop ou ícone ilustrado: Lottie ou SVG animado. Vetor, escalável, pequeno para obras de arte simples.
- Imagens fotográficas ou complexas: vídeo (WebM ou MP4) ou WebP/AVIF animado, não GIF.
- Carregador que se transforma em sucesso ou erro: um tempo de execução baseado em estado, como ExodeUI ou Rive, orientado pelo estado do seu aplicativo.
Os carregadores devem saber o que está acontecendo
Um GIF faz um loop da mesma maneira, independentemente de a solicitação levar um segundo ou um minuto, e não pode se tornar uma marca de seleção quando o trabalho é concluído. Um carregador baseado em estado pode passar do carregamento para o sucesso ou erro e mostrar o progresso, o que diz às pessoas muito mais do que uma imagem giratória.
Acessibilidade
Os GIFs em loop não podem respeitar a configuração de movimento reduzido por conta própria. CSS, SVG e animações de tempo de execução podem ser pausadas ou simplificadas quando o usuário solicitar menos movimento. Forneça também aos carregadores um rótulo acessível, como "Carregando resultados", para que os usuários de leitores de tela saibam o que está acontecendo.
Princípios-chave para lembrar
- As paletas GIF contêm no máximo 256 cores e são mal dimensionadas
- Use CSS ou SVG para carregadores simples
- Use Lottie para loops ilustrados, vídeo para filmagens
- Use um tempo de execução baseado em estado quando o carregamento precisar se transformar em sucesso ou erro
- Suporta movimento reduzido e adiciona rótulos acessíveis
Perguntas frequentes
Fontes
- Image file type and format guide — Documentos da Web MDN
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — Documentos da Web MDN