Otimize vídeos para a web no Mac

O embed da página de marketing trava no celular porque o MOV principal tem 120 MB e falta metadados adequados para a web. Os navegadores conseguem reproduzir muitos formatos, mas o MP4 com H.264, bitrate adequado e faststart ainda é a melhor opção para incorporações previsíveis e uploads em CMS.

O Core Web Vitals trata arquivos de mídia grandes como risco de desempenho. Um embed com o tamanho certo melhora o LCP mesmo quando o restante da página está leve.

O que vídeos para a web precisam

A entrega para a web difere do arquivamento de um master ou do envio de um arquivo por e-mail.

Codecs modernos como VP9 e AV1 economizam bytes, mas aumentam a complexidade de encode e a necessidade de fallback. Veja o que são VP9 e AV1 ao planejar pipelines com múltiplos codecs. Para uma única incorporação hoje, o H.264 MP4 continua sendo o padrão prático.

Loops em autoplay em landing pages devem ser curtos. Um loop de 15 segundos em 720p geralmente carrega mais rápido que um hero de 60 segundos em 1080p, sem ganho na narrativa.

Compactar no QuickTime para a web

O QuickTime Player é o caminho integrado mais rápido para um único clipe:

1. Abra o MOV ou MP4 original.
2. Editar → Cortar para o segmento de loop ou demonstração que a página precisa.
3. Arquivo → Exportar como… → 1080p para vídeo hero de desktop, 720p para loops de fundo.

As exportações do QuickTime costumam funcionar nos navegadores, mas podem omitir a otimização faststart. Se a barra de progresso ficar em zero por alguns segundos em uma conexão lenta, re-muxe ou re-encode com o FFmpeg abaixo.

Mantenha um master de alta qualidade em outro local. A versão para a web deve ser o menor arquivo possível que ainda se lê claramente no tamanho da incorporação.

O autoplay mudo é comum em sites de marketing. Exporte uma versão sem picos de áudio altos para que os visitantes não se surpreendam ao dar o play com som.

FFmpeg H.264 MP4 com faststart

Instale o FFmpeg via Homebrew (brew install ffmpeg).

Embed equilibrado para a web:

ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p \
  -c:a aac -b:a 128k -movflags +faststart web-hero.mp4

Redimensione uma gravação de tela em 4K para uma coluna de 960 px de largura:

ffmpeg -i input.mov -vf scale=1920:-2 -c:v libx264 -crf 24 -preset medium \
  -c:a aac -b:a 96k -movflags +faststart web-1920w.mp4

Já tem um bom MP4 mas sem faststart? Re-muxe sem re-encode:

ffmpeg -i input.mp4 -c copy -movflags +faststart output-faststart.mp4

Bitrate e resolução para incorporações

Combine os pixels com a largura do CSS na página, não com o tamanho da captura do seu monitor.

Use a calculadora de tamanho de arquivo de vídeo para estimar se um clipe cabe no limite do seu CDN ou CMS antes do upload.

Leia o que é bitrate de vídeo quando as exportações -crf ainda ultrapassarem seu orçamento. A taxa de quadros (frame rate) de 30 fps é suficiente para a maioria das demonstrações de UI; 60 fps dobra os dados de quadro com pouco ganho em um embed de marketing.

Testar a reprodução antes de publicar

Verifique nas mesmas redes que seus visitantes usam.

1. Abra o MP4 no Safari e no Chrome com a rede limitada nas ferramentas de desenvolvedor.
2. Confirme que a reprodução começa em até um segundo nas exportações com faststart.
3. Verifique os loops de autoplay mudo quanto à compressão visível em gradientes.

As imagens poster importam para a velocidade percebida. Associe um JPEG leve ao MP4 para que o layout não pule enquanto o vídeo faz buffer.

O encode é apenas parte da entrega. Defina dimensões intrínsecas no elemento, use preload="metadata" para clips controlados comuns, forneça legendas quando o discurso tiver significado e evite autoplay quando a página funciona melhor sem movimento. Respeite a preferência de movimento reduzido do usuário para loops decorativos.

<video width="1280" height="720" controls preload="metadata" poster="demo-poster.jpg">
  <source src="product-demo.mp4" type="video/mp4">
</video>

Quando o mesmo ativo também for para o YouTube, compare notas com otimize vídeo para YouTube no Mac . Incorporações para a web geralmente toleram bitrates ligeiramente mais baixos que os mezzanines de upload.

Workflows gerais de compactação: como compactar vídeo no Mac .

Agende encodes durante a noite quando uma atualização de landing page incluir múltiplas variantes hero. Os presets do FFmpeg em um script de shell superam a exportação manual de cada loop no QuickTime.

Usando o GetCompress

O GetCompress prepara embeds de MOV e MP4 localmente no seu Mac:

• Aplique os presets web 1080p ou 720p loop em uma pasta de variantes hero.
• Corte nos pontos de loop no player de pré-visualização antes da exportação.
• Defina o tamanho de arquivo desejado no vídeo quando seu CMS impuser um limite de megabytes para uploads.
• Exportações em lote para landing pages localizadas que reutilizam o mesmo layout de movimento.
• Mantenha o vídeo do produto pré-lançamento apenas em disco durante a fase de staging.

O GetCompress é uma alternativa mais fácil quando as one-liners do FFmpeg se multiplicam para cada modelo de página. Combine com presets de imagem quando o mesmo lançamento incluir screenshots pesadas em PNG no repositório.

Carregue diferentemente (lazy-load) os embeds abaixo da dobra quando seu CMS suportar. O hero MP4 ainda merece faststart, mas os clips secundários podem adiar o download até que o visitante role a página.