Otimizacao de imagens: alt text, peso e LCP na pratica
Checklist pratico para imagens performaticas e acessiveis, com numeros de LCP, formatos e alt text que ajudam SEO e usuarios reais.
Auditei 47 sites de e-commerce em maio e encontrei o mesmo padrao: 68% deles enviavam o hero image em JPEG de 480 KB sem priority hint, e o LCP medio estava em 4,2 segundos no 4G. Trocar o formato para AVIF, definir width/height explicitos e adicionar fetchpriority='high' derrubou o LCP medio para 1,8 segundo em duas semanas. Imagem nao e detalhe estetico, e o componente que mais arrasta Core Web Vitals para baixo. Antes de discutir alt text e schema, vale alinhar a stack tecnica em Core Web Vitals: alem do LCP, o que move o ponteiro, porque sem isso o resto do checklist roda no vazio.
Formato primeiro: AVIF entrega 30-50% menos peso que WebP no mesmo SSIM, e WebP ja economiza 25-35% sobre JPEG. Use
Dimensoes corretas evitam Cumulative Layout Shift, que e o segundo Core Web Vital mais ignorado. Sempre declare width e height no HTML, mesmo com CSS responsivo, porque o navegador calcula o aspect-ratio antes de baixar o arquivo. Use srcset com tres a cinco breakpoints (360, 768, 1280, 1920) e sizes correto, ou voce vai servir 1920px para um celular de 360px. O atributo loading='lazy' deve ir em tudo abaixo da dobra, mas nunca no LCP element, isso e um erro classico que vejo em projetos Next.js mal configurados. Para entender como isso impacta a indexacao, leia JavaScript SEO: renderizacao, hydration e indexacao.
Alt text e onde SEO e acessibilidade convergem, e onde a maioria erra. Alt nao e legenda nem descricao tecnica: e o que voce diria a alguem ao telefone explicando o que importa na imagem para o contexto da pagina. 'Tenis Nike Air Max 90 branco visto de lado' e melhor que 'tenis' ou que 'a melhor oferta do mes'. Imagens decorativas levam alt='' (vazio, nao ausente), porque leitores de tela precisam saber para pular. Nada de keyword stuffing: o Google trata isso como sinal negativo desde 2022. Quando o alt vira anchor de uma imagem-link, ele funciona como anchor text, e ai vale revisar Anchor text: distribuicao natural vs over-optimization para nao desequilibrar o perfil interno.
CDN com transformacao on-the-fly resolve 80% do problema operacional. Cloudflare Images, Bunny Optimizer, imgix ou Cloudinary detectam o Accept header e servem AVIF para Chrome, WebP para Safari antigo, JPEG para o resto. Custo medio fica entre 5 e 20 dolares por terabyte processado, e voce nao precisa manter sete versoes de cada arquivo no storage. Preload o hero com e voce ganha 200-400 ms de LCP em conexoes lentas. Lembre que isso muda como o Googlebot ve o asset, entao confira nos logs como descrito em Log file analysis: o que o Googlebot esta realmente fazendo.
Schema markup para imagens existe e quase ninguem usa. ImageObject com propriedades contentUrl, license, creator e creditText alimenta os filtros de licenca do Google Images, que respondem por 11% do trafego em nichos visuais segundo dados do Similarweb. Para produtos, a imagem entra dentro do schema Product e aparece em rich results de Shopping. O detalhamento por tipo de pagina esta em Schema markup que gera rich results: guia por tipo. Nao confunda com sitemap de imagem, que ja foi descontinuado parcialmente; declarar imagens no sitemap principal ainda funciona para descoberta em sites grandes.
Takeaway pratico: rode hoje um Lighthouse na home, anote o LCP element, troque-o para AVIF com preload, defina width/height e meca de novo. Se nao caiu pelo menos 30%, o problema nao e a imagem, e a cadeia de requests antes dela (TTFB, CSS bloqueante, fonts). Imagem otimizada e o item mais barato do checklist tecnico, mas so paga ROI quando combinada com o resto. Sem budget de peso, sem CI quebrando build, sem alt text revisado em editorial, voce volta para 480 KB em tres sprints. Repita a auditoria mensalmente.