Compactação de Vídeo

Como otimizar vídeos HTML5 para o seu site

Clipchamp é um editor de vídeo online gratuitoExperimente grátis
Compartilhe este post

Última atualização: 15 de outubro de 2019

O vídeo online continua a dominar a internet e é, atualmente, um elemento comum do web design. 

Os vídeos captam a atenção e estimulam a imaginação, então, não é de se admirar estarmos vendo vídeos sendo incorporados em muitas páginas iniciais para atrair o olhar do usuário. Hoje, praticamente todos os navegadores web suportam vídeo HTML5, portanto, este é o momento ideal para adicionarmos um vídeo como background ou um cabeçalho ao seu site.

Clipchamp conta com alguns ótimos templates que seriam perfeitos para o design da sua página na web, como esta cinemagrafia simplesmente espetacular:

Usar este modelo

Existe uma série de razões pelas quais você deveria estar adicionando vídeo HTML5 ao seu site, mas não vá com muita sede ao pote. Alguns contratempos podem ocorrer e você vai precisar otimizar seus vídeos para garantir um desempenho tranquilo. Aqui, vamos abordar o seguinte:

  1. Porque você precisa otimizar vídeos para o seu site

    • Sites lentos perdem clientes

    • Os formatos de vídeo não são todos criados iguais

  2. Como otimizar seus vídeos com Clipchamp

    • Compacte seus vídeos para HTML5

    • Converta seu vídeo para compatibilizá-lo com o navegador

1. Porque você precisa otimizar vídeos para o seu site

As vantagens do vídeo HTML5 não vêm sem um preço. O conteúdo do vídeo incorporado que é reproduzido automaticamente pode ocasionar lentidão no carregamento das páginas, o que é um enorme destruidor de tráfego. Você poderá ter alguns problemas também com vídeos incompatíveis com os navegadores que seus clientes estão utilizando.

Sites lentos perdem clientes

Se o seu vídeo HTML5 for grande demais, ele pode deixar seu site significativamente mais lento. Isto pode resultar em uma experiência desagradável para os usuários ao assistir seu vídeo, pausando e reaparecendo à medida que o site é carregado. 

Assim, o que deveria ser mais um belo recurso de design para adicionar valor à impressão geral de um site, pode se transformar em um estorvo para os visitantes se tiverem que ficar esperando que todos os elementos sejam carregados e exibidos corretamente.

Mesmo contando com um ótimo SEO e ofertas fantásticas que trazem visitantes para o seu site, uma experiência ruim do usuário pode desfazer absolutamente tudo. As pessoas vão, não só, clicar para sair do seu site mas isto também vai ser notado pelo Google. As taxas de tempo de carregamento de página e clique de saída são, ambas, importantes fatores que afetam a classificação da sua página no Google. Portanto, não deixe de compactar os vídeos para o seu site.

Caso o conteúdo do seu vídeo esteja na nuvem, certifique-se de que seu provedor de hospedagem em nuvem garanta carregamento e tempo de atividade rápidos. Desse modo, você pode oferecer uma experiência de vídeo ininterrupta aos visitantes do seu site.

Comece agora grátis

Sempre grátis. Ou atualize por tão pouco quanto $9/mês

Os formatos de vídeo não são todos criados iguais

O melhor vídeo HTML5 do mundo não vai te ajudar se ele não carregar no navegador das pessoas. Nem todos os formatos de vídeo serão carregados em todos os tipos de navegador e, então, você precisa converter seus vídeos para evitar aquele momento 'sem noção' quando o conteúdo do seu vistoso vídeo simplesmente não carrega. É importante garantir que seus vídeos sejam aceitos pelo maior número de navegadores possível no maior número de dispositivos possível. 

Infelizmente, não existe um formato único que rege todos eles, mas é melhor apostar no WebM (VP8) ou então no MP4 (H264). Esses serão carregados na maioria dos navegadores, mas não em todos. 

Na verdade, a melhor coisa a fazer é converter seu vídeo para WebM antes de usá-lo no design do seu site e providenciar também um MP4 como alternativa. Desse modo, nos raros casos de ausência de suporte para um WebM, a versão MP4, substitutiva, será carregada.

2. Como otimizar seus vídeos com Clipchamp

As duas formas mais importantes de otimizar vídeos para o seu web design são a compactação e a conversão – e ambas podem ser feitas gratuitamente usando o Clipchamp Utilities!

Como acima mencionado, as duas melhores maneiras de otimizar vídeos para web design são a compactação e a conversão, que lhe ajudarão a melhorar drasticamente o tempo de carregamento da página e o desempenho na reprodução. 

Antes disso, porém, nós temos uma recomendação: para manter a qualidade, normalmente nós não sugerimos reduzir muito a resolução e a taxa de bits dos seus vídeos, mas pode ser que você tenha um pouco mais de flexibilidade caso você crie vídeos com o objetivo principal de reproduzi-los como background do seu site. Esses tipos de vídeos não são o único foco de atenção e geralmente podem ser exibidos em telas menores, já que a navegação intensa ocorre nos celulares. 

Vídeos HTML5 em loop costumam ser exibidos por trás de camadas transparentes ou elementos textuais, e precisam ser carregados e reproduzidos rapidamente em qualquer dispositivo, independentemente da conexão com a internet. Sendo assim, tamanho de arquivo pequeno leva vantagem em relação à resolução. O próprio site da Clipchamp é, na realidade, um exemplo desta recomendação posta em prática. Bem, voltando à otimização dos vídeos:

Compacte seus vídeos para HTML5

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

Já é bem popular entre web designers, desenvolvedores web, designers gráficos, criadores WordPress, Wix e Squarespace. Tem sido recomendada também como um app útil por blogueiros de web design e por plataformas visuais de construção de sites, como a Webflow, especificamente para compactar vídeos de fundo e cinemagrafias para sites.

Clipchamp comprimi e converte vídeos localmente no seu navegador antes de enviá-los ao seu servidor, provedor de hospedagem ou construtor de site. Ele é, portanto, não apenas útil quando o vídeo está no site mas também ao fazer 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 configuração Mobile produz arquivos de saída menores que a Web em uma qualidade perceptível ligeiramente reduzida.

Converta seu vídeo para compatibilizá-lo com o navegador

Você pode converter seu vídeo com facilidade para aumentar a compatibilidade com o navegador usando o Clipchamp Utilities. Basta enviar seu vídeo, escolher o formato desejado em Customize settings e o conversor Clipchamp grátis cuidará do resto:

Se você quiser adicionar um backup em MP4 para o seu site, basta repetir o processo, mas escolher MP4.

Comece a criar vídeo com o Clipchamp Create gratuitamente.