Como Comprimir Imagens para a Web Sem Perder Qualidade

Imagens grandes são a causa mais comum de páginas lentas. Uma foto de celular de 4 MB, exibida com 800 px de largura em um post de blog, entrega o mesmo resultado visual que uma versão otimizada de 60 KB — mas demora 60× mais para baixar em uma conexão móvel.

Este guia cobre como comprimir imagens de forma eficaz: escolher o formato certo, definir configurações de qualidade e automatizar a compressão para produção.

Compressão lossy vs lossless

Compressão lossy descarta dados de pixel que o olho humano dificilmente notaria — variações de cor em gradientes, ruído de alta frequência em áreas desfocadas. JPEG e WebP usam compressão lossy. Você controla a troca com um parâmetro de qualidade (0–100).

Compressão lossless reorganiza dados sem descartar nenhum deles. PNG usa compressão lossless. Você pode passar um PNG por um otimizador lossless como oxipng e obter um arquivo menor com zero perda de qualidade.

A maioria das imagens web se beneficia da compressão lossy. As exceções são logos, capturas de tela com texto e qualquer coisa onde a pixelização seria óbvia.

Escolhendo o formato certo

Regra padrão: Converta fotos e capturas de tela de UI para WebP. Mantenha imagens transparentes como PNG (ou WebP com alpha). Use SVG para qualquer arte vetorial.

Configurações de qualidade que funcionam

Para JPEG e WebP, qualidade 75–85 é o alvo padrão da web. Abaixo de 70, você começa a ver artefatos visíveis em fotos; acima de 85, você está salvando dados que não fazem diferença visual.

No navegador

Para imagens avulsas, cole ou arraste para o compressor de imagens, ajuste o controle deslizante de qualidade e baixe a versão comprimida. A ferramenta roda completamente no lado do cliente — a imagem nunca sai do seu dispositivo.

Linha de comando: sharp (Node.js)

sharp é a biblioteca de processamento de imagens Node.js mais rápida. Ela encapsula libvips.

npm install sharp

const sharp = require('sharp');

// Converter JPEG para WebP com qualidade 80
sharp('input.jpg')
    .webp({ quality: 80 })
    .toFile('output.webp')
    .then(info => console.log(info));

// Redimensionar e comprimir
sharp('hero.png')
    .resize(1200)          // redimensionar para 1200px de largura, manter proporção
    .webp({ quality: 82 })
    .toFile('hero.webp');

Processar em lote um diretório inteiro:

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './images/original';
const outputDir = './images/compressed';

fs.readdirSync(inputDir)
    .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
    .forEach(file => {
        sharp(path.join(inputDir, file))
            .webp({ quality: 80 })
            .toFile(path.join(outputDir, file.replace(/\.(jpg|jpeg|png)$/i, '.webp')));
    });

Linha de comando: ImageMagick

O ImageMagick está disponível na maioria dos sistemas Linux/macOS e suporta quase todos os formatos.

# Instalar
brew install imagemagick    # macOS
sudo apt install imagemagick # Ubuntu

# Compressão JPEG com qualidade 80
convert input.jpg -quality 80 output.jpg

# Converter para WebP
convert input.jpg -quality 80 output.webp

# Redimensionar para máx. 1200px de largura, depois comprimir
convert input.jpg -resize 1200x -quality 80 output.webp

# Converter em lote todos os JPEGs de uma pasta para WebP
for f in *.jpg; do convert "$f" -quality 80 "${f%.jpg}.webp"; done

Linha de comando: cwebp (codificador WebP do Google)

# Instalar
brew install webp          # macOS
sudo apt install webp      # Ubuntu

# Converter com qualidade 80
cwebp -q 80 input.jpg -o output.webp

# Verificar o resultado
webpinfo output.webp

Python: Pillow

from PIL import Image

# Abrir e comprimir como JPEG
with Image.open('input.png') as img:
    img.convert('RGB').save('output.jpg', 'JPEG', quality=80, optimize=True)

# Abrir e comprimir como WebP
with Image.open('input.jpg') as img:
    img.save('output.webp', 'WebP', quality=80)

Compressão em lote com progresso:

from PIL import Image
from pathlib import Path

input_dir = Path('images/original')
output_dir = Path('images/compressed')
output_dir.mkdir(exist_ok=True)

for img_path in input_dir.glob('*.{jpg,jpeg,png}'):
    with Image.open(img_path) as img:
        out_path = output_dir / img_path.stem
        img.save(f'{out_path}.webp', 'WebP', quality=80)
        print(f'{img_path.name}: {img_path.stat().st_size // 1024}KB → {(out_path.with_suffix(".webp")).stat().st_size // 1024}KB')

Imagens responsivas — não apenas comprima, redimensione também

Comprimir uma imagem de 3000 px de largura para qualidade 80 ainda dá um arquivo grande. A abordagem certa para a web é servir tamanhos diferentes com base no dispositivo.

<img
  srcset="
    hero-400.webp   400w,
    hero-800.webp   800w,
    hero-1200.webp 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="hero-1200.webp"
  alt="Imagem hero"
  loading="lazy"
/>

Gere os tamanhos com sharp:

const sharp = require('sharp');

const widths = [400, 800, 1200];
for (const w of widths) {
    sharp('hero.jpg')
        .resize(w)
        .webp({ quality: 80 })
        .toFile(`hero-${w}.webp`);
}

Quanto de compressão esperar

Resultados típicos ao converter fotos PNG/JPEG de 24 bits para WebP com qualidade 80:

Os ganhos são menores para JPEGs já comprimidos. Os maiores ganhos são para fotos PNG (codificadas lossless) convertidas para WebP lossy.

Pontos principais

• Converta fotos e capturas de tela para WebP — supera JPEG em 25–35% na mesma qualidade.
• Qualidade 75–85 é o alvo padrão da web para fotos.
• Para logos e imagens com transparência, use PNG ou WebP com alpha.
• Use sharp (Node.js) ou Pillow (Python) para processamento em lote.
• Sirva múltiplos tamanhos via srcset — não sirva uma imagem de 3000 px para uma tela móvel de 400 px.