Comprimir imagens para o seu site

As imagens costumam ser os arquivos mais pesados que uma página carrega, e páginas pesadas parecem lentas, principalmente em dispositivos móveis. A solução costuma ser simples: parar de entregar uma foto de 4000 px em um espaço de 800 px. Esta é uma rotina rápida que faz isso no seu navegador, sem enviar nada.

Abrir o compressor de imagens

1. Ajuste o tamanho da imagem ao lugar onde ela aparece

Descubra a maior largura em que a imagem é exibida, como uma coluna de artigo de 800 px ou um banner de largura total. Defina o campo “Largura/altura máx. (px)” para cerca dessa largura, ou até o dobro dela se quiser um resultado nítido em telas de alta densidade. O lado maior é reduzido, as proporções são mantidas e as imagens nunca são ampliadas. Eliminar pixels que você nunca vai exibir é a maior economia possível.

Por exemplo, uma foto de smartphone com 4000 px de largura, exibida em uma coluna de 800 px, pode ser ajustada para 1600 px e continuar nítida em uma tela de alta densidade, com bem menos pixels que o original. Confira o layout da página ou o inspetor do navegador se não tiver certeza da largura real de um espaço.

2. Defina a qualidade

Para fotos em JPG ou WebP, comece em 75% e compare os tamanhos de antes e depois. A maioria das fotos fica quase igual a 70–80% e a 100%, com uma fração do tamanho. Reduza um pouco de cada vez; cada execução parte do seu original, então você pode tentar de novo sem perder nada. O PNG ignora o controle porque é sem perdas, então redimensionar é a única alavanca dele.

3. Escolha o formato

Fotos: o WebP costuma ser menor que o JPG com qualidade parecida, e todos os principais navegadores atuais o aceitam. O JPG é a alternativa segura.
Capturas de tela, textos e logotipos: o PNG mantém as bordas nítidas e aceita transparência; o WebP também aceita transparência.
Imagens de destaque e banners: o plano gratuito gera saída de até 2000 px no lado maior, o que basta para a maioria dos layouts.

A conversão entre formatos e o processamento de lotes ilimitados fazem parte do Pro (US$ 29 por ano ou US$ 4 por mês). O plano gratuito processa até 5 imagens por vez, com qualidade de até 80%.

4. Finalize no código da página

Adicione os atributos width e height a cada <img> para que o layout não “pule” durante o carregamento.
Adicione loading="lazy" às imagens que ficam fora da primeira tela, mas não à imagem principal do topo.
Use nomes de arquivo descritivos e texto alt.

Depois recarregue a página e veja como ela fica em uma janela do tamanho da tela de um smartphone. Se ainda parecer pesada, as maiores imagens restantes são as que devem ser reduzidas ainda mais.

Comprimir as imagens do seu site

Vai compartilhar a foto? Remova também a localização e os dados da câmera: Photo Scrubber