O tamanho de uma imagem explicado: pixels, DPI, peso e qualidade

Atualizado:

“Deixar a imagem menor” pode significar três coisas: menos pixels, um tamanho impresso menor ou menos bytes no arquivo. Elas estão ligadas, mas mudar uma nem sempre muda as outras. É por isso que uma imagem pode parecer nítida no celular e borrada no papel, ou pesar 5 MB sem ficar melhor que uma cópia de 300 KB.

Este guia separa as três, explica o que os ajustes de DPI e de qualidade fazem de verdade e apoia as dicas em medições: codificamos a mesma foto de 1280 × 854 pixels de uma rua à beira de um rio em vários tamanhos e qualidades no Chrome, o motor que o redimensionador do nTools usa, e comparamos os resultados com o original.

Três tamanhos fáceis de confundir

A maior parte dos problemas vem de mudar um esperando que outro acompanhe: aumentar o DPI para a impressão sair mais nítida, ou baixar a qualidade para consertar uma foto que simplesmente tem pixels demais.

Pixels e megapixels

Um megapixel é um milhão de pixels. Uma foto de celular típica de 12 megapixels mede 4032 × 3024 pixels, ou seja, 12.192.768 pixels.

O arquivo fica comprimido no disco, mas para mostrar ou editar a imagem um programa precisa decodificá-la em todos os pixels. Com quatro bytes por pixel (vermelho, verde, azul e transparência), essa foto de 12 megapixels ocupa cerca de 49 MB de memória, não importa o peso do arquivo. É por isso que um celular pode travar com dezenas de fotos grandes ao mesmo tempo, e que uma página cheia de imagens grandes demais continua pesada mesmo depois de baixadas.

Nossa foto de teste de 1280 × 854 mostra a distância entre pixels e peso. Sem compressão, a três bytes por pixel, ela tem 3,3 MB. Em PNG, que não perde nada, 2,3 MB. Em JPEG com qualidade 82, 323 KB: cerca de um sétimo do PNG, e no tamanho normal parece igual.

DPI só importa no papel

Um arquivo JPEG pode guardar um valor de densidade: o padrão JFIF tem um campo em pontos por polegada ou por centímetro, e os metadados das câmeras têm outro parecido. Muitas fotos indicam ali 72 ou 300. Esse número não muda nenhum pixel, nem o peso do arquivo, nem a aparência na tela. Telas mostram pixels, não polegadas.

Mudar de 72 para 300 DPI sem reamostrar só reescreve esse campo. Se um formulário pede “300 DPI”, o que ele costuma precisar é de pixels suficientes para o tamanho impresso. A conta é simples: largura impressa = pixels ÷ pixels por polegada, e uma polegada tem 2,54 cm.

Tamanho impressoA 150 pixels por polegadaA 300 pixels por polegada
Foto 10 × 15 cm591 × 886 px1181 × 1772 px
A4, 21 × 29,7 cm1240 × 1754 px2480 × 3508 px
Foto de 12 MP (4032 × 3024 px)68 × 51 cm34 × 26 cm

Quem diz a densidade desejada é o serviço de impressão; com esse número, a tabela mostra se a foto tem pixels suficientes. Acrescentar pixels no computador não ajuda, como mostra a parte sobre ampliar.

Telas: pixels CSS e telas nítidas

As páginas web são diagramadas em pixels CSS, uma unidade definida como 1/96 de polegada. Nas telas antigas, um pixel CSS era um ponto da tela. Celulares e muitos notebooks hoje usam dois ou três pontos para cada pixel CSS; os navegadores chamam isso de razão de pixels do dispositivo (device pixel ratio).

Assim, uma imagem exibida com 600 pixels CSS de largura precisa de uns 1200 pixels para ficar nítida num celular com razão 2. Com só 600 ela é esticada e fica mole; com 4000, o visitante baixa pixels que nunca vai ver. Os sites podem oferecer vários tamanhos com o atributo srcset e deixar cada navegador escolher o adequado à sua tela.

Redimensionar: diminuir é seguro, ampliar não acrescenta nada

Reduzir largura e altura pela metade deixa um quarto dos pixels, e o arquivo cai mais ou menos no mesmo ritmo. No nosso teste, tudo em JPEG com qualidade 82:

DimensõesParcela dos pixelsPeso JPEGPeso WebP
1280 × 854100%323 KB288 KB
960 × 64156%180 KB159 KB
640 × 42725%89 KB80 KB
320 × 2146%23 KB21 KB

No sentido contrário, o detalhe não volta. Reduzimos a foto para 320 pixels de largura e ampliamos de novo para 1280: o resultado marcou 0,59 no SSIM, uma medida de quanto duas imagens se parecem em que 1 significa idênticas, contra 0,96 do JPEG em tamanho cheio com qualidade 82. Fica visivelmente borrada. Ampliar só espalha os pixels existentes por mais espaço; os ampliadores com IA fazem parecer mais nítido inventando detalhes plausíveis, que não são os do original.

Os navegadores podem redimensionar uma imagem com uma suavização mais ou menos caprichada; o redimensionador do nTools pede a mais alta. Mantenha as proporções ao redimensionar, ou rostos e círculos ficam deformados. Quando é preciso um formato exato, como uma foto de perfil quadrada, corte primeiro e redimensione depois.

Redimensionar e comprimir imagens

O que significa o número da qualidade

A qualidade não é porcentagem de nada. No JPEG é uma escala de 0 a 100, definida pela biblioteca JPEG de referência, que controla o quanto o detalhe é arredondado; a documentação dela recomenda de 50 a 95 para fotos e avisa que acima de uns 95 o arquivo cresce muito para pouco ganho. O WebP tem escala própria, então o mesmo número não significa a mesma coisa nos dois formatos.

