A gente precisa conversar sobre aquele vídeo de 200MB na sua home

Olha, eu entendo. Você passou três semanas renderizando aquela perspectiva do projeto. A luz batendo no concreto aparente ficou poética. A sombra projetada no piso de madeira parece pintura renascentista. Você exportou em 4K, porque “qualidade é tudo”, jogou na home do site e esperou os clientes chegarem.

Só que ninguém chegou.

Isso porque metade fechou a aba antes do vídeo carregar. A outra metade viu o 4G derreter e desistiu. E o Google pontuou muito seu site, porque “experiência do usuário” inclui não fazer as pessoas esperarem até 2027 para ver um vídeo do projeto.

Performance também é design. E um site bonito que não carrega é como a Cidade das Artes, no Rio de Janeiro: edifício lindo, mas que ninguém consegue frequentar — vira cartão postal, não arquitetura.

A solução? WebM. O formato que o Google ama, os navegadores modernos rodam liso e que comprime vídeo sem transformar tudo em pixel de Minecraft dos anos 90.

Por que MP4 virou o vilão da história

O MP4 é tipo aquele material “tradicional” que todo mundo usa porque sempre usou. Funciona? Funciona. Mas é eficiente? Depende.

Quando a gente fala de web, peso é desafio. Um vídeo de background em MP4 pode facilmente bater 50MB, 80MB, às vezes mais de 100MB. Agora imagina: você abre o portfólio de alguém no celular, no meio da rua, com sinal oscilando. O vídeo começa a carregar. E carregar. E carregar…

Você espera? Claro que não. Você fecha e vai ver o Instagram.

WebM é o formato pensado para web desde o berço. Foi criado pelo Google especificamente para streaming e sites. Com o codec VP9 (ou VP8, se você for nostálgico), ele entrega compressão absurda mantendo qualidade visual. Estou falando de reduções de 70% a 90% no tamanho do arquivo. De 80MB para 8MB. De “carregando…” para “já tá rodando”.

E não, não é mágica. É só tecnologia usada direito.

O problema é que ninguém lembra como configurar essa desgraça

Eu uso o HandBrake desde qu einiciei na edição de vídeos para a web. Software open-source, gratuito e que funciona. Só tem um detalhe: a interface lembra painel de controle de usina nuclear soviética. Você abre, vê aquele monte de aba, sigla, número, e pensa “WTF?? O que é ‘chroma subsampling’?”.

Esse post é o meu lembrete. E se serve pra mim, talvez sirva pra você também.

O passo a passo (que você vai esquecer e voltar aqui daqui a 6 meses)

1. Jogue o vídeo lá dentro

Abra o HandBrake e arraste seu MP4 pra dentro da janela. Ou clique em “Arquivo” se você for do tipo formal. Até aqui, sem drama.

2. A aba Summary — onde 90% das pessoas erram

Aqui é tipo escolher o tipo de fundação antes de construir. Se errar, o resto não importa.

• Formato: Mude de MP4 para WebM.

Pronto. Parece óbvio, mas eu já configurei tudo perfeito, renderizei 15 minutos e… saiu um MP4. Porque esqueci de mudar o formato. Não seja eu.

3. A aba Video — o coração da parada

Aqui é onde você define quanto o vídeo vai pesar e com que cara ele vai sair.

• Video Encoder: Escolha AV1 ou VP9.
  • O VP8 é o avô. Funciona, mas já tá ultrapassado.
  • O AV1 é o futuro. Compressão ainda melhor. Mas demora um pouco mais para renderizar. No meu computador de arquiteto funcionou para vídeos de até 1 minuto.
  • VP9 é o equilíbrio honesto entre qualidade, compatibilidade e velocidade de render.
• Framerate (FPS): Deixe em Same as source. Não invente de mudar isso sem motivo.
• Quality (Constant Quality): Esse é o slider mágico que controla o peso do arquivo.
  • O padrão costuma vir em RF 30 para VP9.
  • Quanto maior o número, menor o arquivo (e menor a qualidade).
  • Para web, teste entre 30 e 35. Se o vídeo ficar “pixelado” demais, baixe pra 28. Se ainda estiver pesado, suba pra 38.
  • Eu costumo usar RF 32 como ponto de partida. Funciona bem pra vídeos de background sem prejudicar a estética.

