Usar vídeo como plano de fundo no seu site pode ser uma ótima maneira de atrair a atenção inicial da sua audiência. O vídeo tornou-se incrivelmente popular ao longo dos anos como um recurso de design de plano de fundo, e continuará crescendo, já que o suporte para video HTML5  em todos os navegadores modernos está se tornando o padrão.

Algumas das perguntas frequentes que temos visto online sobre como otimizar vídeos para web design resumem-se em 2 problemas comuns que você já deve ter se deparado ao criar e implementar vídeos de plano de fundo nos seus projetos.

1) Comprimindo vídeos para usar em websites

O primeiro deles está relacionado à questão dos arquivos geralmente muito grandes quando vêm dos aplicativos de edição ou de criação. Este é um grande problema, já que uma banda larga limitada e conexões de internet ruins podem levar à demasiadas paradas e armazenamento em buffer dos vídeos antes de serem totalmente carregados.

Assim, o que se supõe ser um bom recurso de design que valoriza o visual e a impressão geral de um site, pode transformar-se em algo desagradável para os visitantes se tiverem que esperar que todos os elementos sejam carregados e exibidos corretamente.

Vídeos grandes não são ruins apenas com relação ao tempo de carregamento de um modo geral, proporcionando em uma experiência negativa para o usuário, especialmente se seu site é acessado pela primeira vez e ainda não foi armazenado em cache. Eles também impactam negativamente a SEO do seu site, pois as páginas carregadas mais rapidamente são um fator importante que o Google e outros levam em consideração. Portanto, a compactação dos vídeos antes de sua utilização em um site é o caminho a seguir.

2) Convertendo videos para  HTML5

Em segundo lugar, os vídeos que você pega de colegas ou cria em suítes de edição de vídeo podem geralmente estar em um formato que pode ocasionar problemas em tempo de execução, pois a maioria dos navegadores (Chrome, Firefox,Edge, Opera, Internet Explorer, Safari, etc.) são capazes de reconhecer alguns, mas não outros formatos de vídeo, codecs de vídeo e (se não estiver no contêiner) codecs de audio sem plugins extras.

MP4 e WebM são, sem dúvida nenhuma, os formatos de vídeo mais comuns para uso na web. Devido aos possíveis problemas de licenciamento com o MP4, o melhor é  converter vídeos para WebM (VP8) antes de usá-los nos sites e, opcionalmente, disponibilizar um vídeo MP4 (H264) como uma alternativa para os navegadores incompatíveis com WebM.

Isto é importante para garantir que os vídeos sejam aceitos por tantos navegadores quantos forem possível em fones, tablets, laptops e combos em sistema operacional. Infelizmente, até esta data, não há nenhuma combinação formato/video codec/audio codec para controlar todos eles.

Otimizar vídeos para web design

Como acima mencionado, uma maneira para otimizar vídeos para web design é reduzir o tamanho do arquivo de vídeo, o que ajudará a melhorar drasticamente o tempo de carregamento da página e desempenho de playback.

As opções adicionais incluem redução da resolução e qualidade do vídeo (nível de compactação e taxa de bit). Um outro fator, ainda, é selecionar um formato de vídeo amplamente reconhecido.

Apesar de normalmente não recomendarmos a redução demasiada da resolução e taxa de bit dos seus vídeos, já que estes 2 são importantes para a qualidade perceptível de um vídeo, isto não é motivo para grandes preocupações no caso de vídeos de plano de fundo de websites devido ao fato de que este tipo de clipe geralmente não ser o foco principal dos visitantes.

Ao invés disto, os vídeos em loop HTML5 vêm sendo exibidos por trás de camadas e/ou elementos de texto transparentes e representam um item de design que precisam ser carregados e executados rapidamente em qualquer dispositivo que os seus visitantes usem para acessar seu site, independentemente da conexão com a internet que estejam usando.

Assim sendo, o tamanho de arquivo pequeno supera resolução, taxa de bit e qualidade perceptível até um certo ponto.

Como você deve ter imaginado, se o objetivo é criar um arquivo de vídeo pequeno de boa qualidade, nosso conversor de vídeo online e compactador de vídeo Clipchamp é uma boa ferramenta de ajuda.

Ele já é bem popular entre web designers, desenvolvedores web, designers gráficos, criadores WordPress, Wix e Squarespace. Ele tem sido recomendado também por  bloggers de web design como um app útil para plataformas de criação de sites visuais como Webflow com o propósito específico de compactar vídeos de plano de fundo e cinemagrafias* para sites.

compress-video-web-design

 

O Clipchamp compacta e converte vídeos localmente no seu navegador antes de fazer o upload deles para o seu servidor, provedor de hospedagem ou construtor de site. Portanto, não é útil apenas ao colocar o vídeo no site, mas também torna o upload inicial mais rápido.

Para utilização em sites, nós geralmente recomendamos compactar os vídeos para, pelo menos, 720p usando ou uma configuração de qualidade média ou baixa no Clipchamp. Ambas as opções de saída Web e Mobile são possíveis – a predefinição Mobile irá produzir arquivos de saída menores que Web, em uma qualidade perceptível ligeiramente reduzida.

Em suma, as melhores configurações para vídeos de plano de fundo são  Web, 720p, qualidade média, MP4 ou WebM ou Mobile, 720p, qualidade média, MP4. Dependendo do seu arquivo de entrada e da qualidade, assim como do tamanho de saída dos vídeos que o Clipchamp produz no seu cenário, é melhor tentar uma combinação de diferentes configurações para obter resultados satisfatórios.

HTML5-background-video

Nós entendemos que pode ser tentador usar vídeos de alta qualidade com 1080p ou acima, mas não aconselharíamos, considerando que o tempo médio gasto pelos visitantes em um site é  inferior a 15 segundos. Você vai querer causar uma boa primeira impressão naqueles cruciais primeiros poucos segundos e nosso vídeo conversor online pode ajudá-lo com isto.

 


*O que são as cinemagrafias que você perguntou? Confira neste subreddit seus lindos exemplos.