# GIF, MP4 ou WebM: qual formato usar em loops [Canonical HTML page](https://gradiently.design/pt-br/guide/gif-vs-mp4) O GIF é o formato que todo mundo conhece e que quase ninguém deveria usar na web. Também é o único que funciona numa caixa de entrada. Veja qual escolher, onde e por quê. ## The short version - Para sites e redes sociais, MP4 e WebM costumam ser bem menores que o GIF para o mesmo loop e mostram cores suaves. - O GIF mostra no máximo 256 cores em cada quadro, o que faz os gradientes terem banding ou parecerem salpicados. - O GIF continua sendo a escolha prática para animação em e-mail, porque a maioria dos clientes de e-mail não reproduz vídeo. - O WebM costuma ser menor que o MP4, mas o MP4 toca em quase todo lugar, então os sites costumam oferecer os dois. - WebP animado e AVIF são formatos de imagem modernos que substituem o GIF em sites, mas não são uma escolha segura para e-mail. **GIF ou MP4** se decide por onde o loop vai rodar. Em sites e redes sociais, o MP4 (e o primo aberto, o WebM) quase sempre é a escolha certa: os arquivos costumam ser muito menores, a cor é suave e a reprodução é eficiente. O GIF ainda é a escolha certa num só lugar, o e-mail, porque a maioria das caixas de entrada mostra GIFs animados e pouquíssimas reproduzem vídeo. Todo o resto deste guia é detalhe dessa regra. ## O que cada formato realmente é O GIF é um formato de imagem do fim dos anos 1980 que pode guardar vários quadros. Ele guarda cada quadro com uma paleta de no máximo 256 cores e comprime cada quadro por conta própria. O MP4 e o WebM são formatos de vídeo. Eles usam codecs de vídeo modernos, como o H.264 no MP4 e o VP9 ou o AV1 no WebM, que guardam o que muda entre os quadros em vez de cada quadro por inteiro. Num loop em que a maior parte da imagem muda devagar, essa diferença é enorme. | Característica | GIF | MP4 | WebM | | --- | --- | --- | --- | | Cores | Até 256 por quadro | Milhões | Milhões | | Tamanho do arquivo de um loop | O maior | Pequeno | Muitas vezes o menor | | Transparência | Ligada ou desligada por pixel, sem bordas suaves | Não | Sim, em alguns navegadores | | Som | Não | Sim | Sim | | Sites | Sim, como imagem | Sim, como vídeo | Sim, em navegadores modernos | | E-mail | A maioria dos clientes | Raramente | Raramente | | Uploads sociais | Varia conforme a plataforma | Em todo lugar | Algumas plataformas | O panorama geral. O suporte de plataformas e caixas de entrada específicas muda, então confira o lugar onde você vai publicar. ## Por que gradientes ficam feios em GIF Um gradiente liso num quadro de 1080 pixels pode usar milhares de cores distintas. Um quadro de GIF guarda 256 no máximo. O codificador tem duas opções: arredondar as cores para a mais próxima da paleta, o que produz listras visíveis, ou espalhar pixels de cores vizinhas para simular os tons intermediários, o chamado dithering, que parece salpicado e deixa os arquivos maiores. Nenhuma das duas se parece com o gradiente que você desenhou. - Liso: como desenhado: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)` - Em degraus: poucas cores: `linear-gradient(90deg, #1e1b4b 0% 12.5%, #36207a 12.5% 25%, #4f24a7 25% 37.5%, #6d28d9 37.5% 50%, #8e3bd0 50% 62.5%, #b04ec6 62.5% 75%, #d261bd 75% 87.5%, #f472b6 87.5% 100%)` Uma visão exagerada do que uma paleta limitada faz com um gradiente. Os GIFs reais têm mais degraus, mas em gradientes escuros e sutis as faixas ainda aparecem. O grão ajuda um pouco, porque imagens com ruído escondem melhor os limites da paleta do que as limpas. Mas a correção de verdade é não usar GIF onde o vídeo é possível. O [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) explica o mesmo problema em imagens estáticas. ## MP4 ou WebM para sites Num site, troque os GIFs por um elemento de vídeo que se comporte como um: com reprodução automática, mudo, em loop e embutido. O guia do web.dev sobre [trocar GIFs animados por vídeo](https://web.dev/articles/replace-gifs-with-videos) explica a abordagem. Ofereça o WebM primeiro, já que costuma ser menor, e o MP4 como reserva que toca em quase todo lugar. ```html ``` Um vídeo que se comporta como um GIF. A largura e a altura evitam que o layout pule enquanto ele carrega. Vale conhecer outros dois formatos. O **WebP animado** e o **AVIF animado** são formatos de imagem, usados numa tag `img` comum como um GIF, mas com cor completa e compressão bem melhor. Os navegadores modernos aceitam os dois. São úteis onde um CMS ou plataforma só aceita imagens, mas não para e-mail. Para fundos em largura total, leia [vídeos de fundo em sites](https://gradiently.design/pt-br/guide/video-background-website). ## Loops para redes sociais As plataformas sociais são construídas em torno do vídeo, e o MP4 é o formato que todas aceitam. Onde uma plataforma aceita upload de GIF, ela costuma tratá-lo de modo diferente de um vídeo normal, então o GIF raramente é vantagem. Exporte o seu loop como MP4 no tamanho da plataforma, em H.264, e deixe a plataforma fazer o resto. [Posts animados ou estáticos](https://gradiently.design/pt-br/guide/animated-social-posts) trata de tamanhos e configurações. ## Loops em e-mail: ainda GIF A maioria dos clientes de e-mail não reproduz vídeo, então um GIF animado é o jeito prático de pôr movimento num e-mail. Mantenha-o pequeno e trate o primeiro quadro como reserva: alguns clientes, incluindo algumas versões do Outlook clássico para Windows, mostram só o primeiro quadro. Ponha a mensagem nesse quadro para não perder nada. Os nossos guias de [design de cabeçalho de e-mail](https://gradiently.design/pt-br/guide/email-header-design) e de [gradientes em e-mail](https://gradiently.design/pt-br/guide/gradients-in-email) tratam do resto. 1. **Deixe curto** De dois a seis segundos bastam num e-mail; cada quadro acrescenta peso. 2. **Reduza o tamanho e a taxa de quadros** Exporte na largura em que ele é exibido, muitas vezes 600 pixels, e numa taxa de quadros menor, como 10 a 15 quadros por segundo, para movimentos lentos. 3. **Ponha a mensagem no quadro um** Leitores que veem só o primeiro quadro ainda devem entender o recado. 4. **Confira o tamanho do arquivo** GIFs grandes carregam devagar nos celulares. Se ele estiver pesado, corte a duração, o tamanho ou as cores antes de qualquer outra coisa. ## Convertendo entre GIF e MP4 O ffmpeg, uma ferramenta gratuita de linha de comando, faz as duas direções. Transformar vídeo num bom GIF exige uma paleta personalizada criada a partir do próprio vídeo; transformar um GIF em MP4 é mais simples. ```bash # MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif # GIF to MP4: H.264, even dimensions, ready for the web ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \ -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4 # MP4 to WebM (VP9) ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm ``` `palettegen` e `paletteuse` escolhem as 256 cores que combinam com este clipe, a maior melhoria isolada na qualidade do GIF. ## Qual formato usar, num relance | Onde roda | Use | Por quê | | --- | --- | --- | | Herói ou fundo de site | WebM com reserva em MP4 | Menores arquivos, cor suave | | Animação embutida num artigo | Vídeo MP4 ou WebP animado | Bem mais leve que o GIF | | Instagram, TikTok, LinkedIn, X | MP4 (H.264) | O que as plataformas esperam | | E-mail | GIF | A animação que a maioria das caixas de entrada mostra | | Apps de conversa e figurinhas | O que o app pedir | Cada app tem as próprias regras | Se você faz loops no Gradiently, o Studio exporta os dois: um vídeo (MP4 onde o seu navegador consegue gravar, senão WebM) de até 1080p e um GIF com escolha de qualidade, mantido abaixo de 15 MB. Garanta que o loop se una sem emendas, qualquer que seja a sua escolha; veja os [loops contínuos](https://gradiently.design/pt-br/guide/seamless-loop-video). ## FAQ ### MP4 é melhor que GIF? Para sites e redes sociais, sim: os arquivos MP4 costumam ser bem menores e mostram cor suave, enquanto o GIF é limitado a 256 cores por quadro. O GIF ainda é a melhor escolha para e-mail. ### Por que os meus GIFs de gradiente parecem listrados? O GIF guarda no máximo 256 cores por quadro, então gradientes lisos são arredondados em faixas ou espalhados em salpicos. Use vídeo onde puder ou crie uma paleta personalizada ao exportar. ### Devo usar WebM ou MP4? Em sites, ofereça primeiro o WebM, porque costuma ser menor, com o MP4 de reserva, porque toca em quase todo lugar. Para uploads sociais, use MP4. ### Posso pôr um vídeo num e-mail? Pouquíssimos clientes de e-mail reproduzem vídeo. Use um GIF animado, mantenha-o pequeno e garanta que o primeiro quadro leve a mensagem, já que alguns clientes mostram só esse quadro. ### O que é WebP animado? É um formato de imagem que pode guardar animação com cor completa e compressão melhor que a do GIF. Os navegadores modernos o aceitam, mas os clientes de e-mail em geral não.