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 vídeo HTML5 for grande demais, ele pode deixar seu site comercial bem mais lento. Isso pode resultar em uma experiência desagradável para os usuários, já que o vídeo vai ficar pausando para carregar. 

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.

Desktop and mobile user waiting for video to load

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 vídeo esteja na nuvem, certifique-se de que o provedor de hospedagem em nuvem garanta o carregamento e tempo de funcionamento rápidos. Assim, você pode oferecer uma experiência de vídeo ininterrupta aos visitantes do site. Alguns provedores de hospedagem em nuvem oferecem avaliações gratuitas dos serviços.

Editor de vídeo no navegador .

Eternamente grátis. Crie vídeos profissionais em poucos minutos.

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 explicamos, as duas melhores maneiras de se otimizar vídeos para web design são a compactação e a conversão, que ajudam 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.

O Clipchamp já faz sucesso entre web designers, desenvolvedores, designers gráficos e criadores que usam o WordPress, Wix e Squarespace. Também é considerado um app muito prático por blogs de web design e plataformas visuais de criação de sites, como o Webflow, especificamente para compactar vídeos de fundo e cinemagraph para sites.

Clipchamp enterprise users

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.

Optimize your video for web

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:

Select WebM

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

Mais do blog Clipchamp

Transferindo vídeos do seu celular e para o Clipchamp

November 6, 2020
Alguns dos nossos usuários nos perguntaram como converter ou comprimir vídeos que…

Como o vídeo aumenta a taxa de conversão do eCommerce

June 7, 2020
**** atualizado em 28 de maio de 2020 **** Quer você seja um pequeno comerciante…

Como incorporar vídeo no Word Versões 2007 - 2016

March 7, 2020
Quer você seja um profissional tentando dar mais destaque ao seu portfolio ou um…

Comece a criar vídeos gratuitos com o Clipchamp