Como fazer as imagens de um site carregarem mais rápido
As cinco mudanças que reduzem o peso das imagens em qualquer site, em ordem de impacto.
Na maioria dos sites, as imagens representam a maior parte do que o visitante baixa. Uma única foto de celular sem otimização pode pesar mais do que todo o resto da página. Ajustar as imagens costuma ser a melhoria de velocidade maior e mais barata que existe, e páginas mais rápidas ranqueiam melhor, seguram o visitante por mais tempo e convertem mais.
1. Suba as imagens no tamanho em que elas aparecem
Uma foto direto do celular tem 4000 pixels de largura ou mais. Uma coluna de conteúdo em um site raramente passa de 1200 pixels, e um card ou miniatura é bem menor. Cada pixel a mais é baixado e depois jogado fora pelo navegador. Redimensione antes de subir: cerca de 2000 pixels de largura para banners de largura total (para continuarem nítidos em telas de alta densidade), 1200 a 1600 para imagens de conteúdo e 600 a 800 para cards. A ferramenta de redimensionar dá conta de uma pasta inteira de uma vez.
2. Comprima
Com as dimensões certas, a compressão resolve o resto. Uma foto salva com qualidade 80 fica igual a uma com qualidade 100 em uma página web e muitas vezes tem um terço do tamanho. O compressor de imagens processa lotes e mostra a economia de cada arquivo.
3. Use WebP
O WebP é aceito por todos os navegadores atuais e costuma ser de 25 a 35 por cento menor que o JPG com a mesma qualidade visível, e o suporte a transparência faz dele um substituto para muitos PNG também. Converta com JPG para WebP ou PNG para WebP. O AVIF é ainda menor, mas mais lento para codificar e menos aceito pelos sistemas de envio, então o padrão prático é o WebP.
4. Escolha o formato certo para cada conteúdo
| Conteúdo | Melhor formato |
|---|---|
| Fotos | WebP, ou JPG onde o WebP não for aceito |
| Logos e ícones | SVG, se você tiver, senão PNG ou WebP |
| Capturas de tela com texto | PNG ou WebP sem perdas |
| Animações simples | Um vídeo curto em vez de um GIF |
5. Ajude o navegador a carregar com bom senso
- Carregamento adiado. Imagens abaixo da primeira tela só devem carregar quando o visitante chegar perto delas ao rolar. A maioria das plataformas faz isso sozinha; em HTML puro, adicione loading="lazy" nas tags img que não aparecem de início.
- Dimensões. Informe largura e altura em toda imagem para a página não dar saltos enquanto elas chegam. O deslocamento de layout é uma das Core Web Vitals do Google.
- A imagem principal primeiro. A imagem grande no topo da página, normalmente a que conta como Largest Contentful Paint, nunca deve ter carregamento adiado. Ela precisa carregar o quanto antes.
Quanta diferença isso faz
Uma página comum com dez fotos direto do celular pode pesar 30 MB. Redimensionada para larguras sensatas e comprimida, a mesma página costuma ficar em torno de 2 MB. Convertida para WebP, perto de 1,4 MB. Em uma conexão móvel, essa é a diferença entre uma página que aparece em um segundo e outra que muita gente abandona.
Conferindo os resultados
O PageSpeed Insights do Google e o painel Lighthouse nas ferramentas de desenvolvedor do Chrome listam imagens grandes demais, imagens que deveriam estar em WebP e o elemento do Largest Contentful Paint. Rode antes e depois, e comece pelas páginas com mais acessos.