laboratório de compressão de imagens
o que qualidade, tamanho e formato fazem com um arquivo e com a imagem
Pergunta
O que qualidade, tamanho e formato mudam num arquivo de imagem, e quanto custam à imagem? Recodifique uma imagem no navegador, leia as contagens reais de bytes, deslize entre antes e depois, veja a diferença e varra as qualidades. É uma bancada didática, não um compressor; a imagem nunca sai do seu navegador.
Bancada
O arquivo é lido por esta aba e nunca é enviado. JPEG, PNG, WebP, GIF ou BMP de até 20 MB e 36 megapixels, desde que o navegador consiga decodificá-los.
O PNG não tem ajuste de qualidade: mantém todos os pixels, então só o tamanho muda o resultado.
O JPEG não tem transparência: as áreas transparentes são desenhadas sobre branco.
Escolha uma imagem, ou use a imagem de exemplo, e depois mude os ajustes.
| Resultado | original | saída |
|---|---|---|
| Tamanho do arquivo (medido) | — | — |
| Dimensões (medido) | — | — |
| Em relação ao original (medido) | — | — |
| Tamanho sem compressão por byte codificado (teórico) | — | — |
| Pixels sem compressão (teórico) | — | — |
A visão de diferença mostra o quanto cada pixel mudou, amplificado 8 vezes. Preto significa idêntico. A comparação é feita no tamanho da saída.
Cada linha é uma codificação real neste navegador. Em fotos a curva é íngreme no topo: os últimos pontos de qualidade custam mais bytes.
O que observar
- com e sem perdas
- JPEG e WebP (aqui) descartam o detalhe que o olho menos percebe, e a qualidade define quanto. O PNG mantém cada pixel exatamente, então só diminui ao achar padrões, o que funciona bem em gráficos chapados e mal em fotos.
- recodificação
- Todo salvamento com perdas parte de pixels já decodificados e joga fora mais coisa. Salvar um JPEG como JPEG de novo não sai de graça, e os artefatos do primeiro salvamento agora fazem parte da imagem.
- redimensionar
- Menos pixels em geral diminuem o arquivo em qualquer formato, e a perda é desfoque, não blocos. Só redimensionar e qualidade são dois ajustes diferentes; compare as predefinições “prévia pequena” e “só redimensionar”.
- artefatos
- Em qualidade baixa procure blocos nas bordas, halos ao redor do disco e do quadrado nítidos, listras finas borradas e faixas no degradê suave. A visão de diferença os deixa visíveis.
- medido, não prometido
- As contagens de bytes vêm do arquivo que o codificador deste navegador produziu. Elas mudam entre navegadores e versões, então os mesmos ajustes podem dar tamanhos diferentes em outro lugar. Nenhum tamanho-alvo pode ser garantido a partir de um ajuste de qualidade; esta página nem tenta.
Limites
- Este é um experimento didático, não uma ferramenta de compressão. Ele não tenta atingir um tamanho e não gera download.
- Usa os codificadores do próprio navegador (canvas). O motor do Mochifile usa codecs próprios para que os resultados sejam iguais entre navegadores; os números daqui não vão coincidir com os dele.
- A codificação em WebP falta em alguns navegadores; a página detecta isso e avisa em vez de mostrar um PNG como se fosse WebP. GIF e BMP podem ser lidos, mas não são oferecidos como saída.
- O tamanho em pixels é lido do cabeçalho do arquivo, e o que passa de 36 megapixels (ou tem cabeçalho ilegível nos primeiros 256 KiB) é recusado antes de decodificar. O AVIF não é aceito porque o tamanho dele não pode ser verificado assim. GIFs animados usam o primeiro quadro. A orientação EXIF é aplicada; os outros metadados e os perfis de cor não são mantidos.
- Alguns navegadores (principalmente o Safari) limitam o tamanho do canvas, então uma imagem muito grande pode falhar ao codificar no tamanho total, e navegadores que protegem contra rastreamento acrescentam ruído à leitura do canvas, o que apareceria na visão de diferença. O zoom amplia apenas o centro.
- Tudo fica nesta aba: sem envio, sem armazenamento, sem download. As prévias são desenhadas em canvas, e a imagem decodificada é liberada quando você escolhe outra ou sai da página.
Fidelidade
Inspirado no problema que o Mochifile resolve, não na interface nem no motor dele: o Mochifile usa codecs próprios para que os resultados sejam iguais entre navegadores, enquanto esta página usa os codificadores do seu navegador, então os números mudam. A revisão f674bf1 é o estado do Mochifile lido para as notas do motor de imagens. As contagens de bytes são medidas; os tamanhos de pixels são rotulados como teóricos.