Como comprimir imagens para o site sem perder qualidade

As imagens costumam ser a parte mais pesada de uma página web. Uma única foto sem otimização, direto do celular ou da câmera, pode pesar vários megabytes, mais do que todo o HTML, CSS e JavaScript da página juntos. Comprimir imagens é uma das formas mais fáceis de deixar um site mais rápido, e isso não precisa deixá-las com pior aparência. Este guia explica como funciona a compressão de imagens, quais formatos escolher, que configurações de qualidade usar e um fluxo simples que você pode repetir em cada página.

Por que o tamanho das imagens importa

• Velocidade. Imagens pesadas demoram mais para baixar, principalmente em conexões móveis. Os visitantes percebem, e páginas lentas perdem leitores e clientes.
• Core Web Vitals. Em muitas páginas, o maior elemento visível é uma imagem, geralmente uma foto de destaque. O Largest Contentful Paint (LCP) do Google mede a rapidez com que esse elemento aparece, e as Core Web Vitals fazem parte de como o Google avalia a experiência na página.
• Custos e limites. Imagens menores usam menos banda e armazenamento de hospedagem, e algumas plataformas limitam o tamanho dos uploads.
• Busca de imagens. Imagens rápidas e bem descritas são mais fáceis de rastrear pelos buscadores e de aparecer nos resultados de imagens.

Compressão com perda e sem perda

A compressão sem perda reduz o arquivo sem alterar um único pixel. Ela encontra formas mais eficientes de guardar os mesmos dados. A otimização de PNG é sem perda, então não há controle de qualidade para se preocupar, mas a economia costuma ser modesta.

A compressão com perda remove detalhes que o olho dificilmente nota, como variações sutis de cor e texturas finas, em troca de arquivos muito menores. JPEG, WebP e AVIF suportam compressão com perda, controlada por uma configuração de qualidade. Com valores sensatos, a maioria das pessoas não vê diferença no tamanho normal de visualização.

Como escolher o formato de imagem certo

JPEG (JPG)

O formato clássico para fotos. Funciona em todo lugar, comprime bem fotografias e não tem transparência. Continua sendo uma opção segura quando você precisa de máxima compatibilidade, por exemplo em e-mails.

PNG

Sem perda e com transparência. Ideal para capturas de tela, logotipos, ícones e gráficos com cores chapadas e bordas nítidas. Uma má escolha para fotos, que ficam enormes em PNG.

WebP

Um formato moderno criado pelo Google que suporta compressão com e sem perda, além de transparência. Normalmente gera arquivos bem menores que JPEG ou PNG com qualidade visual parecida, e todos os principais navegadores atuais o suportam. Uma ótima opção padrão para sites.

AVIF

Um formato mais recente baseado no codec de vídeo AV1. Muitas vezes comprime ainda melhor que o WebP, especialmente fotos, e é suportado pelas versões atuais dos principais navegadores. A codificação é mais lenta e alguns programas antigos não conseguem abri-lo, então mantenha uma alternativa se o seu público usa dispositivos antigos.

SVG

Não é um formato de foto, e sim gráficos vetoriais descritos como código. Perfeito para logotipos e ícones que precisam ficar nítidos em qualquer tamanho. Otimize SVGs removendo os metadados do editor.

Que configuração de qualidade usar?

Não existe um número perfeito, porque depende da imagem e do formato, mas estes pontos de partida funcionam bem:

• Fotos para a web: comece em torno de 75–85 de qualidade para JPEG ou WebP e compare.
• Imagens de destaque grandes: tente um pouco menos, em torno de 70–80, já que são grandes e vistas rapidamente.
• Fotos de produtos em que o detalhe importa: fique na faixa mais alta, 80–90.
• AVIF: usa outra escala. Números mais baixos ainda podem ficar bons, então compare visualmente.

O melhor teste são os seus próprios olhos: comprima, veja o resultado no tamanho em que realmente será exibido e reduza a qualidade até começar a notar a diferença, depois volte um passo.

Redimensione antes de comprimir

A compressão ajuda, mas o maior ganho costuma vir do redimensionamento. Uma foto de celular pode ter 4.000 pixels de largura, enquanto a coluna de conteúdo do seu blog tem 800. Servir a foto em tamanho original faz o navegador baixar muito mais pixels do que consegue mostrar.

