Compressão de imagem para a web: quanto você realmente economiza?

Os Core Web Vitals do seu site estão vermelhos, seu Lighthouse score não passa de 60 e a ferramenta de auditoria fica gritando sobre “dimensione corretamente as imagens” e “use formatos de imagem modernos”. Você comprime o pior offender, o peso da página cai 1,2 MB e de repente o LCP vai de 3,4 s para 1,8 s. Compressão de imagem segue sendo uma das vitórias de performance de maior ROI para qualquer site — mas só se você entende o que cada alavanca de fato faz.

Este guia mede, em bytes reais economizados em imagens reais, o que JPG qualidade 80, WebP, AVIF e resize agressivo cada um te dão. Também vamos cobrir quando re-encodar para um formato “moderno” custa mais do que economiza, e como fazer tudo isso no navegador com a ferramenta Image Compress do Ai2Done.

TL;DR

• Redimensione antes de comprimir — uma foto 4000×3000 exibida em 800×600 desperdiça ~95 % dos bytes independente do formato. Resize primeiro; compressão depois.
• JPG qualidade 80 → 90 é o sweet spot para fotos — 50-70 % menor que qualidade 100, visualmente idêntico.
• WebP economiza ~25-35 % sobre JPG na mesma qualidade visual. Suporte universal de navegador desde 2020.
• AVIF economiza ~50 % sobre JPG na mesma qualidade visual mas adiciona 5-10× tempo de encoding. Vale a pena para páginas de alto tráfego.
• Use o Ai2Done Image Compress para compressão no navegador com preview lado a lado de tamanho vs. qualidade.

Por que isso é mais difícil do que parece

Você pensaria que “comprimir esta imagem” é uma única decisão. Na prática, compressão de imagem são ao menos 4 alavancas independentes que interagem de jeitos não intuitivos:

1. Dimensões (largura × altura) — geralmente a alavanca de maior impacto. Uma foto 4000×3000 tem 16× mais pixels que 1000×750.
2. Formato (JPG, WebP, AVIF, PNG) — o próprio método de encoding.
3. Configuração de qualidade (1-100 para JPG/WebP, ligeiramente diferente para AVIF) — quão agressivamente o encoder descarta informação.
4. Profundidade de cor e metadata (24-bit vs. 8-bit, stripping EXIF, perfil ICC) — geralmente uma vitória pequena mas grátis.

Uma ferramenta de “comprime esta imagem” ingênua só toca a alavanca 3, deixando as maiores economias na mesa. Ferramentas modernas — incluindo a nossa — pelo menos te deixam escolher todas as quatro explicitamente.

A outra fonte de complicação: suporte de navegador e seu público. AVIF é incrível no Chrome, Edge, Firefox e Safari 16+; Safari antigo precisa de fallback JPG. WebP está em todo lugar exceto IE 11 (que a Microsoft deixou de suportar em 2022 mas sites enterprise ainda veem). Para a maioria dos sites públicos em 2026, WebP é seguro; AVIF precisa de um elemento <picture> com fallback JPG.

Medições do mundo real: uma foto de 3 MB, comprimida de todo jeito

Peguei uma imagem de teste representativa — uma foto 4032×3024 de iPhone de uma skyline urbana, 3,1 MB JPG na qualidade default da câmera (~92). Aqui está o que cada alavanca faz isoladamente:

A manchete: a combinação de resize + formato moderno te dá uma redução de 90-95 % sem perda visível de qualidade. Qualquer alavanca sozinha te leva a 30-45 %. É por isso que sua auditoria Lighthouse fica martelando em ambos “dimensione corretamente” E “use formatos de imagem modernos” — eles multiplicam.

Método 1: Ai2Done Image Compress (no navegador, multi-alavanca)

A ferramenta Image Compress do Ai2Done roda todas as quatro alavancas no seu navegador:

