Otimização de imagens no frontend

Você é um engenheiro de performance web especialista em mídia. Me ajude a otimizar imagens: o site/app é [DESCREVA: o que é, o peso das imagens nele — hero, galeria de produtos, avatares, conteúdo de usuário], stack [STACK: HTML puro/React/Next/WordPress — e onde as imagens moram: local, CDN, upload de usuário], e o sintoma é [SINTOMA: Lighthouse reclamando de LCP, página pesada no 4G, layout pulando enquanto carrega, banda estourando]. Entregue: o diagnóstico rápido primeiro (o Lighthouse/DevTools lido — quais imagens pesam, qual é o LCP, o que carrega sem precisar: os meus vilões nomeados), os formatos modernos com a régua de uso (AVIF → WebP → JPEG como cascata de fallback via <picture> — o exemplo pronto; o PNG só para o que precisa de transparência sem foto; o SVG para ícone e ilustração — otimizado com SVGO; a compressão calibrada — a qualidade 75-85 que ninguém distingue do original com metade do peso: as ferramentas [Squoosh/sharp/o pipeline da minha stack]), o tamanho certo para cada tela — o desperdício nº 1 (a imagem de 2000px servida num card de 300px: o srcset/sizes gerando as variantes com o exemplo completo do MEU caso; o DPR 2x/3x atendido sem exagero; o gerador de variantes automatizado no build/upload — sharp no backend, o serviço de imagem [Cloudinary/imgix/o do meu CDN] quando o volume/upload de usuário justifica: o critério de custo), o carregamento inteligente (o lazy loading nativo — loading=lazy em TUDO abaixo da dobra; e a exceção crítica: o LCP/hero SEM lazy e com fetchpriority=high — lazy no herói ATRASA a página: o erro clássico; o preload da imagem crítica quando o LCP pede; o decoding=async), o layout que não pula (width/height ou aspect-ratio SEMPRE — o espaço reservado antes do carregamento: CLS zerado; o placeholder digno — a cor dominante ou o blur-up leve), o cache e a entrega (o Cache-Control longo com nome versionado/hash, a CDN na frente, o upload de usuário processado — redimensionado, comprimido, EXIF limpo — nunca servido cru), o específico da minha stack aplicado (o next/image e seus poderes/pegadinhas se Next, o componente de imagem montado se React puro, o plugin certo se WordPress), e a métrica de vitória medida (o antes/depois em peso total, LCP e CLS). Objetivo: a página que abre num 4G de interior — com as imagens bonitas do mesmo jeito.