O melhor formato de vídeo para o teu website: MP4, WebM e mais

TL;DR: O melhor formato de vídeo para o teu website

Este artigo é bastante longo e entra em grande detalhe. Aqui tens um resumo rápido "too long; didn't read". A escolha do formato de vídeo certo depende dos teus requisitos. MP4 é universalmente compatível e ideal para tamanhos de ficheiro moderados. WEBM oferece compressão mais eficiente e é adequado para websites modernos e de alto desempenho, mas tem suporte limitado de browsers. AVIF é ótimo para animações e oferece excelente qualidade de imagem com ficheiros pequenos, mas não é suportado por todos os dispositivos mais antigos. Existem alguns prós e contras adicionais (ver abaixo). Outros formatos não devem ser utilizados.

Para vídeos, tens duas opções: Self-hosting ou hosting profissional. Self-hosting significa configurares o teu próprio player e gerires diferentes qualidades de vídeo manualmente, o que exige esforço e recursos adicionais. Serviços profissionais, por outro lado, oferecem streaming adaptativo real e tornam a gestão de vídeo significativamente mais fácil, resultando numa melhor experiência para os teus visitantes.

A nossa experiência em formatos de vídeo

Nos últimos anos, dedicámo-nos intensivamente a vídeos web e à sua integração em projetos web grandes e pequenos. Através deste trabalho, adquirimos muita experiência e compreendemos os desafios envolvidos na integração de vídeos num website — seja na otimização dos tempos de carregamento, na procura do equilíbrio certo entre qualidade e consumo de dados, ou no cumprimento das normas de acessibilidade da UE para vídeos. Por insatisfação com outras soluções, desenvolvemos o Ignite Video Hosting. Mas não é esse o foco aqui.

Critérios importantes para escolher um formato de vídeo

Poderias, claro, saltar diretamente para a tabela, mas vamos recuar um passo e olhar primeiro para os critérios básicos. Porque uma coisa logo à partida: não existe "uma solução perfeita."

Para nós, tanto os aspetos técnicos como as necessidades do teu público-alvo desempenham um papel crucial.

1. Qualidade vs. Tempo de carregamento A qualidade e a duração de um vídeo afetam significativamente o tamanho do ficheiro. Maior qualidade geralmente significa ficheiros maiores, o que pode levar a tempos de carregamento mais longos. Um equilíbrio entre tamanho do ficheiro e qualidade é essencial para não frustrar os utilizadores com tempos de espera longos.
2. Compatibilidade Um formato de vídeo deve funcionar no maior número possível de dispositivos e browsers. Suportar browsers mais antigos e dispositivos móveis é especialmente importante para alcançar um público amplo. Como web developers ou designers a implementar soluções, tendemos a ter os dispositivos mais recentes e a usar software moderno. Infelizmente, a realidade é diferente. Browsers antigos. Computadores antigos. Smartphones antigos com browsers desatualizados.
3. Requisitos de streaming Especialmente para vídeos mais longos ou um grande número de espetadores simultâneos, é necessário streaming eficiente. O streaming adaptativo garante que os utilizadores obtêm a melhor qualidade com base na sua velocidade de internet.
4. Acessibilidade Vídeos acessíveis são essenciais para muitos públicos. Isto inclui a possibilidade de adicionar legendas ou audiodescrições e garantir que o player é fácil de usar. A Lei Europeia da Acessibilidade torna-se obrigatória em 2025, o que significa que já não podes ignorá-la. (Detalhes sobre vídeos e acessibilidade podem ser encontrados aqui, e um bom exemplo de um player acessível aqui).
5. Consumo de largura de banda e carga do servidor Um formato de vídeo eficiente reduz o consumo de dados tanto para os utilizadores como para os servidores. Isto é especialmente importante para grandes volumes de tráfego ou capacidade de servidor limitada. Em projetos web mais pequenos, isto muitas vezes não importa. Mas quando tens muitos visitantes simultâneos, pode tornar-se um problema — ou simplesmente caro, devido à elevada largura de banda que geras.
6. Ambiente técnico Em que configuração vão correr os vídeos? É "apenas" um site WordPress ou um CMS maior como o Magnolia? Como é que os vídeos são integrados lá? O CMS suporta o formato desejado? No fundo: será que tenho sequer escolha?
7. Casos de uso Normalmente começamos pela melhor UX possível para os visitantes, por isso os diferentes casos de uso são cruciais para selecionar o formato certo. Vídeos de fundo que reproduzem por trás de outros elementos geralmente requerem menor qualidade para minimizar os tempos de carregamento. Vídeos incorporados no conteúdo, que podem ser bastante longos, requerem maior qualidade e opções de streaming eficientes para garantir uma boa experiência de utilizador.
8. Self-hosting ou hosting profissional? Quando se trata de incorporar vídeos no teu website, tens essencialmente duas opções: self-hosting ou usar serviços de hosting profissional. Com self-hosting, vais precisar de vários componentes como um servidor potente, um player adequado, e largura de banda e armazenamento suficientes para lidar com tráfego elevado. Além disso, precisas de gerir a codificação dos vídeos para os disponibilizar em diferentes níveis de qualidade. Em alternativa, serviços de hosting profissional podem tirar-te esse trabalho de cima. Estas soluções oferecem streaming adaptativo, qualidade de vídeo otimizada e funcionalidades de acessibilidade que podem ser facilmente integradas. Especialmente para websites com conteúdo de vídeo de alta qualidade, esta opção compensa porque elimina a necessidade de codificação, integração do player e infraestrutura de streaming.

