Como comprimir imagens para sites (guia de velocidade)

Seu site tem um problema de velocidade. E o culpado quase certamente são as suas imagens.

As imagens representam mais da metade do peso total da maioria das páginas web. Uma única foto não otimizada pode ser maior que todo o seu HTML, CSS e JavaScript juntos. Esse peso extra torna o carregamento mais lento, frustra os visitantes e prejudica seu ranqueamento nas buscas.

A boa notícia? Comprimir imagens é rápido, fácil e os resultados são enormes. Este guia mostra exatamente como comprimir imagens para a web. As configurações certas, os formatos certos e o workflow certo para obter os menores arquivos sem perda visível de qualidade.

Por que imagens não comprimidas deixam seu site lento?

Cada vez que alguém visita sua página, o navegador baixa cada imagem. Arquivos maiores demoram mais. Downloads mais longos significam páginas mais lentas.

Alguns números típicos. Uma foto direto da câmera pode ter 5-8 MB. Uma captura de tela de um display retina pode ter 2-3 MB. Até imagens exportadas de ferramentas de design como Figma ou Canva costumam ter 500 KB a 1 MB.

Agora multiplique isso pelo número de imagens na sua página. Um post de blog com 5 fotos não otimizadas pode facilmente pesar 15-25 MB só em imagens. Em uma conexão móvel, isso leva mais de 10 segundos para carregar. A maioria dos visitantes sai depois de 3 segundos.

Os dados do Google mostram que quando o tempo de carregamento vai de 1 para 3 segundos, a probabilidade de rejeição aumenta 32%. De 1 para 5 segundos, salta 90%. Imagens pesadas são a razão principal pela qual as páginas ultrapassam esses limites.

A compressão resolve isso. Uma imagem bem comprimida tem quase o mesmo visual que a original, mas pesa 80-95% menos. Aquela foto de produto de 5 MB vira 150 KB. Sua página carrega em 2 segundos em vez de 8.

Qual configuração de qualidade usar para imagens web?

O controle de qualidade é a configuração mais importante ao comprimir imagens. Muito alto e os arquivos ficam grandes. Muito baixo e ficam feios. Veja como encontrar o ponto ideal.

Para fotografias (fotos de produtos, imagens de blog, fundos), use 75-85% de qualidade. Nessa faixa, arquivos JPEG e WebP ficam 80-90% menores que o original. A diferença de qualidade é invisível para a maioria das pessoas na tela.

A 85%, você não consegue ver a diferença do original. A 75%, pode haver um leve suavização em áreas muito detalhadas, mas é quase imperceptível. Abaixo de 60% é onde artefatos começam a aparecer. Padrões em blocos ao redor das bordas. Faixas de cor em degradês. Detalhes finos borrados.

Para gráficos e ilustrações (ícones, logos, diagramas), não use compressão com perda. Use PNG para bordas nítidas e texto. Se o tamanho importa, converta para WebP sem perda. Um WebP sem perda é tipicamente 25% menor que o mesmo PNG.

Para capturas de tela, use PNG ou WebP a 90%+ de qualidade. Texto em capturas fica borrado com muita compressão. Se a captura contém texto legível, mantenha a qualidade alta ou use sem perda.

Tabela de referência rápida:

Tipo de imagem	Formato	Qualidade	Tamanho esperado
Foto de produto	WebP ou JPEG	75-85%	50-200 KB
Imagem hero do blog	WebP ou JPEG	80-85%	100-200 KB
Miniatura	WebP ou JPEG	70-80%	15-50 KB
Logo/ícone	PNG ou SVG	Sem perda	5-30 KB
Captura de tela	PNG ou WebP	90-100%	100-400 KB

Essas metas funcionam para a maioria dos sites. Mire abaixo de 200 KB por imagem, e abaixo de 100 KB quando possível.

Você deve redimensionar imagens antes de comprimir?

Sim. Sempre. O redimensionamento é o maior ganho em tamanho de arquivo, e a maioria das pessoas pula essa etapa.

