Como Otimizar Imagens para a Web

O WebP é universalmente suportado e reduz o tamanho em 25-35%. O AVIF é ainda mais pequeno (30-50%), mas falta em alguns navegadores mais antigos. O ideal: servir AVIF com fallback para WebP e JPEG/PNG como fallback final.

Típico: JPEG → WebP 30%, PNG → WebP 40%, WebP → AVIF 30%. Combinado com o redimensionamento, uma fotografia DSLR de 2 MB passa a ter 150-300 KB com a mesma qualidade visual.

Não — o Google compreende o lazy loading nativo. Apenas tem de garantir que as imagens acima da dobra NÃO têm lazy loading (devem carregar imediatamente para o LCP).

ShortPixel pela melhor relação compressão/qualidade. O Imagify fica logo a seguir. O Smush é gratuito e adequado a necessidades básicas. O EWWW mantém os ficheiros locais, sem API externa.

Os Core Web Vitals são as métricas de experiência do utilizador do Google: LCP (Largest Contentful Paint — tempo de carregamento do maior elemento), CLS (Cumulative Layout Shift — estabilidade visual) e INP (Interaction to Next Paint — interatividade). As imagens afetam diretamente o LCP, porque o maior elemento de uma página é, na maioria das vezes, uma imagem. Imagens otimizadas com atributos de largura/altura definidos melhoram tanto o LCP como o CLS.