Como fazer as imagens do seu site carregarem mais depressa (sem desfoque)

Porque é que o peso das imagens importa

O mais lento numa página é normalmente a sua imagem maior, e muitas vezes é o que o navegador mede como Largest Contentful Paint (LCP). Os Core Web Vitals da Google consideram bom um LCP abaixo de 2,5 segundos. Uma foto principal de 3 MB numa ligação móvel pode gastar sozinha todo esse orçamento.

1. Sirva as imagens com o tamanho a que são mostradas

Não faz sentido enviar uma foto de 4000 píxeis para um espaço que a mostra com 800 píxeis de largura. Como regra prática, uma imagem deve ter, no máximo, cerca do dobro da sua largura de apresentação, o que a mantém nítida em ecrãs de alta densidade. Larguras típicas: 1600–2000 px para uma imagem principal em largura total, 800–1200 px para imagens de artigos, 300–400 px para miniaturas.

2. Use um formato moderno

Os ficheiros WebP costumam ser 25–35 % mais pequenos do que o JPG com qualidade semelhante, e todos os navegadores atuais os suportam. Use PNG só onde precisar de gráficos sem perdas ou de transparência. Se tiver de suportar software mais antigo, mantenha um JPG de recurso. Veja JPG vs PNG vs WebP para os pormenores.

3. Comprima para um peso razoável

Estes são objetivos aproximados, não regras: uma imagem principal abaixo de cerca de 200 KB, as imagens dentro de artigos abaixo de cerca de 100 KB e as miniaturas abaixo de cerca de 30 KB. Defina o objetivo e deixe a ferramenta encontrar a qualidade mais alta que o cumpra, em vez de andar a experimentar com um controlo.

4. Carregue de forma diferida as imagens abaixo da dobra

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

O carregamento diferido (lazy loading) adia as imagens até o visitante se deslocar para perto delas. Não o aplique à imagem principal no topo da página — essa deve carregar de imediato, porque normalmente é o elemento LCP.

5. Defina sempre a largura e a altura

Com as dimensões no HTML, o navegador reserva a quantidade certa de espaço antes de a imagem chegar, para que a página não salte enquanto carrega (esse salto mede-se como Cumulative Layout Shift). Um atributo alt descritivo ajuda a acessibilidade e a pesquisa de imagens.

6. Ofereça vários tamanhos com srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

O navegador escolhe o ficheiro mais pequeno que seja suficientemente nítido para o ecrã do visitante, de modo que um telemóvel não descarrega a versão de computador.

Como verificar o seu trabalho

Passe a página pelo PageSpeed Insights ou pelo Lighthouse nas ferramentas de programador do Chrome. Ambos assinalam as imagens sobredimensionadas e não otimizadas e estimam os bytes exatos que pouparia.

Preparar os ficheiros

1. Converta a imagem para WebP.
2. Defina a largura de que precisa na ferramenta de redimensionamento — com a proporção bloqueada.
3. Defina um peso máximo e verifique o resultado com o controlo antes/depois.
4. Exporte um ficheiro por cada largura que pretenda usar no srcset.

Trabalhe a partir do original em cada exportação. Comprimir uma cópia já comprimida perde mais qualidade do que comprimir a origem uma só vez.

Perguntas frequentes