Comprimir uma imagem reduz a sua qualidade?

A compressão de JPG e WebP é com perdas, mas com qualidade entre 75 e 85 a diferença costuma ser quase invisível. Guarde sempre o original em separado para poder exportar de novo, se necessário.

Que tamanho deve ter a imagem de um artigo?

O limite exato depende do conteúdo, mas as fotografias de um artigo podem muitas vezes ter algumas centenas de quilobytes em vez de vários megabytes. O essencial é que a largura em píxeis corresponda à largura apresentada.

Todos os navegadores suportam WebP?

Todos os principais navegadores modernos suportam atualmente o WebP. Se precisar de cobrir software muito antigo, use um elemento com uma alternativa em JPG.

Como comprimir imagens para um sítio web e acelerar as páginas

As imagens costumam representar a maior parte do peso de uma página, por isso otimizá-las compensa mais do que quase qualquer outra coisa. Este guia explica como o tamanho das imagens afeta a velocidade e as Core Web Vitals, que formato e qualidade escolher e o que verificar antes de publicar.

Porque é que o peso das imagens importa

Uma fotografia diretamente do telemóvel pode pesar vários megabytes. Se a colocar num artigo, um visitante com ligação móvel tem de descarregá-la por inteiro, mesmo que seja apresentada com apenas algumas centenas de píxeis de largura. O resultado é uma página lenta, mais visitantes a sair e dados móveis desperdiçados.

A velocidade também se liga às Core Web Vitals que a Google usa. Uma delas é o LCP (Largest Contentful Paint), que mede a rapidez com que aparece o maior elemento visível. Muitas vezes esse elemento é a imagem principal, pelo que o seu peso afeta diretamente a pontuação. A Google descreve um bom LCP como 2,5 segundos ou menos.

Escolher um formato: WebP ou JPG

O JPG serve para fotografias e funciona em todo o lado. O WebP costuma produzir um ficheiro mais pequeno com qualidade visual semelhante, muitas vezes cerca de um quarto ou mais, e todos os principais navegadores já o suportam. Para sítios novos, o WebP é normalmente uma boa opção por defeito.

O PNG é a escolha certa para capturas de ecrã, logótipos e gráficos com contornos nítidos ou transparência. As fotografias guardadas em PNG acabam por ficar invulgarmente grandes, por isso converta-as antes para JPG ou WebP. Os ficheiros HEIC dos telemóveis também devem ser convertidos antes de irem para um sítio web.

Definir a qualidade

Nos formatos com perdas (JPG, WebP), uma qualidade de aproximadamente 75 a 85 na escala de 0 a 100 costuma bastar para fotografias. Abaixo de cerca de 70 começam a ver-se zonas em bloco e ruído junto aos contornos, enquanto acima de 90 o ficheiro cresce muito por uma diferença que o olho mal nota.

O melhor método é experimentar: exporte algumas versões e compare-as no ecrã ao tamanho em que vão ser realmente apresentadas. As imagens com grandes áreas planas ou texto fino mostram artefactos de compressão mais cedo e podem precisar de uma definição mais alta.

Redimensionar para o tamanho apresentado

Comprimir sem redimensionar é apenas metade do trabalho. Se uma imagem é apresentada com 800 px de largura, não faz sentido servir um ficheiro de 4000 px. Reduzir uma fotografia grande de 4000 para 1600 px de largura corta o peso do ficheiro várias vezes, porque o número de píxeis desce com o quadrado da largura.

Para manter as imagens nítidas em ecrãs de alta densidade, prepare uma versão com cerca do dobro da largura apresentada. Para um espaço de 800 px, um ficheiro de 1600 px costuma bastar.

Imagens adaptáveis e carregamento

O atributo srcset permite ao navegador escolher um ficheiro de tamanho adequado ao ecrã. Exemplo:

O atributo loading="lazy" diz ao navegador para obter a imagem apenas quando o visitante se aproxima dela ao deslocar a página, por isso use-o em imagens abaixo do primeiro ecrã. Não aplique carregamento diferido à imagem principal visível no topo, porque isso pode piorar o LCP.

Os atributos width e height permitem ao navegador reservar espaço com antecedência, para que a página não salte durante o carregamento. Isto melhora a métrica CLS (Cumulative Layout Shift).

Uma lista de verificação prática antes de publicar

Imagem redimensionada para a largura com que é realmente apresentada (no máximo cerca do dobro).
Formato escolhido: WebP ou JPG para fotografias, PNG ou WebP para gráficos com transparência.
Qualidade entre 75 e 85, verificada visualmente no ecrã.
Atributos width e height definidos.
As imagens abaixo do primeiro ecrã usam loading="lazy".
Nomes de ficheiro descritivos (por exemplo centro-historico-porto.webp) e texto alternativo com significado.
Tamanho real do ficheiro descarregado verificado nas ferramentas de programador do navegador (separador Rede).

Como medir o resultado

Antes de otimizar, anote quanto pesa a página. Nas ferramentas de programador do navegador (F12, separador Rede, filtro Img) pode ver o tamanho de cada imagem e o total. Depois de otimizar, repita a medição com a cache desativada (Disable cache) para que a comparação seja justa.

Exemplo: um artigo tem cinco fotografias de 3 MB cada, cerca de 15 MB no total. Se reduzir cada uma para 1600 px de largura e guardar em WebP com qualidade 80, cada uma pesa muitas vezes entre 100 e 250 KB, e todas juntas menos de 1,5 MB. O valor exato depende do conteúdo da fotografia, por isso meça sempre por si.

Erros comuns

Redimensionar apenas com CSS: se carregar um ficheiro de 4000 px e o mostrar com 400 px de largura, o navegador continua a descarregar o ficheiro todo.
Recompressão repetida: cada nova gravação de um JPG acrescenta perdas. Exporte sempre a partir do original.
Usar PNG para fotografias: o ficheiro pode ser várias vezes maior do que em JPG ou WebP.
Carregamento diferido da primeira imagem: a imagem principal no topo deve carregar imediatamente.
Falta de texto alternativo: é importante para a acessibilidade e ajuda os motores de pesquisa a perceber a imagem.