Como comprimir imagens para um site

Numa página típica, as imagens pesam mais do que o HTML, o CSS e os scripts juntos. Uma única foto copiada direto do celular pode ter de 3 a 6 MB, enquanto o resto da página fica em algumas centenas de kilobytes. Ajustar as imagens é o ganho de performance mais barato que existe, e ele afeta diretamente o Largest Contentful Paint, a métrica do Core Web Vitals que mede a rapidez com que o conteúdo principal aparece.

Este guia mostra o fluxo completo: definir o tamanho em que cada imagem é exibida, escolher o formato certo, comprimir, conferir o resultado e servir do jeito correto. Funciona para um site feito à mão, uma loja ou um blog em qualquer sistema de conteúdo.

Conheça seu orçamento antes de começar

Ajuda ter números em mente. Estas são metas práticas, não regras rígidas:

• Hero ou banner de largura total: cerca de 150 a 300 KB.
• Imagem de conteúdo dentro de um artigo: 50 a 150 KB.
• Card de produto ou miniatura em uma grade: 20 a 60 KB.
• Logo ou ícone: poucos kilobytes, de preferência em SVG.

Uma página com um hero e dez imagens de conteúdo dentro dessas metas pesa cerca de 1 a 2 MB em imagens. A mesma página montada com fotos do celular sem tratamento passa fácil dos 30 MB.

Passo 1. Redimensione para o tamanho que você realmente exibe

A quantidade de pixels pesa mais no tamanho do arquivo do que qualquer ajuste de qualidade. Uma foto de 4000×3000 tem 12 milhões de pixels; em 1600×1200, tem menos de 2 milhões. É uma redução de 85% antes mesmo de a compressão começar.

Descubra a maior largura em que a imagem chega a ser exibida e depois considere as telas de alta densidade:

• Hero de largura total: de 1600 a 2000 px de largura atendem a maioria dos notebooks e telas retina.
• Coluna de artigo de 700 a 800 px: exporte com 1200 a 1600 px para continuar nítida em telas 2×.
• Card em uma grade de três colunas: 600 a 800 px.

Em Redimensionar imagem, informe uma largura e apague o campo de altura para manter as proporções, ou digite o mesmo número nos dois campos com Manter proporção ativado para limitar o lado maior de um lote misto de fotos na vertical e na horizontal. Atenção: imagens que já são menores que a caixa são ampliadas para preenchê-la, então não passe ícones pequenos por um lote com caixa grande.

O redimensionamento mantém o formato de entrada. JPG e WebP são recodificados em alta qualidade (0,92), e PNG continua sem perdas. Os metadados de localização e da câmera são descartados no processo, o que você quer de qualquer forma em fotos publicadas.

Passo 2. Escolha o formato certo

Escolha pelo conteúdo, não pelo hábito:

• Fotos e qualquer coisa com degradês → WebP. Com a mesma qualidade visual, costuma ser 25 a 35% menor que o JPG, e todo navegador atual o exibe.
• Fotos em que não dá para usar WebP → JPG com qualidade de 75 a 85. Alguns templates de e-mail, sistemas de conteúdo antigos e feeds de marketplaces ainda esperam JPG.
• Capturas de tela, logos, diagramas, gráficos chapados → PNG, depois reduza a paleta. Essas imagens têm poucas cores e bordas nítidas, e nelas o JPG gera borrões visíveis.
• Gráficos com transparência grandes ou fotográficos → WebP. Ele mantém o canal alfa e fica muito menor que o PNG em fotos de produtos recortadas.
• Ícones e ilustrações simples → SVG sempre que você tiver o original vetorial. Nenhum formato raster bate o SVG em tamanho e nitidez.

O erro mais comum é uma foto salva como PNG. Uma foto em PNG costuma ser de cinco a dez vezes maior que um bom JPG, sem nenhum ganho visível.

Passo 3. Comprima

Fotos para WebP

Converter JPG para WebP começa com qualidade 85, que serve para a maioria das imagens de conteúdo. Desça para 70 a 75 em miniaturas e imagens de fundo sob texto, e suba para 90 em heros com detalhes finos ou texto na imagem. A ferramenta também aceita PNG e mantém a transparência.

Para capturas de tela e gráficos com transparência, Converter PNG para WebP começa com qualidade 90, o que mantém linhas finas e textos pequenos nítidos.

A codificação WebP usa o codificador do próprio navegador. O Safari não codifica WebP, então use Chrome, Edge ou Firefox nesta etapa; a página mostra um erro em vez de salvar um arquivo com o formato errado.

Gráficos chapados em PNG

