Compressão de imagem

O olho humano como aliado

Uma foto Full HD tem 1920×1080 = 2.073.600 pixels, cada um com 3 bytes (RGB) = 6 MB. Um arquivo JPEG típico da mesma foto ocupa 300–500 KB — uma compressão de 10–20×. Como é possível sem que o resultado pareça completamente diferente?

O segredo é explorar as limitações do sistema visual humano. O olho é muito mais sensível a diferenças de brilho do que de cor. E mais sensível a variações lentas (baixas frequências espaciais) do que a detalhes finos (altas frequências). JPEG descarta justamente o que o olho menos percebe.

Quantização de cor

Reduza os bits por canal e veja os artefatos de "banding" aparecerem. JPEG faz algo similar mas no domínio de frequência (via DCT) em vez de no domínio de pixel.

O pipeline JPEG

// JPEG: pipeline de compressão simplificado

// 1. Converter RGB → YCbCr (separar luminância de crominância)
const Y  =  0.299*R + 0.587*G + 0.114*B;
const Cb = -0.169*R - 0.331*G + 0.500*B + 128;
const Cr =  0.500*R - 0.419*G - 0.081*B + 128;

// 2. Chroma subsampling 4:2:0
// Y (luminância): resolução completa → olho muito sensível ao brilho
// Cb, Cr: metade da resolução → olho menos sensível à cor
// Economia: de 3 bytes/px para 1.5 bytes/px (50% menor!)

// 3. Para cada bloco 8×8 de pixels:
//    a. Aplicar DCT (Transformada Discreta de Cosseno)
//    b. Dividir coeficientes pela tabela de quantização (qualidade)
//    c. Arredondar para inteiro (PERDA de informação!)
//    d. Codificar com Huffman (sem perdas)

// Coeficiente DC (0,0) = média do bloco — preservado com mais precisão
// Coeficientes AC (altas frequências, canto inferior direito) — mais quantizados

// 4. Reconstrução (decodificação)
// coef_real = coef_quantizado × tabela_quantizacao
// IDCT → blocos de pixels → juntar blocos → YCbCr → RGB

PNG: compressão sem perdas

// PNG: compressão sem perdas (lossless)

// 1. Filtros de predição (reduzem entropia antes de comprimir)
// Para cada linha de pixels, escolhe o melhor filtro:
//   None:  pixel atual sem modificação
//   Sub:   pixel - pixel_esquerda
//   Up:    pixel - pixel_acima
//   Avg:   pixel - média(esq, cima)
//   Paeth: pixel - preditor de Paeth (escolhe o melhor dos 3)

// Para uma imagem com gradiente suave, Sub ou Up geram
// muitos zeros — fáceis de comprimir!

// 2. DEFLATE (compressão)
//    = LZ77 (dicionário de sequências repetidas)
//    + Huffman (codificação dos símbolos)

// PNG não perde informação — decodificado = original exato
// JPEG perde — decodificado tem artefatos de bloco (blocking)
// Use PNG para: logos, screenshots, arte pixel, ícones
// Use JPEG para: fotos onde artefatos são imperceptíveis

Manipulação de imagem com Canvas

Mini projeto: aplique um filtro de desfoque (blur) em uma imagem no Canvas: para cada pixel, calcule a média dos N×N pixels ao redor. Teste com N=3, 5, 7. Observe como aumentar N suaviza a imagem progressivamente.

Projeto principal: implemente detecção de bordas com o operador Sobel: calcule o gradiente horizontal (Gx) e vertical (Gy) usando convolução 3×3, e marque como borda os pixels onde sqrt(Gx² + Gy²) > threshold. O resultado deve mostrar as bordas da imagem em branco sobre fundo preto.

Desafio extra: implemente uma versão simplificada de compressão DCT para blocos 4×4 (em vez de 8×8): aplique DCT 2D, zere os coeficientes de alta frequência (canto inferior direito), aplique IDCT e compare com o original. Quantifique o erro com PSNR.

Teste sua intuição

Onde você encontra isso