Todos os formatos de vídeo para websites em detalhe

Chega de conversa, vamos aos formatos. Como viste acima, a escolha do formato de vídeo certo para o teu website depende muito do objetivo do vídeo. Cada formato tem prós e contras específicos que podem pesar de forma diferente consoante o caso de uso. Vamos analisar em detalhe os formatos de vídeo mais comuns, as suas utilizações, e os seus pontos fortes e fracos.

MP4: O padrão universal

O MP4, baseado no standard MPEG-4, foi desenvolvido para armazenar e reproduzir dados de vídeo e áudio de forma eficiente. É um dos formatos de vídeo mais utilizados e é suportado por praticamente todos os browsers e dispositivos modernos.

Prós

• Alta compatibilidade: Funciona em praticamente todos os browsers, sistemas operativos e dispositivos.
• Boa qualidade com tamanho moderado: Ideal para a maioria dos casos de uso.
• Suporta streaming: Permite streaming adaptativo via HLS.
• Acessibilidade: Suporta legendas e metadados.

Contras

• Tecnologia de compressão desatualizada: O MP4 usa H.264, que é menos eficiente comparado com codecs modernos como AV1, resultando em ficheiros maiores para a mesma qualidade.
• Sem licença aberta: O codec H.264 é patenteado e a sua utilização pode exigir taxas de licenciamento, especialmente para aplicações comerciais.
• Sem compressão sem perdas: O MP4 usa compressão com perdas, o que significa que a qualidade se perde a cada compressão, tornando-o inadequado para casos onde é necessária a máxima qualidade.
• Pouca flexibilidade para ajustes dinâmicos: O MP4 sem streaming adaptativo não suporta ajuste dinâmico de qualidade, o que pode ser problemático com condições de rede variáveis. Sim, consegue lidar com HLS streaming, mas o teu servidor e player têm de o suportar.

Casos de uso O MP4 é um formato comum para integrar vídeos em websites devido à sua ampla compatibilidade com diferentes dispositivos e browsers. É adequado para aplicações onde é necessária a reprodução na maioria das plataformas, e para vídeos de duração e tamanho moderados. Vídeos de fundo também funcionam bem com MP4, pois o formato oferece um equilíbrio razoável entre qualidade e tempo de carregamento. No entanto, para vídeos de fundo, certifica-te de que são o mais pequenos e curtos possível.

WEBM: O favorito moderno

O WEBM foi desenvolvido pela Google como um formato open-source especificamente para a web. Usa codecs modernos como VP9 ou AV1, que proporcionam alta compressão e boa qualidade.

Prós

• Alta eficiência: Muito boa qualidade com ficheiros pequenos.
• Gratuito: Sem licença devido à sua natureza open-source.
• Compatível com streaming: Suporta streaming adaptativo via DASH.
• Acessibilidade: Suporta legendas e outros metadados.

Contras

