Como comprimir imagens para a web sem perder qualidade

Imagens costumam ser a coisa mais pesada de uma página web. Uma única foto sem otimização, recém-saída da câmera do celular, pode pesar vários megabytes — mais do que todo o texto, o código e o estilo de um site juntos. Comprimir imagens é a mudança de maior impacto que a maioria pode fazer pela velocidade da página, e, bem feita, é invisível para os visitantes. Este guia cobre como a compressão de imagem funciona e como reduzir arquivos sem uma queda perceptível de qualidade.

Por que o tamanho da imagem importa

Cada kilobyte a mais são dados que o navegador de um visitante precisa baixar antes de poder exibir sua página. Numa conexão de desktop rápida talvez não se note, mas em redes móveis isso aumenta diretamente o tempo de carregamento, frustra usuários e prejudica o ranking — o Google usa sinais de experiência de página como a velocidade de carregamento como fator de ranqueamento. Imagens menores significam páginas mais rápidas, contas de banda mais baixas e visitantes mais satisfeitos.

Compressão com perda vs. sem perda

Há duas maneiras fundamentalmente diferentes de deixar um arquivo de imagem menor.

Compressão sem perda

Métodos sem perda empacotam os dados de forma mais eficiente sem descartar nada — descomprimir devolve uma cópia idêntica pixel a pixel do original. É seguro, mas a economia é modesta, tipicamente 10–50%. O PNG usa compressão sem perda, e por isso é ótimo para logos, capturas de tela e gráficos com bordas nítidas e cores chapadas.

Compressão com perda

Métodos com perda descartam informações que o olho humano dificilmente notará — variações sutis de cor, detalhes finos em áreas ocupadas — para obter economias bem maiores, muitas vezes de 70–90%. JPEG e WebP usam compressão com perda. O equilíbrio é controlado por um ajuste de qualidade: qualidade menor significa arquivo menor, mas mais artefatos visíveis. Para fotografias, a compressão com perda num nível de qualidade sensato é quase sempre a escolha certa.

Escolher o formato certo

O formato que você escolhe importa tanto quanto o nível de compressão:

• JPEG — o cavalo de batalha das fotografias. Amplamente suportado em toda parte. Boa compressão, mas sem transparência.
• PNG — melhor para gráficos com linhas nítidas, texto ou transparência (logos, ícones, capturas). Sem perda, então fotos saem grandes.
• WebP — um formato moderno que costuma gerar arquivos 25–35% menores que o JPEG com a mesma qualidade visual, e suporta transparência como o PNG. Suportado por todos os navegadores atuais. Para a maioria das imagens web hoje, o WebP é o melhor padrão.
• SVG — não é de forma alguma um formato de foto comprimida, mas para logos e ícones simples um SVG vetorial permanece afiadíssimo em qualquer tamanho e muitas vezes tem só alguns kilobytes.

Quanta qualidade você pode sacrificar?

Para formatos com perda, a qualidade costuma ser expressa numa escala de 0 a 100. Contraintuitivamente, o topo dessa faixa é desperdício: a diferença entre qualidade 100 e qualidade 80 muitas vezes é impossível de ver, e, ainda assim, a qualidade 80 pode ter metade do tamanho de arquivo. Um ponto de partida prático:

• Qualidade 75–85 — o ponto ideal para a maioria das fotos web. Grande economia, sem perda visível na visualização típica.
• Qualidade 60–75 — ok para imagens de fundo grandes ou miniaturas onde a nitidez absoluta não é crítica.
• Abaixo de 60 — a economia se estabiliza enquanto os artefatos (céus em blocos, halos nas bordas) ficam perceptíveis. Geralmente não vale a pena.

A melhor abordagem é comparar, não adivinhar. Comprima a uma dada qualidade, veja o resultado no tamanho em que ele será realmente exibido, e reduza a qualidade em degraus até começar a ver uma diferença — depois suba um degrau.

Redimensione antes de comprimir

A compressão só faz tanto se a imagem for muito maior do que precisa. Uma foto de 4000 pixels de largura exibida numa coluna de 800 pixels carrega cinco vezes mais pixels do que qualquer um verá. Redimensionar a imagem para aproximadamente as dimensões em que é mostrada — e depois comprimir — costuma ser, de todas, a maior economia. Nosso redimensionador de imagens faz corte, rotação e redimensionamento numa passada só, inteiramente no seu navegador.

Um fluxo de trabalho simples

1. Redimensione a imagem para o maior tamanho em que será exibida.
2. Escolha WebP se puder, JPEG para máxima compatibilidade, PNG para gráficos com transparência.
3. Comprima a qualidade ~80 e veja o resultado no tamanho de exibição.
4. Reduza a qualidade até notar uma diferença, depois suba um passo.

Os últimos três passos você faz em segundos com nosso compressor de imagens: solte uma ou várias imagens e elas são comprimidas na hora no seu próprio dispositivo — nada é enviado a um servidor, então é seguro para fotos privadas. Compare os tamanhos antes e depois e baixe quando estiver satisfeito com o resultado.