Nossas medições, com a foto de 1280 × 854 no Chrome e o SSIM em relação ao original (1 significa idênticas):

QualidadePeso JPEGSSIM JPEGPeso WebPSSIM WebP
50181 KB0,915180 KB0,944
75270 KB0,950231 KB0,963
82323 KB0,962288 KB0,976
92466 KB0,981410 KB0,988
95570 KB0,987474 KB0,990
1001275 KB0,9991306 KB1 (sem perda)
PNG2302 KB1 (sem perda)––

Três coisas chamam a atenção. Ir de 95 para 100 mais que dobra um JPEG em troca de quase nada visível. Com a mesma semelhança, o WebP fica cerca de um terço menor que o JPEG, de acordo com o número do Google de uns 30%: WebP a 82 empata com JPEG a 90 usando 288 KB em vez de 428 KB. E no Chrome o WebP a 100 passa para compressão sem perda, que aqui ficou 43% menor que o PNG.

Quando um site ou programa não diz que qualidade usa, os padrões do Chrome são 92 para JPEG e 80 para WebP; medimos os dois salvando sem informar a qualidade. O redimensionador do nTools começa em 82.

A cor é a primeira a ir embora

O JPEG guarda brilho e cor separados, e o olho é muito mais sensível ao brilho. Por isso a maioria dos codificadores guarda a cor com metade da largura e metade da altura, um esquema chamado 4:2:0: um quarto da informação de cor, com pouco efeito visível nas fotos. É o padrão da biblioteca JPEG de referência, e o Chrome o usou em todas as qualidades testadas, menos em 100.

Onde aparece é em detalhes finos e saturados: texto vermelho sobre fundo branco, linhas coloridas de um gráfico ou de um logotipo. As bordas borram. Para capturas de tela e gráficos com texto, PNG ou WebP sem perda evitam o problema, como explica a primeira parte desta série.

Salvar de novo e de novo

Cada vez que um arquivo com perda é aberto, editado e salvo, ele é comprimido outra vez. Quanto se perde depende de os ajustes mudarem ou não. Salvamos a foto de teste dez vezes seguidas:

Guarde o original, faça cada cópia a partir dele e aplique a mudança de tamanho e de qualidade num passo só, no fim.

Tamanhos que funcionam

Estes pontos de partida vêm das medições acima. Nossa foto de teste usou cerca de 0,3 byte por pixel em JPEG com qualidade 82; cenas cheias de detalhe, como folhagem ou cascalho, precisam de mais, e céus e paredes lisos, de menos.

UsoLado maiorFormato e qualidadePeso aproximado
Imagem numa página webLargura exibida × 2WebP 75–82 ou JPEG 80–85100–400 KB
E-mail ou mensagens, várias fotos1600–2000 pxJPEG 80–850,5–0,9 MB cada
Formulário com limite de 1 ou 2 MB2000 pxJPEG 80menos de 1 MB
ImpressãoTamanho impresso × a densidade pedida pela gráficaJPEG 92–95, ou o originalvários MB
Captura de tela ou gráfico com textoSem mudançaPNG ou WebP sem perdadepende do conteúdo

O Gmail permite 25 MB de anexos por mensagem nas contas pessoais e transforma o que passar disso num link do Google Drive, então poucas fotos de celular sem mexer já podem bater no limite.

Tudo o que as ferramentas de imagem do nTools fazem acontece no seu navegador: a foto não é enviada para lugar nenhum.

Conversor de formatos de imagem

Perguntas frequentes

Mudar de 72 para 300 DPI melhora uma foto?

Não. Só reescreve um número dentro do arquivo. Pixels, peso e aparência na tela continuam exatamente iguais. Uma impressão só ganha nitidez com mais pixels, captados pela câmera, não acrescentados depois.

Por que minha foto redimensionada ficou borrada?

Normalmente porque ficou menor que o espaço onde aparece e depois foi esticada, por exemplo na tela de um celular com razão de pixels 2 ou 3. Faça com cerca do dobro da largura em que ela é exibida.

Que qualidade usar no JPEG?

Entre 75 e 85 serve para a maioria das fotos em tela. Acima de 95 o arquivo cresce rápido com pouco ganho visível, e 100 não é sem perda.

O WebP sempre pesa menos que o JPEG?

Em fotos com a mesma qualidade visual, costuma pesar, cerca de um terço a menos no nosso teste. Confira se o destino aceita WebP; alguns programas e formulários antigos não aceitam.

Dá para ampliar uma imagem pequena sem perder qualidade?

Não. Ampliar não recria um detalhe que nunca foi captado. Os ampliadores com IA podem deixar o resultado com cara de mais nítido, mas o detalhe acrescentado é inventado.

Por que minha foto em PNG pesa tanto mais que em JPEG?

O PNG guarda cada pixel exatamente, o que é bom para capturas de tela e gráficos. Com uma foto, no nosso teste ele gerou um arquivo cerca de sete vezes maior que um JPEG com qualidade 82, sem diferença visível no tamanho normal.

Anterior da série ← Formatos de imagem explicados: JPEG, PNG, WebP, AVIF e HEIC

Referências

  1. MDN — <length>: absolute length units (px, in)
  2. MDN — Window: devicePixelRatio property
  3. MDN — Responsive images
  4. MDN — HTMLCanvasElement: toBlob() method
  5. MDN — CanvasRenderingContext2D: imageSmoothingQuality property
  6. JPEG File Interchange Format (JFIF), version 1.02
  7. libjpeg-turbo 3.0.2 — usage.txt (cjpeg: -quality, -sample)
  8. Google for Developers — WebP: Frequently Asked Questions
  9. web.dev — Serve images with correct dimensions
  10. Gmail Help — Send attachments with your Gmail message

Guias relacionados