1. Abra /tools/image_compress em qualquer navegador moderno.
2. Solte sua(s) imagem(ns) — JPG, PNG, WebP, AVIF, HEIC aceitos. Upload em lote funciona para até dezenas de arquivos de uma vez.
3. Escolha formato de saída: JPG (universal), WebP (moderno, 25 % menor), AVIF (moderno, 50 % menor, encode mais lento) ou PNG (sem perdas, só para diagramas e screenshots).
4. Defina qualidade: 80 é o sweet spot universal para fotos. Reduza para 70 para thumbnails; suba para 90 para imagens hero.
5. Resize opcional: defina largura máxima ou borda longa máxima. A proporção é preservada automaticamente.
6. Clique em Comprimir — para jobs em lote, ganhe um ZIP de todas as imagens otimizadas.

O painel lateral mostra preview lado a lado de original vs. comprimido nas suas configurações atuais, com o tamanho tanto em bytes quanto em delta visual (PSNR, SSIM — métricas perceptuais de qualidade). Ajuste o slider de qualidade ao vivo e veja o trade-off em tempo real antes de confirmar.

Tudo roda no seu navegador. Suas fotos nunca sobem para um servidor, incluindo o nosso. O encoder é mozjpeg-wasm para JPG, libwebp-wasm para WebP e libavif-wasm para AVIF — todas as implementações de referência reais, compiladas com aceleração SIMD WASM.

Método 2: Squoosh.app (ferramenta open-source do Google)

Para uma única imagem com controle muito preciso, o Squoosh.app do Google é a ferramenta mais amada na comunidade front-end. Mesma arquitetura (tudo no navegador), UX uma-imagem-por-vez, com botões extremamente granulares para cada encoder. É mais lento para lote (sem processamento paralelo) e a UX assume que você sabe o que o subsampling de chroma do mozjpeg faz — mas para o raro “preciso afinar perfeccionistamente uma imagem hero”, é imbatível.

Método 3: imagemin no seu pipeline de build

Para otimização automatizada como parte do build do seu site:

npm install --save-dev imagemin imagemin-mozjpeg imagemin-webp imagemin-avif

# no seu script de build
import imagemin from 'imagemin';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminWebp from 'imagemin-webp';

await imagemin(['src/images/*.{jpg,png}'], {
  destination: 'build/images',
  plugins: [
    imageminMozjpeg({ quality: 80 }),
    imageminWebp({ quality: 80 }),
  ]
});

Esta é a resposta certa para sites sérios que atualizam imagens frequentemente — a otimização roda a cada build, sem passo manual. Para lotes avulsos de imagem ou “adicionei uma imagem hero no meu site”, a ferramenta de navegador é mais rápida.

Método 4: otimização de imagem incorporada Next.js / Astro / framework

Frameworks modernos entregam otimização de imagem incorporada que lida com todo o pipeline “resize + sirva formato moderno com fallback”:

• Next.js: o componente <Image> auto-gera srcset, serve WebP/AVIF com fallback JPG e faz lazy-load.
• Astro: o componente <Image> faz o mesmo.
• Gatsby: gatsby-plugin-image faz o mesmo.
• Cloudflare Images: sirva qualquer imagem fonte por uma URL de transform — ?width=800&format=auto e ganhe o tamanho certo no formato certo para cada visitante.

Se você está construindo um site novo, use o handler incorporado do framework. Para um site estático ou legado, compressão de navegador/CLI é o caminho.

Como construímos o compressor do navegador (deep-dive técnico)

A ferramenta Image Compress do Ai2Done é construída sobre três módulos encoder WebAssembly:

• mozjpeg-wasm (encoder JPEG da Mozilla, ~10 % melhor que libjpeg-turbo na mesma qualidade)
• libwebp-wasm (implementação WebP de referência do Google)
• libavif-wasm (encoder do formato de imagem AV1, ~5-10× mais lento que JPG mas produz os menores arquivos)

Para decoding (lado de entrada), usamos Image e createImageBitmap incorporados no navegador para JPG, PNG, GIF, WebP, BMP e ICO — sem dependências extras. HEIC passa por libheif-wasm (~5 MB de bundle extra, lazy-loaded só quando um upload HEIC é detectado).