• Redimensione para aproximadamente o maior tamanho em que a imagem será exibida, ou cerca do dobro para nitidez em telas de alta densidade (retina).
• Use os atributos HTML srcset e sizes, ou as imagens responsivas do seu CMS, para servir arquivos menores a telas menores.

Um fluxo simples para cada imagem

1. Escolha o formato certo: fotos em WebP ou JPEG (ou AVIF), gráficos e capturas de tela em PNG ou WebP, logotipos em SVG.
2. Redimensione para o tamanho de exibição.
3. Comprima com o otimizador de imagens. Envie arquivos JPG, PNG, WebP ou AVIF (você pode selecionar vários de uma vez), escolha um nível de qualidade e, se quiser, converta tudo para um único formato de saída. Compare os tamanhos original e novo e baixe os resultados individualmente ou em um ZIP.
4. Confira o resultado no tamanho real, no celular e no computador.
5. Dê um nome descritivo ao arquivo, como caneca-ceramica-azul.webp em vez de IMG_4821.webp. O gerador de slugs transforma qualquer descrição em um nome de arquivo limpo.
6. Escreva um texto alternativo que descreva a imagem para leitores de tela e buscadores.
7. Use carregamento lento nas imagens abaixo da dobra com loading="lazy", mas não na imagem principal de destaque, que deve carregar imediatamente.

Não esqueça dos metadados e da privacidade

Fotos de câmeras e celulares carregam metadados EXIF: modelo da câmera, configurações, data e às vezes coordenadas GPS. Isso acrescenta um pouco de peso e pode revelar onde a foto foi tirada. Confira o que a imagem contém com o leitor EXIF antes de publicar, especialmente fotos tiradas em casa. Muitos otimizadores e opções de exportação removem os metadados automaticamente.

Casos especiais

Ícones minúsculos

Imagens muito pequenas podem ser incorporadas diretamente no HTML ou CSS como data URIs em Base64 com a ferramenta imagem para Base64, economizando uma requisição de rede. Isso só compensa para arquivos de poucos kilobytes, já que o Base64 aumenta o tamanho em cerca de um terço.

Miniaturas do YouTube e imagens para redes sociais

Se você usa a miniatura de um vídeo em um post do blog, baixe-a com o baixador de miniaturas do YouTube e comprima-a como qualquer outra foto.

Capturas de tela

Capturas de tela com texto costumam ficar melhores em PNG ou WebP sem perda. Se forem muito grandes, um WebP com perda e alta qualidade geralmente funciona bem.

Como saber se suas imagens são um problema

• Teste sua página no PageSpeed Insights do Google ou no Lighthouse do Chrome DevTools. Procure sugestões como dimensionar corretamente as imagens, servir imagens em formatos modernos e codificar imagens de forma eficiente.
• No DevTools, abra a aba Network, filtre por imagens e ordene por tamanho para achar os arquivos mais pesados.
• Verifique se o seu servidor usa HTTP/2 ou HTTP/3 para que muitas imagens carreguem em paralelo com eficiência. O verificador de HTTP/2 informa isso.

Perguntas frequentes

Comprimir imagens reduz a qualidade?

A compressão sem perda não altera a imagem em nada. A compressão com perda remove detalhes, mas com configurações de qualidade moderadas a diferença geralmente é invisível no tamanho normal de visualização.

Qual é o melhor formato de imagem para sites?

Para a maioria das fotos, o WebP é uma excelente opção padrão, e o AVIF gera arquivos ainda menores. Use PNG para gráficos que precisam de qualidade sem perda e SVG para logotipos e ícones.

Qual deve ser o tamanho das imagens de um site?

Redimensione-as para mais ou menos o tamanho em que serão exibidas (ou até o dobro para telas de alta densidade) e depois comprima. Para a maioria das imagens de conteúdo, isso fica bem abaixo dos vários megabytes de um original de câmera.

A compressão de imagens ajuda no SEO?

Indiretamente. Páginas mais rápidas oferecem uma experiência melhor e podem melhorar Core Web Vitals como o LCP, que fazem parte dos sinais de experiência na página do Google.

Devo converter todas as minhas imagens para WebP?

Para sites, geralmente é uma boa ideia, já que os navegadores modernos o suportam. Guarde os originais e use JPEG ou PNG onde a compatibilidade importa, como em newsletters por e-mail.