Por que isso importa tanto. Uma foto de um smartphone moderno tem 4000x3000 pixels. Seu blog exibe a 800px de largura. Isso significa que você está enviando 15 vezes mais pixels do que a tela precisa. Todos esses dados extras são baixados e descartados.

Redimensione a imagem para o tamanho de exibição primeiro. Depois comprima. Os resultados são impressionantes.

Pegue aquela foto de 4000x3000 com 5 MB:

1. Redimensione para 1200px de largura (bom para a maioria dos blogs): cai para ~1 MB
2. Comprima como WebP a 80% de qualidade: cai para ~100 KB
3. Remova metadados: economiza mais 20-30 KB

Resultado final: cerca de 80 KB. Isso é 98% menor que os 5 MB originais.

Para telas retina, sirva imagens no dobro do tamanho de exibição. Se a coluna do seu blog tem 600px de largura, redimensione para 1200px. Os pixels extras deixam a imagem nítida em telas de alta densidade sem ser tão desperdício quanto os 4000px originais.

Não esqueça das imagens responsivas. Use srcset para servir tamanhos diferentes para larguras de tela diferentes. Um usuário mobile em uma tela de 375px não precisa de uma imagem de 1200px.

<img
  src="/foto-800.webp"
  srcset="/foto-400.webp 400w, /foto-800.webp 800w, /foto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Foto do produto"
>

Isso entrega a imagem do tamanho certo para cada dispositivo. Usuários mobile recebem arquivos menores. Usuários desktop recebem qualidade máxima. Todo mundo tem uma página mais rápida.

Qual formato de imagem é melhor para velocidade web?

A escolha do formato tem um impacto enorme no tamanho do arquivo. A mesma foto salva em formatos diferentes pode variar em 50% ou mais.

WebP é a melhor escolha versátil para imagens web hoje. Comprime 25-35% melhor que JPEG. Suporta compressão com e sem perda. Lida com transparência. E mais de 97% dos navegadores suportam.

JPEG continua sendo o formato mais usado para fotos. Comprime bem e funciona em todo lugar. Se você não está pronto para migrar para WebP, JPEG a 75-85% de qualidade ainda é uma boa opção.

PNG é melhor para imagens que precisam de transparência ou precisão perfeita. Logos, ícones, capturas com texto. Mas arquivos PNG são 3-5 vezes maiores que JPEGs equivalentes para fotos. Não use PNG para fotografias.

AVIF oferece as melhores taxas de compressão disponíveis. Até 50% menor que JPEG. Mas a codificação é mais lenta e o suporte dos navegadores ainda não é universal. Vale testar se sua stack suporta.

Para um olhar mais aprofundado sobre como cada formato funciona, confira nosso guia completo de compressão de imagens. Ele cobre com perda vs sem perda, quando usar cada formato e como evitar erros comuns.

Como comprimir muitas imagens de uma vez de forma eficiente?

Comprimir uma imagem por vez funciona para um ajuste rápido. Mas se você está otimizando um site inteiro, precisa de um workflow mais rápido.

Opção 1: Use um compressor online em lote. Ferramentas como CompressIMG permitem fazer upload de até 20 imagens de uma vez. Defina a qualidade, comprima e baixe em ZIP. Sem software para instalar. Sem conta necessária.

Essa é a opção mais rápida para a maioria das pessoas. Faça upload das suas imagens do blog, defina a qualidade para 80% e baixe o lote comprimido. O processo inteiro leva menos de um minuto.

Opção 2: Use ferramentas de build para compressão automática. Se você é desenvolvedor, adicione otimização de imagens à sua pipeline de build. Next.js, Astro e outros frameworks têm otimização de imagens embutida. Eles redimensionam, comprimem e convertem imagens automaticamente.

Opção 3: Use uma API para workflows automatizados. Se seu site lida com uploads de usuários ou puxa imagens de um CMS, você quer que a compressão aconteça automaticamente. Uma API de compressão de imagens processa arquivos programaticamente. Sem etapas manuais.

Opção 4: Use um CDN com otimização automática. Serviços como Cloudflare, Imgix e Cloudinary podem comprimir e redimensionar imagens na hora. Você faz upload do original e o CDN serve versões otimizadas com base no dispositivo e navegador do visitante.