A escolha de design interessante: preview ao vivo lado a lado. Conforme você arrasta o slider de qualidade, ambos os painéis atualizam a ~60fps (imagens pequenas) ou ~10fps (imagens grandes), usando um OffscreenCanvas e um re-encode debounced num Web Worker para a UI nunca travar. Isso é o que te deixa achar o sweet spot em segundos em vez de chutar-e-conferir.

Para jobs em lote, usamos um pool de Web Worker dimensionado para navigator.hardwareConcurrency - 1 para 8 imagens encodarem em paralelo numa máquina de 8 cores. Encoding AVIF é o gargalo — limitamos paralelismo em 2 para AVIF para evitar OOMing em dispositivos de baixo end.

FAQ

Q: Devo sempre usar AVIF para tudo? A: Nem sempre. AVIF dá arquivos ~50 % menores na mesma qualidade visual, mas o encoding leva 5-10× mais que JPG. Para páginas estáticas de alto tráfego, o custo de encoding é uma vez e a economia de banda é para sempre — vale a pena. Para imagens geradas dinamicamente (conteúdo por usuário, previews em tempo real), o custo de encoding importa mais, e WebP é a melhor troca.

Q: WebP / AVIF vai funcionar em todos os navegadores? A: WebP funciona em todo navegador entregue desde 2020 — Chrome, Edge, Firefox, Safari 14+, Opera. AVIF funciona em Chrome, Edge, Firefox e Safari 16+. Para visitantes em Safari <16 (~3 % do tráfego em 2026), sirva um fallback JPG via <picture><source srcset="hero.avif" type="image/avif"><img src="hero.jpg"></picture>.

Q: Comprimir tira EXIF / GPS / dados de câmera? A: Por padrão, nossa ferramenta tira toda a metadata (arquivos menores, sem vazamento de GPS). Ative “Preservar EXIF” se quiser manter configurações de câmera ou tags de orientação. Para imagens que você vai compartilhar publicamente, default-tirar é a escolha certa — metadata GPS em fotos compartilhadas socialmente já causou incidentes reais de privacidade.

Q: Qual a diferença entre JPG qualidade 80 e JPG qualidade 90? A: A qualidade 90, o arquivo é ~50 % maior que a qualidade 80 para saída visualmente idêntica na maioria das fotos. Qualidade 80 é o sweet spot universal “você não consegue ver a diferença a menos que dê zoom 4×”. Use 90+ só para imagens que serão re-editadas downstream (cada passada de edição adiciona perda de qualidade; começar de qualidade 90 dá mais headroom).

Q: Comprimir uma foto para JPG qualidade 80 vai prejudicar meu SEO? A: O oposto — cargas de página mais rápidas melhoram SEO. Core Web Vitals do Google (especialmente LCP) entram no ranking. Peso de imagem geralmente é a causa nº 1 de LCP lento. Uma imagem hero 50 % menor frequentemente significa meio segundo a mais de LCP, que o Google recompensa.

Q: Tenho 1000 fotos de produto para um site de e-commerce. Posso processar todas em lote? A: Sim, mas quebre em lotes de 50-100 para evitar pressão de memória do navegador. Solte 100 imagens, ganhe um ZIP, repita. Para um pipeline automatizado, configure imagemin no seu build (veja Método 3).

Experimente agora

Comprima imagens para a web em segundos, com preview lado a lado:

Abra a ferramenta Image Compress →

Solte imagens, escolha formato, arraste o slider de qualidade, assista os bytes caírem. Sem upload, sem signup.

Leituras relacionadas

• Conversão HEIC para JPG: o jeito certo em cada dispositivo — para fotos de iPhone que precisam de conversão de formato antes da compressão
• Amplie imagens 4× com IA do lado do navegador (sem signup) — quando você precisa de mais pixels, não menos
• Image OCR: extraia texto de qualquer foto em 100+ idiomas
• Navegue por todas as ferramentas de imagem no site principal

Última atualização 2026-06-14. A ferramenta Image Compress roda 100 % no seu navegador — suas fotos nunca deixam seu dispositivo. Nunca coletamos, logamos ou analisamos os arquivos que você processa.