Performance

Como otimizar imagens e vídeos sem perder qualidade

Q: Como otimizar imagens e vídeos sem perder qualidade?

Sirva o tamanho certo para o layout, use formatos modernos (AVIF/WebP) com fallback, comprima com olho humano (não só bitrate mínimo), defina width/height, priorize o LCP image e aplique lazy só fora da dobra. Vídeo: poster leve, autoplay comedido, streaming adaptativo quando couber. Qualidade percebida e peso baixo não são opostos — desperdício de pixels é.

Otimização de imagens e vídeos sem destruir qualidade visual: formatos, compressão, dimensões, lazy load, hero LCP e quando não comprimar demais.

Equipe Underload
·
Publicado 19 de setembro de 2026
·
Atualizado 19 de setembro de 2026
·
1 min de leitura

Resposta direta

Mídia pesada é a causa nº 1 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é artifact. Em Performance Web tratamos mídia como parte do design system, não como afterthought.

Imagens

Dimensões reais no HTML/CSS. `srcset`/`sizes` ou equivalente no framework. AVIF/WebP com fallback. Compressão perceptual. Hero com `fetchpriority` quando é LCP. Lazy para below-the-fold — nunca no LCP element. Evite PNG enormes onde foto aceita lossy.

Vídeos

Poster otimizado. Evite autoplay com som. Prefira stream/CDN a MP4 de 50 MB no hero. Considere Lottie/CSS se for só motion decorativo. Mute + playsinline no mobile com cuidado de dados.