• Compatibilidade: Suporte limitado no Safari e em dispositivos mais antigos. Em setembro de 2024, o Safari tinha uma quota de mercado global de cerca de 9,2% (Fonte: Statista), o que significa que uma parte dos utilizadores pode ter dificuldade em reproduzir estes vídeos. Dependendo do teu público-alvo, cerca de 1 em cada 10 visitantes pode não conseguir ver o teu vídeo.
• Pouca hardware acceleration: Parece coisa de nerd, mas muitos smartphones e tablets mais antigos não têm hardware acceleration nativa para vídeos WebM. Isto significa que é necessário mais poder de processamento no dispositivo. Se também tiveres outras animações, muito CSS, JavaScript, etc., isto pode frequentemente levar a stuttering ou mau desempenho de todo o website.

Casos de uso O WEBM é particularmente adequado para websites que se focam em uso eficiente de largura de banda e tempos de carregamento rápidos — especialmente quando o desempenho e ficheiros pequenos são prioridades. É económico porque não tem licença. Para nós, o maior problema sempre foi a compatibilidade. Embora o número de dispositivos não suportados esteja a diminuir constantemente, queres mesmo potencialmente excluir 1 em cada 10 visitantes? Nós acabámos muitas vezes por voltar ao MP4.

GIF: Desatualizado e ineficiente

Isto não é propriamente um formato de vídeo. Então porque aparece aqui? Porque na prática vemos muitas vezes GIFs a serem usados para animar websites.

Sendo honestos: se não for uma animação gráfica ou um meme, é mesmo uma má ideia.

Prós

• Hm... pois... Charme retro?

Contras

• Qualidade fraca: Paleta de cores limitada (256 cores) e sem opções HD.
• Alto consumo de largura de banda: Ficheiros muito grandes para animações mais longas. Se os teus visitantes não tiverem a melhor ligação à internet (p. ex., em movimento), fica mesmo mau.
• Sem acessibilidade: Não suporta legendas nem metadados. Especialmente problemático se estás a tentar usá-lo para incorporar um vídeo.

Casos de uso Animações simples ou pequenos efeitos visuais. Se o teu conteúdo parece um vídeo — não uses GIF.

MOV: Desatualizado e impraticável para a web

O MOV foi desenvolvido pela Apple e foi outrora o formato padrão do QuickTime. Oferece alta qualidade mas é, para ser educado, desatualizado para uso na web. Simplesmente não o uses.

Contras

• Ficheiros grandes: Impraticável para uso na web.
• Compatibilidade limitada: Otimizado principalmente para dispositivos Apple.
• Não adequado para streaming eficiente.

Casos de uso Talvez para edição profissional ou como formato intermédio na produção de vídeo. Mas se alguém te enviar um ficheiro MOV para o website, não o incorpores diretamente. Vê MP4 ou WEBM acima.

AVI: Uma relíquia do passado

O AVI (Audio Video Interleave) foi desenvolvido pela Microsoft e é um dos formatos de vídeo mais antigos. Tal como o MOV, temos uma opinião direta: NÃO O USES! É simplesmente desatualizado.

Contras

• Ficheiros grandes: Tamanhos de ficheiro muito ineficientes.
• Compatibilidade web limitada: Não adequado para standards web modernos.
• (Vergonha: Outros web developers vão olhar para ti de lado se puseres um ficheiro AVI no teu website.)

Casos de uso Simplesmente não.

AVIF: Moderno mas especializado

O AVIF (AV1 Image File Format) é baseado no codec AV1 e foi concebido principalmente para imagens. Existem alguns casos de uso em que é uma boa escolha, especialmente quando se trata de uma animação. Nesses casos, normalmente não precisas de um formato de vídeo clássico, pois as perdas de qualidade podem frequentemente arruinar a animação.

Prós

• Compressão excelente: Ficheiros muito pequenos com alta qualidade.
• Open-source: Sem licença e preparado para o futuro.

Contras

• Uso limitado: Não adequado para vídeos "longos". Neste caso, qualquer coisa acima de 5-10 segundos já é considerado longo.
• Compatibilidade: Ainda não é totalmente suportado em todo o lado. Tal como o WEBM, cerca de 10-15% dos utilizadores podem ter um browser mais antigo e por isso podem não ver o vídeo. A percentagem está a diminuir, mas talvez queiras verificar as tuas estatísticas e pesar as opções tu mesmo.
• Sem opções de streaming: Não foi desenvolvido para streaming adaptativo.

