Artigo

Otimize a mídia do site para velocidade e Core Web Vitals

Imagens e vídeos costumam representar de 60 a 80 por cento do peso total de uma página web. Acertar neles é a coisa de maior impacto que você pode fazer pela velocidade de carregamento, pelas notas dos Core Web Vitals e pelo posicionamento na busca. A boa notícia: nada disso exige software especializado ou um servidor, e seus arquivos nunca precisam sair do seu dispositivo.

Escolha o formato certo antes de tudo

A escolha do formato importa mais do que qualquer controle de qualidade. Para fotografias em uma página web, o WebP é o padrão certo: é de 25 a 35 por cento menor que o JPEG com a mesma qualidade visual e todos os navegadores modernos o suportam. O AVIF comprime ainda mais, até 50 por cento melhor que o JPEG, ao custo de uma codificação mais lenta. Use o AVIF para imagens de destaque e fotos de produtos que você comprime uma vez; use o WebP para tudo que você processa em lotes ou precisa rapidamente. O PNG só faz sentido onde você precisa de precisão sem perdas ou de um fundo transparente. O SVG é a única escolha sensata para logos, ícones e ilustrações: ele se ajusta a qualquer tamanho e muitas vezes pesa alguns kilobytes contra centenas de um equivalente rasterizado.

Comprima imagens sem perda visível de qualidade

Comece redimensionando para as dimensões reais de exibição: uma imagem de destaque que aparece com 1280 pixels de largura não precisa de 4000 pixels de dados. Redimensione primeiro, depois comprima. Para fotografias, a qualidade 80 em WebP ou JPEG é o piso prático abaixo do qual os visitantes comuns começam a perceber, então mire em 75 a 85 e observe o resultado em zoom total antes de publicar. Para gráficos com texto e áreas chapadas, o PNG sem perdas ou o SVG preservam a nitidez que os formatos com perdas borram. O compressor de imagens deste site lida com todos esses formatos, roda inteiramente no seu navegador e aplica os mesmos algoritmos das ferramentas de desktop dedicadas.

Converta vídeo para a web sem fazer upload

Loops de fundo e vídeos embutidos são onde a otimização de mídia web costuma deixar a desejar. Um MP4 com H.264 reproduz em qualquer lugar, mas um WebM com VP9 é de 20 a 40 por cento menor com a mesma qualidade, o que importa para usuários móveis em conexões limitadas. A abordagem prática é converter uma vez para WebM, servi-lo como fonte preferida em um elemento de vídeo e manter o MP4 como alternativa. O conversor de vídeo aqui usa o FFmpeg compilado em WebAssembly: a conversão roda dentro do seu navegador, nada é enviado, e arquivos de qualquer tamanho funcionam enquanto o seu dispositivo tiver memória suficiente. Para vídeo de fundo embutido na página, considere também o cortador de vídeo para eliminar os segundos mortos antes da codificação: a duração é o maior fator de tamanho do arquivo.

Recursos embutidos: base64 e SVG

Imagens muito pequenas, ícones e favicons embutidos diretamente em HTML ou CSS como strings base64 eliminam uma ida e volta de rede por recurso. Isso faz sentido para recursos abaixo de cerca de 2 KB que aparecem em todas as páginas, como um sprite de logo ou um indicador de carregamento. Recursos maiores devem permanecer como arquivos separados, pois o base64 codifica 33 por cento mais pesado que o binário, e os navegadores armazenam em cache as referências de arquivo, mas não os dados embutidos de forma independente. O otimizador de SVG remove o lixo de editor dos SVGs exportados sem alterar o resultado visual. O conversor de imagem para base64 gera o data URI pronto para colar no seu navegador.

Ferramentas neste artigo

Perguntas frequentes

A compressão de imagens afeta meu posicionamento na busca?

O Google usa os Core Web Vitals como sinal de classificação, e o Largest Contentful Paint é quase sempre uma imagem ou o pôster de um vídeo. Uma página cuja imagem de destaque carrega em menos de um segundo pontua melhor do que aquela em que isso leva três segundos. A compressão e o formato certo afetam diretamente essa métrica, então sim, a otimização de imagens tem um impacto mensurável de SEO. O efeito é mais forte no celular, onde as conexões são mais lentas e a penalidade por imagens pesadas é maior.

Por que processar mídia localmente em vez de usar um serviço web?

A maioria das ferramentas de mídia online exige enviar seus arquivos para um servidor remoto, o que leva tempo, consome banda e significa que uma cópia do seu arquivo passa a existir em uma infraestrutura que você não controla. As ferramentas deste site rodam inteiramente no seu navegador: suas imagens e vídeos são processados no seu dispositivo e o resultado é baixado diretamente. Não há conta, não há espera de upload, e nada dos seus arquivos é enviado a um servidor.