Boas práticas para imagens leves, rápidas e indexáveis
Guia prático de otimização de imagens: compressão, WebP/AVIF, lazy loading, srcset e CDN para melhor LCP, CLS e SEO em sites e apps.
Overview
Imagens costumam representar a maior parte do peso de uma página. Ajustar formato, compressão e estratégia de entrega reduz o tempo de carregamento, melhora LCP e evita layout shift — sem sacrificar a qualidade visual.
Nesta categoria você encontra guias práticos para escolher formatos modernos, gerar variantes responsivas, configurar lazy loading e servir ativos via CDN com cache eficiente. O resultado: páginas rápidas, melhor conversão e sinais de SEO mais fortes.
Editor pick
Aprenda a escolher, editar e padronizar fotos do GBP com IA para conquistar mais cliques no Maps e confiança local.
Richard Sullivan11 de maio de 20251 total in this category
Richard Sullivan11 de maio de 2025Aprenda a escolher, editar e padronizar fotos do GBP com IA para conquistar mais cliques no Maps e confiança local.
Read MoreActionable points curated for this category.
Fotos: prefira WebP/AVIF; transparência complexa: PNG; gráficos vetoriais: SVG. Use <picture> e fallback para cobrir navegadores antigos.
Busque qualidade 60–80 em JPEG/WebP e faixas CQ ~28–35 em AVIF. Compare visualmente e priorize o menor arquivo sem artefatos perceptíveis.
Gere múltiplas larguras e use srcset + sizes para enviar apenas o necessário por viewport. Para telas retina, adote descritores 1x/2x/3x.
Aplique loading='lazy' abaixo da dobra e placeholders LQIP/blur para suavizar a percepção. Evite lazy na imagem que determina o LCP.
Inclua width/height no HTML ou CSS aspect-ratio para reservar espaço e eliminar CLS. Padronize tamanhos em banners, carrosséis e thumbnails.
Entregue via CDN com HTTP/2/3, Cache-Control imutável e ETag. Use header Accept para servir WebP/AVIF quando suportado pelo navegador.
Translate insights from Otimização de imagens into production-ready assets. Remove backgrounds, clean visuals, enhance quality, and ship at scale.