Casos de uso Para animações ou pequenos clips que precisam de ser extremamente eficientes em dados. Se tens esse caso específico: avança. Atualmente, recomendamos adicionar um fallback para browsers e smartphones mais antigos.

Aprofundamento: Streaming Adaptativo de Vídeos na Web

Deves ter reparado que insistimos bastante no tema do "streaming". Foi simplesmente um dos maiores desafios que enfrentámos ao integrar vídeos. Claro, podes fazer alojamento próprio de ficheiros MP4 ou WebM, mas simplesmente não é assim tão bom e é complicado.

Porquê? A palavra mágica é "streaming adaptativo."

Streaming Adaptativo de Ficheiros Auto-Alojados

Com um formato de vídeo auto-alojado como MP4 ou WebM, é tecnicamente possível conseguir streaming adaptativo. No entanto, precisas de criar manualmente o vídeo em vários níveis de qualidade (p. ex., 360p, 720p, 1080p). Depois disso, é necessário um player para selecionar o nível de qualidade adequado com base na largura de banda e no dispositivo do utilizador. Isto significa que um utilizador com uma ligação lenta recebe uma qualidade inferior (p. ex., 360p), enquanto uma ligação mais rápida oferece a melhor qualidade.

Streaming Adaptativo via Serviços de Video Hosting

Os serviços profissionais oferecem streaming adaptativo "verdadeiro", que gera automaticamente diferentes níveis de qualidade e os entrega ao utilizador sem que tu, enquanto gestor do website, precisares de intervir manualmente. Estes serviços utilizam protocolos especiais como HLS (HTTP Live Streaming) ou DASH, que garantem que o vídeo é transmitido em pequenos segmentos. A qualidade destes segmentos ajusta-se dinamicamente à largura de banda e ao dispositivo atuais do utilizador. (Sim, também podes fazer isto com ficheiros auto-alojados, mas tens de configurar tudo.)

Os utilizadores recebem sempre a melhor qualidade possível sem interrupções no carregamento ou tempos de arranque longos — tudo automaticamente.

Porque é que isto é importante?

• Streaming adaptativo de ficheiros (p. ex., MP4/WebM) é tecnicamente possível, mas tens de configurar tudo tu mesmo. Normalmente não é streaming verdadeiro, mas sim uma seleção de vários ficheiros pré-preparados de onde o player escolhe.
• Streaming adaptativo verdadeiro (HLS/DASH) vai além do que se consegue com vídeos auto-alojados, ajustando a qualidade do vídeo em tempo real. O streaming adaptativo ajusta-se de forma flexível à largura de banda, o que melhora significativamente a experiência do utilizador, especialmente em condições de rede variáveis.

A diferença é assim tão grande que precisa de um capítulo à parte?

Sim, a diferença continua a ser significativa porque, na prática, muitas vezes fugimos do esforço. Faz-se upload de um ficheiro para o CMS. Vai correr bem. Nós próprios sabemos disto; constróis um website com 1.000 tarefas, e claro que renderizar o vídeo em múltiplas versões nos formatos certos frequentemente não entra na lista.

Num ambiente extremamente competitivo como a web, "vai correr bem" acaba por ser um verdadeiro problema — especialmente se os teus visitantes não conseguirem ver os vídeos ou tiverem uma experiência fraca.

Por exemplo, se usas vídeos no background para stages ou fins semelhantes, deves calcular um tamanho adequado com base nas suas dimensões e posição. Isto é normal para imagens. Também não metes um PNG de 12 MB no conteúdo — mas com vídeos, muitos esquecem-se disto na prática.

Mostra-me provas: qual é a diferença real?

Ok, agora vai ficar um bocado nerd. Podes saltar esta parte se quiseres.

Vamos a um exemplo: Com uma ligação 4G moderada de cerca de 10 Mbit/s (1,25 MB/s), as diferenças entre um MP4 auto-alojado e streaming adaptativo verdadeiro são mais notáveis.

Pressupostos do exemplo:

• Ficheiro de vídeo: 20 MB, 1 minuto de duração
• Velocidade de ligação (4G moderado): Média de 10 Mbit/s (1,25 MB/s)