4. A aba Audio — o som que ninguém ouve

Se o vídeo for de background (aqueles loops decorativos na home), apague o áudio. Clique em “Clear” e pronto. Você economiza uns 20% a 30% do tamanho do arquivo só com isso.

Se o vídeo precisar de som (entrevista, explicação, etc.):

• Codec: O HandBrake costuma puxar Opus automaticamente quando você escolhe WebM. Deixa ele fazer o trabalho.
• Bitrate: 128 kbps é mais que suficiente pra web. A menos que seja um álbum de música clássica, ninguém vai perceber diferença entre 128 e 320 kbps num vídeo de portfólio.

5. A aba Dimensions — o corte invisível

O HandBrake adora tentar “ajudar” cortando bordas pretas automaticamente. Às vezes isso é ótimo. Às vezes ele corta coisa que não devia.

• Se o vídeo tem bordas intencionais (letterbox, composição específica), vá em Cropping e mude de “Automatic” pra Custom. Zere tudo (Top: 0, Bottom: 0, Left: 0, Right: 0).

Na última versão que usei, ele já vinha zerado de fábrica. Mas fica a dica, caso dê algum B.O. para você.

6. Exporta essa belezura

Lá embaixo, na barra “Save As”, dê um nome pro arquivo. Garanta que termine em .webm.

Clique no botão verde de play gigante “Iniciar conversão” lá em cima.

Agora vai pegar um café. Ou responder uns e-mails. Dependendo do tamanho do vídeo, pode levar de 2 a 20 minutos.

O resultado na prática (porque teoria não paga boleto)

Neste projeto, eu tinha um vídeo de pouco menos de 1 minuto, fullHD:

• Antes (MP4 com H.264): 63MB
• Depois (WebM com AV1, RF 32): 23MB

Economia de 63,50%. A qualidade visual? Idêntica pro olho humano médio (e até pro olho de arquiteto chato como eu).

O site carrega 6x mais rápido; o Google não penaliza você; o usuário não queima o plano de dados.

Todo mundo feliz.

O que o HandBrake não faz (e você precisa saber)

Se você tá pensando em usar vídeo com fundo transparente (aqueles motion graphics flutuando no site, sem retângulo ao redor), o HandBrake vai decepcionar.

Ele até tenta exportar canal alpha no WebM, mas a taxa de sucesso é um pouco tensa. Metade das vezes sai com fundo preto. Na outra metade, falha.

Pra vídeo com transparência, tem o Shutter Encoder (feio pra caramba, mas funciona).

Mas para vídeos normais (99% dos casos), o HandBrake já resolve.

Por que isso importa além do técnico

Tem uma contradição que eu vejo o tempo todo em portfólios de arquitetura e design: a gente passa semanas escolhendo a fonte perfeita, debatendo se o cinza é #333 ou #444, ajustando o espaçamento entre seções pra ficar “respirando”… e aí joga um vídeo de 150MB na home. Tá, eu listei dois problemas. O primeiro é a falta de um manual de marca (seja do escritório ou do próprio projeto).

O segundo é ignorar que performance é parte da experiência. Aqui, sim, acho coerente falar de performance, porque você está operando uma máquina (e não outro ser humano). Respeitar o tempo (e os dados) do visitante não é “otimização técnica chata”. É design. É dizer “eu construí esse espaço pensando em você, não só em mim”.

Um site que demora pra carregar é como aquela casa linda na revista que tem escada sem corrimão e porta de 60cm de largura. É bonita? É. Mas é funcional? Nem um pouco.

A gente não projeta só pra foto. A gente projeta pra quem vai usar.

Conclusão de quem já errou isso antes

Eu criei esse tutorial porque eu mesmo esqueço as configs do HandBrake a cada 3 meses. E porque já vi portfólio demais morrendo na praia por causa de vídeo pesado.

Se você chegou até aqui, provavelmente tá no mesmo barco. Salva esse post nos favoritos. Ou melhor: testa agora, converte um vídeo e vê a diferença de peso. Quando você ver um arquivo de 60MB virando 6MB mantendo a qualidade, você nunca mais vai querer voltar pro MP4.

E se um dia você esquecer de novo (porque vai esquecer), volta aqui. Eu deixo a luz acesa.