# MP4 vs WebM: qual formato de vídeo exportar [Canonical HTML page](https://gradiently.design/pt-br/guide/mp4-vs-webm) Dois contêineres, um punhado de codecs e uma pergunta prática: qual arquivo você entrega ao Instagram e qual coloca no seu site. ## The short version - O MP4 é o formato de vídeo mais seguro para exportar, porque toca em quase todo celular, navegador, editor e plataforma social. - O WebM é um formato aberto e livre de royalties que costuma ser menor que o MP4 com qualidade parecida, o que o torna útil em sites. - Para uploads em redes sociais, exporte em MP4, porque as plataformas o aceitam sem problemas e recodificam tudo de qualquer jeito. - Em um site, um padrão comum é oferecer o WebM primeiro e o MP4 como alternativa dentro de um mesmo elemento de vídeo. - O WebM pode carregar transparência nos navegadores que o suportam, o que o MP4 comum com H.264 não consegue. Na escolha **MP4 vs WebM**, exporte em MP4 quando for enviar para qualquer lugar que você não controla, como Instagram, TikTok, LinkedIn, a caixa de entrada de um cliente ou um editor de vídeo, porque ele toca em quase tudo. Escolha o WebM para o seu próprio site, onde ele costuma ser menor com a mesma qualidade e, idealmente, ofereça os dois para que cada navegador pegue o que reproduz melhor. Isso resolve a maioria das decisões. O resto desta página explica o porquê e os poucos casos em que a resposta muda. ## O que MP4 e WebM realmente são Ambos são **contêineres**: caixas que guardam um fluxo de vídeo, um fluxo de áudio e algumas informações sobre eles. O que decide qualidade e tamanho é o **codec** lá dentro. O MP4 costuma levar vídeo H.264 e áudio AAC, às 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 livre de royalties para a web; o MP4 é o padrão consolidado em torno do qual câmeras, celulares e programas de edição foram construídos. | 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 arquivo | Pequeno | Muitas vezes menor com qualidade parecida | | Toca em | Quase tudo | Navegadores modernos; mais irregular em apps e editores | | Uploads em redes sociais | Aceito em todo lugar | Não é aceito de forma confiá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 livre de royalties | O panorama geral. O suporte muda com o tempo, então confira a compatibilidade atual dos navegadores no caniuse antes de depender de um caso extremo. ## Qual formato para redes sociais Exporte em MP4. Toda grande plataforma o aceita, e toda plataforma recodifica o que você envia, então um WebM menor não adianta nada depois de lá. O que realmente muda a aparência do seu vídeo depois do upload é o tamanho do quadro, a taxa de quadros e a qualidade do arquivo que você manda. Envie um MP4 limpo de 1080×1920 para Reels e stories, ou 1080×1350 para um post vertical no feed, e a plataforma não tem nada para redimensionar. - Reel, story, TikTok 9:16: 1080 × 1920 - Post vertical 4:5: 1080 × 1350 - Post quadrado 1:1: 1080 × 1080 - Horizontal 16:9: 1920 × 1080 Os quadros que você mais vai exportar. Todos eles devem subir como MP4. Para a lista completa de quadros por plataforma, veja [tamanhos de vídeo para redes sociais](https://gradiently.design/pt-br/guide/social-video-sizes). ## Qual formato para um site No seu próprio site, você controla o player, então pode oferecer os dois. O navegador lê os elementos `source` em ordem e reproduz o primeiro que suporta. Ponha o WebM primeiro se o seu arquivo WebM for o menor dos dois e mantenha o MP4 como alternativa para qualquer navegador que não consiga reproduzi-lo. ```html ``` WebM primeiro, MP4 como alternativa. O poster aparece enquanto o vídeo carrega e para quem tem um navegador que não toca nenhum dos dois. Meça antes de presumir. Em alguns clipes, sobretudo os muito curtos ou muito simples, um MP4 bem codificado é tão pequeno quanto o WebM, e servir um só arquivo é mais simples. O guia do 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 do que cada navegador reproduz. Se o clipe for um fundo, [vídeos de fundo em sites](https://gradiently.design/pt-br/guide/video-background-website) trata de imagens de poster, dimensionamento e desempenho. ## Convertendo entre MP4 e WebM Se você tem um formato e precisa do outro, a ferramenta de linha de comando gratuita FFmpeg faz os dois sentidos. Os comandos abaixo são pontos de partida sensatos para loops criados em design: sem áudio, boa qualidade e um MP4 que começa a tocar antes de baixar por inteiro. ```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 ``` CRF menor significa qualidade maior e arquivos maiores. Remova -an se o vídeo tiver som que você quer manter. > **Por que o yuv420p importa** Alguns codificadores geram arquivos MP4 num formato de cor que celulares e navegadores se recusam a tocar. Definir `yuv420p` mantém o arquivo no formato que todo mundo entende. ## Degradês, faixas e qualidade Degradês suaves são a coisa mais difícil de comprimir. Grandes áreas de cor que muda devagar expõem qualquer falta de bits como degraus visíveis, e os degradês escuros mostram isso primeiro. Os dois formatos lidam bem com isso numa configuração generosa de qualidade; nenhum dos dois lida numa configuração mesquinha. Um toque de grão no design ajuda muito, porque os codificadores preservam a textura em vez de achatá-la em faixas. - Suave: taxa de bits suficiente: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Em degraus: codificador sem bits: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` Uma visão exagerada das faixas. A solução é a mesma no MP4 e no WebM: mais qualidade, um pouco de grão e nenhum redimensionamento extra. As causas e as soluções para imagens estáticas estão em [faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding). A versão animada acrescenta mais uma regra: exporte no tamanho exato em que vai publicar, para que nada seja redimensionado duas vezes. ## Onde o GIF entra 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 faixas nos degradês. O seu único reduto é o e-mail, onde a maioria das caixas de entrada mostra GIFs e pouquíssimas tocam vídeo. A comparação entre os três está em [GIF vs MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4), e a arte de fazer um bom GIF está em [GIFs animados](https://gradiently.design/pt-br/guide/gif-maker-tips). ### Exporte MP4 para - Instagram, TikTok, LinkedIn, X, YouTube - Enviar a um cliente ou a um editor - Apresentações e telas que você não controla - Sempre que estiver em dúvida ### Exporte WebM para - O seu próprio site, ao lado de um MP4 - Sobreposições que precisam de transparência no navegador - Páginas em que cada quilobyte conta - Ferramentas no navegador que gravam WebM nativamente Na Gradiently, as exportações de vídeo são um recurso do Pro e saem em MP4 ou WebM, dependendo do que o seu navegador consegue gravar. De qualquer forma, você recebe o Mark em movimento atrás das suas palavras em até 1080p, pronto para enviar ou incorporar. Os detalhes estão em [exportar imagens e loops](https://gradiently.design/pt-br/guide/export-images-and-loops). ## FAQ ### O WebM é melhor que o MP4? O WebM costuma ser menor com qualidade parecida e é aberto e livre de royalties, mas o MP4 toca em muito mais dispositivos e apps. Em sites, o WebM é uma boa primeira escolha, com o MP4 como alternativa; para todo o resto, o MP4 é mais seguro. ### Posso enviar WebM para o Instagram ou o TikTok? Não conte com isso. Converta antes para MP4, que todas as plataformas aceitam, no tamanho exato do quadro do formato em que vai publicar. ### O Safari toca WebM? As versões recentes do Safari tocam WebM, mas o suporte chegou depois do de outros navegadores e variou conforme o codec e o dispositivo. Oferecer uma alternativa em MP4 evita a dúvida. ### Qual é menor, MP4 ou WebM? O WebM com VP9 ou AV1 costuma ser menor que o MP4 com H.264 com qualidade parecida, mas nem sempre. Codifique os dois e compare os arquivos de verdade. ### Qual formato suporta vídeo transparente? O WebM com VP9 pode carregar um canal alfa que os navegadores compatíveis exibem. O MP4 padrão com H.264 não consegue.