Comprimir PNG reduz a imagem a uma paleta de 256, 128 ou 64 cores e mantém a transparência. Capturas de tela e logos costumam perder de 50 a 70% do peso com 256 cores, sem mudança visível. Comece com 256, teste 128 em capturas de interfaces e deixe 64 para gráficos e ícones simples. A ferramenta não aplica dithering, então degradês suaves podem mostrar faixas; se isso acontecer, volte um nível ou passe essa imagem para WebP.

Continuando no JPG

Comprimir JPG começa em 80. Para conteúdo de sites, 75 a 80 costuma ser o ponto ideal. Se um arquivo já estiver bem otimizado e a recodificação for deixá-lo maior, a ferramenta devolve o original intacto.

Passo 4. Confira antes de publicar

Configurações de compressão são um meio-termo, então olhe o resultado onde o JPEG e o WebP falham primeiro: degradês suaves de céu ou parede, bordas nítidas de alto contraste e áreas de vermelho saturado. Comparar duas imagens coloca o original e a versão comprimida sob um mesmo controle deslizante, o que deixa as diferenças fáceis de ver.

Depois, confira os números. Cada linha de arquivo mostra o tamanho antes e depois; se algo continua bem acima do orçamento, normalmente as dimensões estão grandes demais, e não a qualidade alta demais.

Passo 5. Sirva do jeito certo

A compressão é metade do trabalho. É a marcação que decide como o navegador carrega o que você preparou:

• Sempre defina width e height na <img>. O navegador reserva o espaço antes de o arquivo chegar, o que evita deslocamento de layout, outra métrica do Core Web Vitals.
• Use lazy loading abaixo da dobra com loading="lazy". Nunca aplique lazy loading ao hero: ele geralmente é o elemento do Largest Contentful Paint, e atrasá-lo piora a nota. Em vez disso, dê a ele fetchpriority="high".
• Use srcset e sizes quando a mesma imagem aparece em larguras muito diferentes no celular e no desktop. Exporte duas ou três larguras, por exemplo 800, 1200 e 1600 px, e deixe o navegador escolher.
• Use <picture> com fallback em JPG só se você precisar dar suporte a navegadores muito antigos. Para a maioria dos sites, um WebP simples basta.
• Configure cache longo. Dê aos arquivos de imagem um tempo de cache longo e troque o nome do arquivo quando a imagem mudar.

Muitos sistemas de conteúdo geram cópias redimensionadas no upload. Isso ajuda, mas eles redimensionam a partir do que você enviou, então um original de 6 MB ainda significa uploads lentos e armazenamento inchado. Envie imagens que já estejam perto do maior tamanho de que você precisa.

Opções nativas no computador e no celular

Para algumas poucas imagens, talvez você não precise de mais nada:

• Pré-Visualização do macOS: Ferramentas → Ajustar Tamanho para mudar as dimensões, depois Arquivo → Exportar com o controle de qualidade para JPG. Rápido para um ou dois arquivos.
• Fotos do Windows: a opção "Redimensionar imagem" oferece tamanhos predefinidos e um ajuste de qualidade. O Paint também redimensiona, mas salva JPG sem deixar escolher a qualidade.
• iPhone e Android: os editores nativos cortam, mas não deixam definir dimensões em pixels nem compressão, então o melhor é processar as fotos do celular no caminho para o site.

As ferramentas de navegador acima valem a pena quando você tem um lote: arraste uma pasta inteira, baixe os resultados em um único ZIP, e nada é enviado.

Solução de problemas

• O WebP ficou maior que o JPG. O JPG de origem já estava muito comprimido, ou a qualidade está em 95 a 100. Baixe a qualidade para 80 ou mantenha o JPG.
• O PNG quase não diminuiu. Ele já estava indexado ou otimizado. A ferramenta avisa que o original foi mantido.
• Áreas transparentes ficaram brancas. A imagem passou pelo Comprimir JPG, e JPG não tem transparência. Use Converter PNG para WebP ou Comprimir PNG para recortes.
• O texto em capturas de tela parece borrado. Use PNG ou WebP com qualidade 90 ou mais, nunca JPG.
• As imagens ficam desfocadas em telas retina. Você redimensionou para a largura do CSS; exporte com cerca do dobro disso.

Checklist

1. Meça a maior largura de exibição de cada imagem.
2. Redimensione para no máximo cerca do dobro dessa largura.
3. Fotos para WebP com qualidade 80 a 85, gráficos chapados para PNG com paleta.
4. Compare o resultado em degradês e bordas.
5. Confira cada arquivo em relação ao orçamento de tamanho.
6. Adicione width, height, lazy loading abaixo da dobra e prioridade alta para o hero.