Para a maioria dos sites focados em conteúdo, a Opção 1 resolve. Faça upload das imagens, comprima e pronto. Para sites maiores com atualizações frequentes, as Opções 2-4 economizam tempo automatizando o processo.

O comparativo de TinyPNG, Squoosh e CompressIMG detalha qual ferramenta se encaixa em qual workflow. Algumas lidam com processamento em lote. Algumas te dão controle fino sobre as configurações. Escolha a que combina com sua forma de trabalhar.

Qual tamanho de arquivo mirar para cada tipo de imagem?

Boas metas ajudam a saber quando uma imagem está "pronta". Aqui estão referências realistas:

Imagens hero e banners de largura total: Abaixo de 200 KB. São as maiores imagens da página e geralmente o elemento LCP. Mantê-las abaixo de 200 KB ajuda suas pontuações de Core Web Vitals.

Imagens de posts de blog: Abaixo de 100 KB. Imagens de conteúdo dentro de colunas de texto não precisam ser enormes. 800-1200px de largura a 80% de qualidade atinge essa meta facilmente.

Miniaturas de produtos: Abaixo de 50 KB. Imagens pequenas exibidas em grades ou carrosséis. Redimensione para o tamanho de exibição (geralmente 300-400px) e comprima a 70-80%.

Ícones e logos: Abaixo de 20 KB. Gráficos simples com poucas cores. Use SVG quando possível. Senão PNG ou WebP sem perda.

Peso total de imagens da página: Abaixo de 500 KB para o viewport inicial. Imagens com lazy load abaixo da dobra não contam para o carregamento inicial, mas afetam o total de dados transferidos.

O Google PageSpeed Insights aponta imagens que poderiam ser mais otimizadas. Após comprimir, rode o teste para ver se alguma imagem ainda precisa de trabalho. A sugestão "Servir imagens em formatos de nova geração" significa que você deveria trocar de JPEG ou PNG para WebP ou AVIF.

Comprimir imagens reduz a qualidade?

Essa é a preocupação mais comum. E a resposta honesta: sim, tecnicamente. Mas não, não visualmente.

A compressão com perda remove dados. É assim que ela reduz os arquivos. Mas os algoritmos modernos são inteligentes sobre o que removem. Eles descartam detalhes que seus olhos não veem. Variações minúsculas de cor. Padrões sub-pixel. Dados que importam para computadores, mas não para humanos.

A 80% de qualidade, um JPEG ou WebP comprimido é visualmente idêntico ao original na tela. Você precisaria dar zoom a 400% e comparar pixel por pixel para notar diferenças. Nenhum visitante vai perceber.

A qualidade na qual artefatos ficam visíveis depende do conteúdo da imagem. Fotos com degradês suaves toleram mais compressão do que imagens com bordas nítidas e texto. Por isso a qualidade recomendada varia por tipo de imagem.

A regra chave: sempre parta da fonte de maior qualidade. Não recomprima um JPEG já comprimido. Cada ciclo de compressão com perda degrada a qualidade um pouco mais. Se você comprimir apenas uma vez a partir do original, a qualidade permanece excelente.

Use uma ferramenta com preview lado a lado para verificar os resultados antes de baixar. O CompressIMG mostra a imagem original e a comprimida com um controle deslizante que você pode arrastar. Se você vê diferença, aumente a qualidade. Se não vê, está pronto.

Pronto para acelerar seu site?

A compressão de imagens é o caminho mais rápido para tornar seu site mais veloz. Leva minutos, não custa nada e as melhorias são mensuráveis.

Comece pelas suas maiores imagens. Seus banners hero, fotos de produtos e imagens de blog. Redimensione para o tamanho de exibição. Comprima a 75-85% de qualidade. Converta para WebP se puder.

CompressIMG faz tudo isso no seu navegador. Faça upload de até 20 imagens, defina sua qualidade e baixe arquivos otimizados. Sem necessidade de conta.

Um site mais rápido significa visitantes mais felizes, melhor ranqueamento e mais conversões. Suas imagens são a solução mais rápida.