Como comprimir imagens para um site

Uma única foto sem otimização pode pesar mais que o resto da página inteira. Ajustar imagens é a melhoria de performance mais barata que existe, e afeta diretamente o Largest Contentful Paint — um dos Core Web Vitals que o Google usa no ranqueamento.

1. Redimensione para o tamanho que você realmente exibe

Uma imagem de destaque mostrada com 1200 px de largura não precisa de 4000 px. Abra Redimensionar imagem, defina a largura (1600 px é um máximo seguro para imagens de largura total em telas retina, 800 px para imagens de conteúdo) e processe a pasta inteira de uma vez.

2. Escolha o formato certo

• Fotos → WebP (ou JPG se precisar dar suporte a navegadores muito antigos). O WebP é 25–35% menor que o JPG na mesma qualidade e todo navegador atual abre esse formato.
• Logos, ícones, capturas de tela com cores lisas → PNG, e depois reduza a paleta. Salvar fotos como PNG é um erro: o arquivo fica de cinco a dez vezes maior sem ganho nenhum.
• Ícones e ilustrações simples → SVG sempre que você tiver a versão vetorial.

3. Comprima

• JPG para WebP em 80–85% para fotos.
• Comprimir PNG — redução de paleta, o mesmo truque do pngquant, encolhe gráficos de cores lisas em 50–70% sem alteração visível e mantendo a transparência.
• Comprimir JPG em 75–80% se você continuar com JPG.

4. Sirva do jeito certo

Adicione os atributos width e height em todo <img> para o navegador reservar o espaço (sem deslocamento de layout), carregue de forma preguiçosa as imagens abaixo da dobra com loading="lazy" e use srcset se quiser ir além. As etapas de compressão acima são o que a maioria dos sites pula — e são elas que mais importam.