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

*Agora, a compactação de vídeo está disponível apenas para usuários do Clipchamp Utilities.

Ú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 chamam atenção e estimulam a imaginação, então, não é surpresa que eles estejam presentes em tantas páginas iniciais para atrair o olhar do usuário. Hoje em dia, praticamente todos os navegadores são compatíveis com vídeos HTML5. É essencial fazer um planejamento de conteúdos e criar um logotipo para o seu site que represente bem a marca para o público-alvo. Quando terminar, crie outros designs visuais para atrair o público. É o momento ideal para adicionar um vídeo de fundo ou como cabeçalho no seu site. O Clipchamp oferece modelos perfeitos para o design do seu site, como este cinemagraph incrível:

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 atraem visitantes para o seu site, uma má experiência de usuário pode acabar com tudo isso. As pessoas vão sair rapidamente do site, e o Google vai perceber. O tempo de carregamento de página e o índice de saída são fatores importantes 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 web design são a compactação e a conversão – e as duas são gratuitas com 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. 

Os vídeos HTML5 em loop costumam ser exibidos por trás de camadas transparentes ou elementos de texto, e precisam ser carregados e reproduzidos rapidamente em qualquer dispositivo, independentemente da conexão com a internet. Portanto, é melhor priorizar o tamanho do arquivo que a resolução. O site do Clipchamp é um exemplo dessa recomendação em ação. Bom, vamos voltar à otimização dos vídeos:

Compacte seus vídeos para HTML5

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

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
O Clipchamp Utilities e a compactação de vídeo foram descontinuados em 2021. Mas…

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
*Agora, a compactação de vídeo está disponível apenas para usuários do Clipchamp…

Comece a criar vídeos gratuitos com o Clipchamp