Vídeo de fundo ou 3D no site: peso, conversão e quando cada um vale o investimento

Vídeo de fundo vale quando o objetivo é atmosfera e a produção já existe; 3D em tempo real vale quando o objetivo é demonstrar produto ou tornar a marca memorável com interação. O vídeo custa pouco para colocar e muito para carregar; o 3D custa mais para produzir e, bem feito, pesa menos. A comparação com números está abaixo.

Quanto pesa um vídeo de fundo e quanto pesa um 3D?

Um vídeo de fundo costuma ser o item mais pesado da primeira dobra, e um modelo 3D otimizado cabe em menos bytes do que um loop curto. O Web Almanac 2024, do HTTP Archive, mediu a página mediana em 2.311 KB no celular e 2.652 KB no desktop, em outubro de 2024. A mediana de vídeo por página foi 194 KB no desktop e, contra a intuição, 299 KB no celular. É o retrato de páginas comuns; um herói em vídeo de alta resolução, sozinho, passa desse total com folga.

A diferença de natureza explica a diferença de peso. O vídeo é uma sequência de quadros já renderizados: cada segundo a mais é mais bytes, e nada na tela responde ao visitante. O 3D é geometria, textura e código: o peso é fixo, não cresce com o tempo de exibição, e o navegador renderiza na hora. Nós abrimos a nossa própria home arquivo por arquivo em site 3D pesa? para mostrar onde o custo mora: em textura sem compressão e biblioteca carregada inteira, não no modelo.

O formato de entrega do 3D é o glTF, que a Khronos Group chama de JPEG do 3D: uma especificação aberta e livre de royalties para transmitir cenas e modelos, com a versão binária .glb em um único arquivo. Dois complementos reduzem o peso: o Draco, biblioteca de código aberto que comprime malhas e nuvens de pontos, e as texturas em KTX 2 com Basis Universal, que a Khronos descreve como formato que reduz o arquivo e a memória da GPU. O pipeline inteiro está em modelagem 3D de produto para site.

O que cada um faz com o LCP e os Core Web Vitals?

O vídeo de fundo entra direto na conta do LCP; o 3D entra pela porta do pôster e do texto. O LCP, métrica do Google que mede quando o maior elemento da primeira dobra aparece, é bom até 2,5 segundos e ruim acima de 4 segundos, no percentil 75 das visitas. A lista do que ele considera inclui imagens, vídeos, fundos carregados por url() e blocos de texto. Para o vídeo vale o que vier primeiro: o pôster carregado ou o primeiro quadro exibido. Um canvas de WebGL não está na lista; num herói 3D, o que o LCP mede é o pôster ou o título ao lado do modelo.

Isso muda o projeto dos dois. No vídeo, o guia de performance de vídeo do web.dev recomenda o atributo poster para dar contexto antes da reprodução, preload="none" para vídeo que o usuário inicia, e lembra que vídeo com autoplay começa a baixar na hora, mesmo fora da tela. A documentação do elemento video na MDN acrescenta que preload é só uma dica ao navegador e que autoplay tem precedência sobre ele. No 3D, a regra é a mesma de outro jeito: pôster estático na primeira pintura, título em HTML antes do modelo, e o modelo carregado depois do LCP, em etapas.

Nos dois casos, o inimigo do CLS é o espaço não reservado: vídeo e canvas precisam de altura definida no CSS antes de carregar, senão o conteúdo abaixo pula quando a mídia chega. O que cada métrica significa para o dono do negócio está em Core Web Vitals em 2026.

Como funciona o autoplay no celular e por que o som é proibido?

O vídeo de fundo só toca sozinho no celular se estiver sem som, e no iPhone só toca dentro da página se tiver o atributo playsinline. A política do Chrome, publicada em Autoplay policy in Chrome e em vigor desde o Chrome 66, em abril de 2018, é direta: autoplay sem som é sempre permitido; com som, depende de o usuário ter interagido com o domínio, de um índice de engajamento com mídia no desktop ou de o site estar instalado como app. No Safari, a WebKit definiu desde o iOS 10 que vídeos sem faixa de áudio ou com muted tocam sem gesto, começam só quando visíveis na tela e pausam se ganharem áudio sem um toque do usuário.

O guia de autoplay da MDN consolida as regras na combinação que todo vídeo de fundo precisa: autoplay, muted e playsinline, de preferência sem faixa de áudio no arquivo, porque remover o áudio reduz o tamanho mesmo quando a faixa é silenciosa. É por isso que vídeo de fundo com narração ou trilha não existe de verdade: o navegador bloqueia o som, e o que sobra é um filme mudo que o roteiro não previu.

Dois sinais do usuário merecem resposta. O cabeçalho Save-Data, enviado quando a pessoa ativou economia de dados, pede ao servidor imagens e vídeos menores; a MDN o marca como experimental. A consulta prefers-reduced-motion é a mais importante: quando ativada, vídeo de fundo e 3D animado devem parar no pôster. O 3D tem uma vantagem aqui: pode continuar interativo sem movimento automático, enquanto o vídeo parado vira imagem. O checklist está em animação sem enjoar.

Qual dos dois converte: atmosfera, demonstração ou memorabilidade?

