Otimização de imagens e mídia: AVIF, WebP, lazy loading e CDNs de imagem

Imagens e vídeos são, de longe, o maior peso da web. Em uma página típica, a mídia responde pela maior fatia dos bytes transferidos, muito à frente do HTML, CSS e JavaScript somados. Isso faz do pipeline de mídia um dos pontos de maior alavancagem para deixar um site rápido. Uma única imagem de hero mal otimizada, com vários megabytes, pode sozinha estragar a experiência de carregamento inteira.

Este guia é sobre o pipeline de mídia, ou seja, como as imagens e vídeos saem do seu servidor e chegam ao usuário no menor tamanho possível sem perder qualidade visível. Não vamos reensinar as métricas de performance (LCP, INP e CLS têm um post próprio de Core Web Vitals). O foco aqui é prático e concreto: formatos, tamanhos responsivos, carregamento preguiçoso, CDNs de imagem e vídeo.

Escolher o formato certo

O primeiro ganho, e o maior, vem de usar formatos modernos. Cada geração de formato entrega a mesma qualidade visual com menos bytes. Um panorama rápido:

Formato	Compressão	Transparência	Melhor uso
JPEG	Boa (com perdas)	Não	Fotos, fallback universal
PNG	Sem perdas, pesado	Sim	Logos, ícones, gráficos com transparência
WebP	25 a 35% menor que JPEG	Sim	Substituto geral, ótimo suporte
AVIF	40 a 50% menor que JPEG	Sim	Estado da arte em compressão
SVG	Vetorial, minúsculo	Sim	Ícones, logos, ilustrações simples

A recomendação prática é uma cascata: sirva AVIF para quem suporta, WebP como segunda opção, e um JPEG ou PNG como fallback universal. O navegador escolhe o melhor formato que entende usando o elemento <picture>:

<picture>
  <source type="image/avif" srcset="/img/hero.avif" />
  <source type="image/webp" srcset="/img/hero.webp" />
  <img src="/img/hero.jpg" alt="Descrição da imagem" width="1200" height="630" />
</picture>

Para ícones e logos, prefira SVG sempre que possível: por ser vetorial, escala em qualquer resolução com um peso ridículo e sem depender de versões por tamanho.

Servir o tamanho certo: srcset e sizes

Enviar uma imagem de 2000 pixels de largura para um celular que a exibe em 375 pixels é desperdiçar banda e tempo. A solução são as imagens responsivas, servidas com os atributos srcset e sizes. Você fornece várias versões em tamanhos diferentes, e o navegador baixa a mais adequada à tela e à densidade de pixels do dispositivo.

<img
  src="/img/foto-800.jpg"
  srcset="/img/foto-400.jpg 400w,
          /img/foto-800.jpg 800w,
          /img/foto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Descrição da imagem"
  width="800" height="600"
/>

Dois detalhes fazem toda a diferença:

• O srcset com descritores w informa a largura real de cada arquivo, e o sizes diz quanto espaço a imagem ocupa no layout em cada breakpoint. Juntos, permitem ao navegador escolher com precisão.
• Sempre defina width e height (ou aspect-ratio). Além de evitar que o layout salte enquanto a imagem carrega, isso reserva o espaço correto desde o início.

Lazy loading sem tiro no pé

Lazy loading é adiar o carregamento de imagens que ainda não estão visíveis, baixando-as só quando o usuário se aproxima delas na rolagem. Isso reduz drasticamente o peso do carregamento inicial em páginas longas. Hoje é nativo do navegador, sem biblioteca:

<img src="/img/abaixo-da-dobra.jpg" loading="lazy" alt="..." />

O cuidado essencial, e o erro clássico, é não aplicar lazy loading na imagem principal acima da dobra, especialmente na do hero. Adiar o carregamento do maior elemento visível atrasa exatamente o que o usuário vê primeiro. A regra é simples:

• Acima da dobra: carregamento prioritário. Use loading="eager" e considere fetchpriority="high" na imagem mais importante.
• Abaixo da dobra: loading="lazy", para não competir com o conteúdo inicial.

O mesmo raciocínio vale para <iframe> de mapas e vídeos incorporados, que também aceitam loading="lazy".

CDNs de imagem: transformação sob demanda

Gerar manualmente cada versão (AVIF, WebP, JPEG, em cinco tamanhos, para cada imagem) é insustentável. É aí que entram as CDNs de imagem: serviços que armazenam a imagem original uma vez e geram, sob demanda, a variação exata pedida pela URL, já cacheada na borda.

Na prática, você aponta para uma URL com parâmetros e a CDN faz o resto:

https://cdn.exemplo.com/foto.jpg?format=auto&width=800&quality=75

O que uma boa CDN de imagem entrega:

• Conversão automática de formato (format=auto), servindo AVIF ou WebP conforme o navegador, sem você gerar nada.
• Redimensionamento e recorte por parâmetro, alimentando o srcset sem pré-processar arquivos.
• Ajuste de qualidade, muitas vezes com compressão inteligente que reduz o peso sem perda visível.
• Cache na borda, entregando a mídia de um servidor próximo ao usuário.

O resultado é um pipeline em que o time envia a imagem original em alta e a entrega otimizada acontece automaticamente, por URL.

Não esqueça do vídeo

Vídeo é mídia pesada e merece o mesmo rigor. Alguns princípios que evitam tráfego desperdiçado:

• Não use vídeo onde um GIF animado ou um <video> curto resolve melhor. GIFs são enormes; um MP4 ou WebM equivalente pesa uma fração.
• Comprima e escolha o codec certo: formatos modernos entregam a mesma qualidade com menos bytes.
• Use preload="none" ou preload="metadata" para não baixar o vídeo inteiro antes de o usuário dar play.
• Ofereça um poster (imagem de capa) para o vídeo não aparecer como um retângulo preto enquanto carrega.
• Para vídeos longos, considere streaming adaptativo, que ajusta a qualidade à conexão em vez de baixar um arquivo único gigante.

Um checklist de pipeline de mídia

Antes de publicar, vale revisar:

• Formatos modernos servidos com <picture> (AVIF, WebP e fallback).
• SVG para ícones e logos.
• srcset e sizes para servir o tamanho certo por dispositivo.
• width e height definidos em todas as imagens.
• Lazy loading abaixo da dobra e carregamento prioritário no hero.
• CDN de imagem com format=auto e ajuste de qualidade.
• Vídeos comprimidos, com poster e preload controlado.

Peso é experiência (e custo)

Otimizar mídia não é preciosismo técnico: cada megabyte a menos é uma página que aparece mais rápido, um usuário que não desiste e uma conta de banda que encolhe. O pipeline certo (formato moderno na cascata, tamanho responsivo, carregamento inteligente e uma CDN de imagem fazendo o trabalho pesado) transforma a mídia de vilão da performance em um ativo bem gerenciado. E o melhor: quase tudo isso é automatizável, então o ganho é permanente, não um esforço manual repetido a cada publicação.

Na ConstructorTI, construímos pipelines de mídia que entregam qualidade visual com o menor peso possível: cascata de formatos, imagens responsivas, lazy loading correto e CDNs de imagem configuradas para transformar sob demanda. Se o seu site carrega devagar por causa de imagens pesadas, ou se você quer um fluxo de mídia que otimiza sozinho, fale com o nosso time e saia da conversa com um plano concreto para deixar o seu produto leve e rápido.