# MP4 vs WebM: que formato de vídeo exportar [Canonical HTML page](https://gradiently.design/pt-pt/guide/mp4-vs-webm) Dois contentores, um punhado de codecs e uma pergunta prática: que ficheiro entregas ao Instagram e qual pões no teu site. ## The short version - O MP4 é o formato de vídeo mais seguro para exportar, porque reproduz-se em quase todos os telemóveis, navegadores, editores e plataformas sociais. - O WebM é um formato aberto e sem royalties, muitas vezes mais leve do que o MP4 com qualidade semelhante, o que o torna útil em sites. - Para carregamentos em redes sociais, exporta MP4, porque as plataformas o aceitam de forma fiável e recodificam tudo de qualquer maneira. - Num site, um padrão comum é oferecer primeiro o WebM e o MP4 como alternativa dentro de um só elemento de vídeo. - O WebM pode levar transparência nos navegadores que o suportam, o que o MP4 normal com H.264 não consegue. Na escolha **MP4 vs WebM**, exporta MP4 quando carregas para qualquer sítio que não controlas, como Instagram, TikTok, LinkedIn, a caixa de entrada de um cliente ou um editor de vídeo, porque reproduz-se quase em todo o lado. Escolhe WebM para o teu próprio site, onde costuma ser mais leve com a mesma qualidade, e idealmente oferece os dois para que cada navegador escolha o que reproduz melhor. Isto cobre a maioria das decisões. O resto desta página explica o porquê e os poucos casos em que a resposta muda. ## O que são realmente o MP4 e o WebM Ambos são **contentores**: caixas que guardam uma faixa de vídeo, uma faixa de áudio e alguma informação sobre elas. O que decide a qualidade e o tamanho é o **codec** lá dentro. O MP4 leva normalmente vídeo H.264 e áudio AAC, por vezes H.265 ou AV1. O WebM leva vídeo VP8, VP9 ou AV1 com áudio Opus ou Vorbis. O WebM foi criado como um formato aberto e sem royalties para a web; o MP4 é o padrão estabelecido há muito em torno do qual foram construídas câmaras, telemóveis e software de edição. | Característica | MP4 | WebM | | --- | --- | --- | | Codecs de vídeo habituais | H.264, H.265, AV1 | VP8, VP9, AV1 | | Codecs de áudio habituais | AAC | Opus, Vorbis | | Tamanho do ficheiro | Pequeno | Muitas vezes menor com qualidade semelhante | | Reproduz-se em | Quase tudo | Navegadores modernos; mais irregular em apps e editores | | Carregamentos em redes sociais | Aceite em todo o lado | Não aceite de forma fiável | | Transparência | Não com H.264 | Sim, com VP9 em navegadores compatíveis | | Licenciamento | Alguns codecs têm licenciamento de patentes | Aberto e sem royalties | O panorama geral. O suporte muda com o tempo, por isso confirma a compatibilidade atual dos navegadores no caniuse antes de contares com um caso-limite. ## Que formato para redes sociais Exporta MP4. Todas as grandes plataformas o aceitam, e todas recodificam o que carregas, por isso um WebM mais leve não te traz nada quando já lá está. O que realmente muda o aspeto do teu vídeo depois do carregamento é o tamanho do quadro, a taxa de fotogramas e a qualidade do ficheiro que envias. Envia um MP4 limpo de 1080×1920 para Reels e stories, ou 1080×1350 para uma publicação vertical de feed, e a plataforma não tem nada para redimensionar. - Reel, story, TikTok 9:16: 1080 × 1920 - Publicação vertical 4:5: 1080 × 1350 - Publicação quadrada 1:1: 1080 × 1080 - Paisagem 16:9: 1920 × 1080 Os quadros que mais vais exportar. Todos devem subir como MP4. Para a lista completa de quadros por plataforma, vê os [tamanhos de vídeo para redes sociais](https://gradiently.design/pt-pt/guide/social-video-sizes). ## Que formato para um site No teu próprio site controlas o leitor, por isso podes oferecer os dois. O navegador lê os elementos `source` por ordem e reproduz o primeiro que suporta. Põe o WebM primeiro se o teu ficheiro WebM for o mais leve dos dois e mantém o MP4 como alternativa para qualquer navegador que não o consiga reproduzir. ```html ``` WebM primeiro, MP4 como alternativa. O póster aparece enquanto o vídeo carrega e para quem tem um navegador que não reproduz nenhum dos dois. Mede antes de assumir. Em alguns clips, sobretudo muito curtos ou muito simples, um MP4 bem codificado é tão leve como o WebM, e servir um só ficheiro é mais simples. O guia da MDN sobre [codecs de vídeo para a web](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs) é a referência para o que cada navegador reproduz. Se o clip for um fundo, os [fundos de vídeo em sites](https://gradiently.design/pt-pt/guide/video-background-website) tratam de imagens de póster, dimensões e desempenho. ## Converter entre MP4 e WebM Se tens um formato e precisas do outro, a ferramenta gratuita de linha de comandos FFmpeg trata dos dois sentidos. Os comandos abaixo são pontos de partida sensatos para loops desenhados: sem áudio, boa qualidade e um MP4 que começa a reproduzir antes de estar totalmente descarregado. ```bash # WebM to MP4 (H.264), ready for social uploads and the web ffmpeg -i loop.webm -c:v libx264 -crf 20 -preset slow \ -pix_fmt yuv420p -movflags +faststart -an loop.mp4 # MP4 to WebM (VP9), usually smaller for your website ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 -an loop.webm ``` Um CRF mais baixo significa maior qualidade e ficheiros maiores. Remove -an se o vídeo tiver som que queiras manter. > **Porque é que o yuv420p importa** Alguns codificadores produzem ficheiros MP4 num formato de cor que telemóveis e navegadores recusam reproduzir. Definir `yuv420p` mantém o ficheiro no formato que tudo compreende. ## Gradientes, banding e qualidade Os gradientes suaves são o mais difícil de comprimir. Grandes áreas de cor em lenta mudança expõem qualquer falta de bits como degraus visíveis, e os gradientes escuros mostram-no primeiro. Ambos os formatos lidam bem com isto com uma definição de qualidade generosa; nenhum lida bem com uma forreta. Um toque de grão no design ajuda muito, porque os codificadores preservam a textura em vez de a achatar em faixas. - Suave: débito suficiente: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Em degraus: codificador sem recursos: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` Uma vista exagerada do banding. A solução é a mesma em MP4 e em WebM: mais qualidade, um pouco de grão e nenhuma redimensão extra. As causas e soluções para imagens fixas estão no [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding). A versão animada acrescenta mais uma regra: exporta no tamanho exato em que vais publicar, para que nada seja redimensionado duas vezes. ## Onde entra o GIF O GIF não é um formato de vídeo e é o maior dos três para o mesmo loop, com um limite de 256 cores que cria banding nos gradientes. O seu único reduto é o email, onde a maioria das caixas de entrada mostra GIFs e muito poucas reproduzem vídeo. A comparação dos três está em [GIF vs MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4), e a arte de fazer um bom está nos [GIFs animados](https://gradiently.design/pt-pt/guide/gif-maker-tips). ### Exporta MP4 para - Instagram, TikTok, LinkedIn, X, YouTube - Enviar a um cliente ou a um editor - Apresentações e ecrãs que não controlas - Sempre que tiveres dúvidas ### Exporta WebM para - O teu próprio site, ao lado de um MP4 - Sobreposições que precisam de transparência no navegador - Páginas onde cada kilobyte conta - Ferramentas no navegador que gravam WebM nativamente No Gradiently, as exportações de vídeo são uma funcionalidade Pro e saem em MP4 ou WebM, consoante o que o teu navegador consegue gravar. Em qualquer dos casos recebes o Mark em movimento por trás das tuas palavras até 1080p, pronto para carregar ou incorporar. Os pormenores estão em [exportar imagens e loops](https://gradiently.design/pt-pt/guide/export-images-and-loops). ## FAQ ### O WebM é melhor do que o MP4? O WebM é muitas vezes mais leve com qualidade semelhante e é aberto e sem royalties, mas o MP4 reproduz-se em muito mais dispositivos e apps. Para sites, o WebM é uma boa primeira escolha com o MP4 como alternativa; para tudo o resto, o MP4 é mais seguro. ### Posso carregar WebM no Instagram ou no TikTok? Não contes com isso. Converte primeiro para MP4, que todas as plataformas aceitam, no tamanho de quadro exato do formato em que vais publicar. ### O Safari reproduz WebM? As versões recentes do Safari reproduzem WebM, mas o suporte chegou mais tarde do que noutros navegadores e variou por codec e dispositivo. Oferecer um MP4 como alternativa evita a questão. ### Qual é mais leve, MP4 ou WebM? O WebM com VP9 ou AV1 é muitas vezes mais leve do que o MP4 com H.264 com qualidade semelhante, mas nem sempre. Codifica os dois e compara os ficheiros reais. ### Que formato suporta vídeo transparente? O WebM com VP9 pode levar um canal alfa que os navegadores compatíveis apresentam. O MP4 normal com H.264 não pode.