Nenhum dos dois converte por existir; converte o objetivo certo com o recurso certo. Nós usamos três objetivos para decidir. Atmosfera: a primeira dobra precisa dizer que tipo de empresa é esta sem que o visitante faça nada; vídeo cumpre bem, uma fotografia forte cumpre quase igual com uma fração do peso, e o 3D é exagero. Demonstração: o visitante precisa girar, aproximar, trocar cor ou abrir; vídeo mostra o ângulo que você escolheu, 3D deixa o visitante escolher, e é o que justifica um configurador 3D ou um visualizador com realidade aumentada no e-commerce. Memorabilidade: a marca precisa ser lembrada depois de uma visita; o 3D com narrativa na rolagem ganha, porque o visitante participa em vez de assistir.

O suporte técnico deixou de ser a barreira: o caniuse registra 97,13% dos navegadores em uso com WebGL 2.0, consultado em outubro de 2026, incluindo Safari e iOS Safari desde a versão 15. A barreira é engenharia: um 3D que trava no celular médio converte menos do que uma foto. E desconfie de percentual de conversão atribuído a vídeo ou 3D sem teste controlado; os estudos sobre primeira impressão reunidos em design vende? medem credibilidade, não venda por recurso.

Fontes: web.dev, MDN, Khronos Group, consultadas em outubro de 2026.

Quanto custa produzir e manter cada um?

Vídeo custa na captação e envelhece; 3D custa na modelagem e na engenharia e se atualiza por edição. Não existe tabela de preço com fonte para nenhum dos dois, e desconfie de quem publica uma: no vídeo, o custo depende de roteiro, locação, duração e número de versões; no 3D, de complexidade do modelo, quantidade de texturas e exigência de desempenho. Os fatores que definem o orçamento estão em quanto custa um site 3D.

A conta que importa é a de manutenção. Um vídeo gravado com a equipe, o uniforme ou a fachada de dois anos atrás pede nova captação para mudar, e cada troca de resolução é nova exportação. Um modelo 3D muda de cor, material ou variante editando o arquivo, e a mesma cena serve ao site, ao catálogo e à realidade aumentada. O que o 3D exige em troca é engenharia: carregar em etapas, descartar o que está fora da tela e manter a taxa de quadros no celular, trabalho descrito no guia completo de site 3D.

Nós fazemos 3D Experiences e dizemos onde ele não é a melhor escolha: site institucional de serviço com orçamento curto, página que vive de texto e formulário, ou marca cuja atmosfera cabe numa fotografia. Nesses casos, uma imagem bem dirigida ou um vídeo curto e leve entregam o resultado por uma fração do custo. O 3D paga a conta quando o produto é físico e configurável, quando a marca disputa memória num mercado cheio, ou quando o site é a própria experiência. Exemplos reais, conferidos em outubro de 2026, estão em 15 sites 3D para se inspirar.

Perguntas frequentes

Vídeo de fundo prejudica o SEO?

Não por si só; o que prejudica é o efeito dele no carregamento. O Google mede LCP, INP e CLS no celular, e um vídeo pesado carregado antes do título empurra o LCP para a faixa ruim, acima de 4 segundos. Vídeo com pôster, sem áudio e carregado depois do texto não muda o ranking. Texto dentro do vídeo não é lido; o título precisa estar em HTML.

Qual é o tamanho ideal de um vídeo de fundo?

O menor que ainda pareça bom no celular. Não há número oficial; as referências são a mediana de vídeo por página, 299 KB no celular segundo o Web Almanac 2024, e o limite de 2,5 segundos do LCP. Na prática: loop curto, sem faixa de áudio, resolução igual ao tamanho real de exibição, versão menor para celular e pôster comprimido como primeira pintura.

O vídeo de fundo toca sozinho no iPhone?

Sim, se cumprir as três condições do WebKit desde o iOS 10: estar sem som (muted ou sem faixa de áudio), ter o atributo playsinline para não abrir em tela cheia, e estar visível na tela. Se o vídeo ganhar áudio sem um toque do usuário, o Safari pausa. Vídeo com trilha obrigatória precisa de um botão de play.

Site 3D funciona em qualquer celular?

Quase todos os navegadores em uso suportam WebGL 2.0, 97,13% segundo o caniuse em outubro de 2026, incluindo o Safari do iPhone desde a versão 15. Suportar não é rodar bem: celular de entrada com pouca memória precisa de modelo leve, textura comprimida e queda controlada de qualidade. Um site 3D sério define um aparelho de referência e testa nele.

Posso ter vídeo de fundo e 3D na mesma página?

Pode, mas não na mesma dobra. Duas mídias pesadas disputando o LCP e a GPU do celular é o pior dos dois mundos. O arranjo que funciona é 3D na primeira dobra, quando ele é o motivo da página, e vídeo mais abaixo com carregamento preguiçoso, ou o contrário. Cada mídia precisa do próprio pôster e da própria regra para movimento reduzido.

Conclusão

A escolha entre vídeo de fundo e 3D não é estética; é de objetivo e de orçamento de carregamento. Vídeo serve à atmosfera quando a produção existe e o arquivo cabe no celular; 3D serve à demonstração e à memória quando há engenharia para mantê-lo leve. Nos dois, pôster, título em HTML e respeito a quem pede menos movimento vêm antes de qualquer byte de mídia.

Se nenhum dos dois passa no teste da fotografia forte, a resposta é a fotografia. Os critérios de animação no site: quanto é demais valem para a mídia da primeira dobra também.

Veja as primeiras dobras em 3D que entregamos