Como otimizar imagens e vídeos sem perder qualidade

Resposta direta

Mídia pesada é a causa número um de LCP ruim em sites de marketing e e-commerce. Otimizar sem perder qualidade significa entregar a resolução e o formato que o viewport precisa, não esmagar JPEG até aparecer artefato. Em Performance Web tratamos mídia como parte do design system, não como ajuste de última hora.

Imagens com disciplina de layout

Declare dimensões reais no HTML ou no CSS para evitar CLS. Use `srcset` e `sizes` (ou o equivalente do framework) para não mandar 2400px a um card de 320px. Prefira AVIF ou WebP com fallback. Comprima com critério perceptual: o olho no device alvo manda mais do que o slider no mínimo absoluto.

No hero que é LCP, use `fetchpriority` alto e evite lazy load. Lazy fica para below-the-fold. PNG enorme em foto fotográfica quase sempre é desperdício; use lossy moderno e reserve PNG para UI com transparência fina.

Vídeos sem sabotar a primeira pintura

Comece por um poster leve e nítido. Evite autoplay com som. Prefira stream ou CDN a um MP4 de dezenas de megabytes no hero. Se o motion for só decorativo, Lottie ou CSS costuma custar menos que vídeo full-bleed. No mobile, mute e playsinline pedem cuidado com dados do usuário.

Qualidade percebida versus peso

Faça revisão visual no device real do ICP. Marca premium tolera menos banding e posterização. Em e-commerce, a PDP pede nitidez de produto; a listagem pede peso baixo e estabilidade. O mesmo asset raramente serve aos dois contextos sem variante.

Ligação com Core Web Vitals

Imagem sem dimensão empurra CLS. Hero que chega tarde empurra LCP. O mapa completo está em CWV e no guia de site mais rápido. Se a lentidão parece geral, volte às causas de site lento antes de culpar só a compressão.

Próximo passo

Audite o elemento LCP das URLs que mais vendem ou geram lead. Se a mídia for o gargalo, avance com diagnóstico ou o escopo de Performance Web.