# GIF vs MP4 vs WebM: que formato usar para loops [Canonical HTML page](https://gradiently.design/pt-pt/guide/gif-vs-mp4) O GIF é o formato que toda a gente conhece e que quase ninguém devia usar na web. É também o único que funciona numa caixa de correio. Eis qual escolher, onde e porquê. ## The short version - Para sites e redes sociais, o MP4 e o WebM são normalmente muito mais leves do que o GIF para o mesmo loop e mostram cor suave. - O GIF pode mostrar no máximo 256 cores em cada fotograma, o que faz os gradientes criarem faixas ou parecerem salpicados. - O GIF continua a ser a escolha prática para animação em email, porque a maioria dos clientes de email não reproduz vídeo. - O WebM é muitas vezes mais leve do que o MP4, mas o MP4 reproduz-se em quase todo o lado, por isso os sites costumam oferecer os dois. - O WebP animado e o AVIF animado são formatos de imagem modernos que substituem o GIF nos sites, mas não são uma escolha segura para email. **GIF vs MP4** decide-se pelo sítio onde o loop vai correr. Em sites e redes sociais, o MP4 (e o seu primo aberto, o WebM) é quase sempre a escolha certa: os ficheiros costumam ser muito mais leves, a cor é suave e a reprodução é eficiente. O GIF continua a ser a escolha certa num único sítio, o email, porque a maioria das caixas de correio mostra GIFs animados e muito poucas reproduzem vídeo. Tudo o resto neste guia é pormenor sobre esta regra. ## O que é realmente cada formato O GIF é um formato de imagem do final dos anos 80 que consegue guardar vários fotogramas. Guarda cada fotograma com uma paleta de no máximo 256 cores e comprime cada um à sua maneira. O MP4 e o WebM são formatos de vídeo. 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 fotogramas em vez de guardarem cada fotograma 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 fotograma | Milhões | Milhões | | Tamanho do ficheiro para um loop | O maior | Pequeno | Muitas vezes o menor | | Transparência | Ligada ou desligada por píxel, sem bordas suaves | Não | Sim, em alguns navegadores | | Som | Não | Sim | Sim | | Sites | Sim, como imagem | Sim, como vídeo | Sim, nos navegadores modernos | | Email | A maioria dos clientes | Raramente | Raramente | | Carregamentos nas redes | Varia conforme a plataforma | Em todo o lado | Algumas plataformas | O panorama geral. O suporte em plataformas e caixas de correio específicas muda, por isso confirma no sítio onde vais publicar. ## Porque é que os gradientes ficam mal em GIF Um gradiente suave num fotograma de 1080 píxeis pode usar milhares de cores diferentes. Um fotograma GIF pode ter no máximo 256. O codificador tem duas opções: arredondar as cores para a mais próxima da paleta, o que produz riscas visíveis, ou espalhar píxeis de cores vizinhas para simular as intermédias, o chamado dithering, que parece salpicado e torna os ficheiros maiores. Nenhuma das duas se parece com o gradiente que desenhaste. - Suave: como foi desenhado: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)` - Em degraus: cores a menos: `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 a um gradiente. Os GIFs reais têm mais degraus, mas em gradientes escuros e subtis as faixas continuam a notar-se. O grão ajuda um pouco, porque as imagens com ruído escondem os limites da paleta melhor do que as limpas. Mas a verdadeira solução é não usar GIF onde é possível usar vídeo. [Faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) explica o mesmo problema em imagens fixas. ## MP4 ou WebM para sites Num site, substitui os GIFs por um elemento de vídeo que se comporte como eles: com reprodução automática, sem som, em loop e em linha. O guia da web.dev sobre [substituir GIFs animados por vídeo](https://web.dev/articles/replace-gifs-with-videos) explica a abordagem. Oferece primeiro o WebM, que é muitas vezes mais leve, e o MP4 como alternativa que se reproduz em quase todo o lado. ```html ``` Um vídeo que se comporta como um GIF. A largura e a altura impedem que a página salte enquanto carrega. Há mais dois formatos que vale a pena conhecer. O **WebP animado** e o **AVIF animado** são formatos de imagem, usados numa tag `img` normal como um GIF, mas com cor completa e uma compressão muito melhor. Os navegadores modernos suportam ambos. Dão jeito onde um CMS ou uma plataforma só aceita imagens, mas não servem para email. Para fundos em largura total, lê [vídeos de fundo em sites](https://gradiently.design/pt-pt/guide/video-background-website). ## Loops para redes sociais As plataformas sociais são construídas à volta do vídeo, e o MP4 é o formato que todas aceitam. Quando uma plataforma aceita GIFs, muitas vezes trata-os de forma diferente de um vídeo normal, por isso um GIF raramente é uma vantagem. Exporta o loop em MP4 no tamanho da plataforma, em H.264, e deixa a plataforma fazer o resto. [Publicações animadas vs estáticas](https://gradiently.design/pt-pt/guide/animated-social-posts) trata de tamanhos e definições. ## Loops em email: ainda o GIF A maioria dos clientes de email não reproduz vídeo, por isso um GIF animado é a forma prática de pôr movimento num email. Mantém-no leve e trata o primeiro fotograma como alternativa: alguns clientes, incluindo algumas versões do Outlook clássico para Windows, mostram só o primeiro fotograma. Põe a mensagem nesse fotograma para que nada se perca. Os nossos guias sobre [design de cabeçalhos de email](https://gradiently.design/pt-pt/guide/email-header-design) e [gradientes em email](https://gradiently.design/pt-pt/guide/gradients-in-email) tratam do resto. 1. **Mantém-no curto** Dois a seis segundos chegam e sobram num email; cada fotograma acrescenta peso. 2. **Reduz o tamanho e a taxa de fotogramas** Exporta na largura em que é mostrado, muitas vezes 600 píxeis, e com uma taxa de fotogramas mais baixa, como 10 a 15 fotogramas por segundo, para movimentos lentos. 3. **Põe a mensagem no primeiro fotograma** Quem só vê o primeiro fotograma deve perceber a mensagem na mesma. 4. **Verifica o tamanho do ficheiro** Os GIFs pesados carregam devagar no telemóvel. Se for pesado, corta primeiro a duração, o tamanho ou as cores. ## Converter entre GIF e MP4 O ffmpeg, uma ferramenta gratuita de linha de comandos, trata das duas direções. Transformar vídeo num bom GIF exige uma paleta personalizada construída 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 ``` O `palettegen` e o `paletteuse` escolhem as 256 cores que melhor servem este clipe, a maior melhoria isolada na qualidade de um GIF. ## Que formato usar, num relance | Onde corre | Usa | Porquê | | --- | --- | --- | | Imagem principal ou fundo de um site | WebM com MP4 como alternativa | Ficheiros mais leves, cor suave | | Animação dentro de um artigo | Vídeo MP4 ou WebP animado | Muito mais leve do que o GIF | | Instagram, TikTok, LinkedIn, X | MP4 (H.264) | O que as plataformas esperam | | Email | GIF | A animação que a maioria das caixas de correio mostra | | Aplicações de chat e stickers | O que a aplicação pedir | Cada aplicação tem as suas regras | Se fazes loops na Gradiently, o Studio exporta os dois: um vídeo (MP4 quando o navegador o consegue gravar, senão WebM) até 1080p, e um GIF com qualidade à escolha, mantido abaixo dos 15 MB. Garante que o loop se une sem falhas, seja qual for a escolha; vê [loops contínuos](https://gradiently.design/pt-pt/guide/seamless-loop-video). ## FAQ ### O MP4 é melhor do que o GIF? Para sites e redes sociais, sim: os ficheiros MP4 costumam ser muito mais leves e mostram cor suave, enquanto o GIF está limitado a 256 cores por fotograma. O GIF continua a ser a melhor escolha para email. ### Porque é que os meus GIFs com gradiente aparecem às riscas? O GIF só pode ter 256 cores por fotograma, por isso os gradientes suaves são arredondados em faixas ou salpicados com dithering. Usa vídeo sempre que puderes, ou constrói uma paleta personalizada ao exportar. ### Devo usar WebM ou MP4? Nos sites, oferece primeiro o WebM, que é muitas vezes mais leve, com o MP4 como alternativa porque se reproduz em quase todo o lado. Para carregar nas redes sociais, usa MP4. ### Posso pôr um vídeo num email? Muito poucos clientes de email reproduzem vídeo. Usa um GIF animado, mantém-no leve e garante que o primeiro fotograma transmite a mensagem, porque alguns clientes só mostram esse fotograma. ### O que é o WebP animado? É um formato de imagem que pode conter animação com cor completa e melhor compressão do que o GIF. Os navegadores modernos suportam-no, mas os clientes de email geralmente não.