Comprimir Imagens Online — JPEG, PNG e WebP

O Que É Compressão de Imagens?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Recursos Principais

JPEG vs PNG vs WebP

Exemplos de Compressão

foto-paisagem.jpg (2,1 MB, 4000×3000)

foto-paisagem.jpg (680 KB na qualidade 75)

logo-transparente.png (450 KB, 1200×800)

logo-transparente.webp (85 KB na qualidade 80)

banner-hero.webp (800 KB, 1920×1080)

banner-hero.webp (250 KB na qualidade 75)

Como Comprimir Imagens Online

1. 1

   Envie Suas Imagens

   Arraste e solte imagens na área de upload ou clique para procurar seus arquivos. Você pode selecionar até 20 imagens JPEG, PNG ou WebP de uma vez, cada uma com até 10MB.

2. 2

   Ajuste a Qualidade

   Use o controle deslizante de qualidade para definir o nível de compressão desejado (0–100). O padrão é 75, que oferece um bom equilíbrio. Observe os tamanhos de arquivo e taxas de compressão atualizarem em tempo real.

3. 3

   Baixe os Resultados

   Clique em Baixar em qualquer arquivo individual ou use Baixar Todos para salvar todas as imagens comprimidas. Use o botão Comparar para inspecionar visualmente a qualidade antes de baixar.

Casos de Uso

Otimização de Desempenho de Sites

Reduza o tamanho dos arquivos de imagem antes de enviar para seu site. Imagens menores carregam mais rápido, melhorando pontuações de Core Web Vitals (especialmente Largest Contentful Paint), reduzindo custos de largura de banda e melhorando rankings de SEO.

Redução de Tamanho de Anexos de E-mail

Comprima imagens antes de anexá-las a e-mails para ficar dentro dos limites de tamanho de anexo (tipicamente 10–25MB). Um lote de 20 fotos pode frequentemente ser comprimido de 50MB para menos de 10MB.

Preparação de Upload para Redes Sociais

Pré-comprima imagens antes de fazer upload para plataformas de redes sociais. Embora as plataformas recomprimam imagens automaticamente, começar com um arquivo otimamente comprimido dá mais controle sobre a qualidade final.

Otimização de Assets de Apps e Jogos

Comprima assets de UI, texturas e sprites para aplicativos móveis, jogos e progressive web apps. Assets menores significam downloads mais rápidos, menos uso de armazenamento e experiências de usuário mais suaves.

Otimização de Documentos e Apresentações

Reduza o tamanho de imagens incorporadas em PDFs, documentos Word e apresentações. Uma apresentação de 50MB com fotos em alta resolução pode frequentemente ser reduzida para 10MB sem perda perceptível de qualidade.

Detalhes Técnicos

Compressão via Canvas API

Esta ferramenta usa o método toBlob() da Canvas API do HTML5 para compressão. A imagem é desenhada em um elemento canvas invisível e depois recodificada com o parâmetro de qualidade especificado. Para JPEG e WebP, o parâmetro de qualidade (0.0–1.0) controla o nível de compressão com perda. Para PNG, a Canvas API ignora completamente o parâmetro de qualidade — a codificação PNG via Canvas é sempre sem perda.

Conversão de PNG para WebP

Como Canvas toBlob() ignora o parâmetro de qualidade para imagens PNG (a saída é sempre sem perda), esta ferramenta converte arquivos PNG para formato WebP quando o controle de qualidade está abaixo de 100. WebP suporta tanto compressão com perda (com controle de qualidade) quanto transparência, tornando-o a alternativa com perda ideal para PNG. Quando a qualidade está definida em 100, arquivos PNG são preservados em seu formato original.

Comportamento do Parâmetro de Qualidade

O controle deslizante de qualidade mapeia para o parâmetro de qualidade do Canvas toBlob(): 100 = 1.0 (maior qualidade, maior arquivo), 0 = 0.0 (menor qualidade, menor arquivo). Para JPEG, qualidade 75 (0.75) é geralmente o ponto ideal — abaixo de 50, artefatos se tornam perceptíveis. Para WebP, o mesmo valor de qualidade produz arquivos ligeiramente menores que JPEG com qualidade visual comparável.

Memória do Navegador e Limites

Cada imagem existe na memória tanto como o objeto File original quanto como o Blob comprimido, além de duas URLs de objeto para visualização. Com 20 imagens de 10MB cada, o uso de pico de memória pode alcançar aproximadamente 400MB. URLs de objeto são revogadas quando as imagens são limpas ou a página é descarregada para prevenir vazamentos de memória.

Boas Práticas

Comece na Qualidade 75 para JPEG/WebP

Qualidade 75 é o ponto de partida recomendado para a maioria dos casos de uso. Normalmente reduz o tamanho do arquivo em 60–80% com perda mínima de qualidade visível. Só aumente a qualidade acima de 85 para imagens onde a preservação de detalhes finos é crítica (ex.: imagens médicas, fotografia para impressão).

Use WebP Quando Possível

WebP produz arquivos 25–35% menores que JPEG com a mesma qualidade visual e suporta transparência como PNG. Todos os navegadores modernos suportam WebP desde 2024. Converta imagens JPEG e PNG para WebP para a melhor relação compressão-qualidade na web.

Mantenha os Arquivos Originais

Sempre mantenha suas imagens originais e não comprimidas como arquivos fonte. Compressão com perda é irreversível — recomprimir uma imagem já comprimida degrada a qualidade ainda mais sem redução significativa de tamanho (conhecido como perda de geração).

Verifique a Qualidade Antes de Baixar

Use o botão Comparar para inspecionar visualmente artefatos de compressão antes de baixar. Preste atenção especial a áreas com texto, bordas nítidas e gradientes sutis — é onde artefatos JPEG são mais visíveis.

Agrupe Imagens Similares

Imagens com características similares (mesmo tipo de assunto, resolução, profundidade de cor) comprimem melhor com a mesma configuração de qualidade. Agrupe suas fotos separadamente dos seus gráficos/logotipos para resultados ótimos.

Perguntas Frequentes