1. Ficheiro MP4 (auto-alojado, não adaptativo)

• Tempo para download completo: 20 MB / 1,25 MB/s ≈ 16 segundos
• Tempo de buffer antes da reprodução: Normalmente, 25-30% do vídeo tem de ser pré-carregado, o que significa que carregar os primeiros 5-6 MB demora cerca de 4-5 segundos.
• Se a ligação se tornar instável e cair abaixo dos 10 Mbit/s, a reprodução pode parar e precisar de recarregar porque a qualidade não se ajusta dinamicamente.

2. Streaming Adaptativo (HLS/DASH)

• Tempo de arranque do vídeo: O streaming adaptativo verdadeiro divide o vídeo em segmentos mais pequenos, normalmente de 2-10 segundos de duração. Com uma ligação 4G moderada, um segmento inicial em qualidade inferior é carregado, permitindo que o vídeo comece em cerca de 1 segundo.
• Ajuste contínuo: O streaming adaptativo ajusta a qualidade dinamicamente com base na largura de banda atual. Se a ligação cair para 6-8 Mbit/s, o sistema muda automaticamente para uma resolução inferior para manter a reprodução sem interrupções. Isto garante que o vídeo permanece estável mesmo com uma ligação mais fraca.

Resumo dos tempos de carregamento:

• MP4 sem streaming adaptativo: Começa em cerca de 4-5 segundos com uma ligação 4G moderada e estável.
• Streaming adaptativo (HLS/DASH): Começa em cerca de 1 segundo porque carrega apenas uma pequena porção em qualidade inferior.

4 segundos? Isso não incomoda ninguém? Porquê tanto esforço?

Bem... Agora vai a um website, olha para algum conteúdo e conta até quatro... uma parte dos teus visitantes já terá feito scroll, mudado de tab ou simplesmente saído.

Especialmente com ligações móveis, que são frequentemente instáveis, o ajuste contínuo de qualidade é crucial para uma experiência de utilizador positiva.

Conclusão: Diferentes formatos para diferentes casos de uso

Artigo longo. Desculpa lá. Mas como podes ver, não existe "uma solução única." É complexo.

1. MP4 – O pau para toda a obra

• Quando usar? Para vídeos que precisam de funcionar sem problemas em todos os dispositivos.
• Prós: Alta compatibilidade, tamanho de ficheiro moderado, suporte de streaming.
• Contras: Codec licenciado, compressão menos eficiente comparado com formatos mais recentes.

2. WEBM – Para websites modernos e eficientes

• Quando usar? Se priorizas tempos de carregamento rápidos e ficheiros pequenos.
• Prós: Compressão eficiente, codecs modernos, baixo uso de largura de banda.
• Contras: Compatibilidade limitada (ver acima) e capacidades de streaming restritas.

3. AVIF – Para animações e imagens eficientes

• Quando usar? Para animações de alta qualidade.
• Prós: Excelente compressão, tecnologia moderna, sem licenças.
• Contras: Compatibilidade limitada (ver acima).

Ou usa hosting de vídeo profissional para os teus vídeos

A nossa opinião Somos neutros aqui? Sim e não.

Implementámos uma destas soluções durante anos, mas sejamos honestos — os vídeos tornaram-se uma parte tão essencial dos websites. Tanto esforço e dinheiro investidos neles, e depois aceitamos obstáculos artificiais? Não é propriamente ideal.

Para nós, o hosting profissional tornou-se a única solução, mas depois enfrentámos um novo problema com o Vimeo, YouTube, Wistia — conformidade com o RGPD. Todos exigiam consentimento e soluções estranhas para a experiência do utilizador. Não queríamos compromissos — nem com o formato, nem com a tecnologia. Foi por isso que construímos o Ignite. Connosco, podes alojar profissionalmente os teus vídeos a partir de 15 €. Geramos automaticamente o teu vídeo em diferentes codecs e tamanhos. Só precisas de o integrar, ou usar o nosso player, que também é acessível.

Sabemos que quando tens 5-10 vídeos no teu website, geri-los torna-se uma dor de cabeça — lidar com todas as versões, diferentes formatos, miniaturas de pré-visualização, etc.