Que resolução escolher para uma imagem?

Escolher a “resolução certa” para a Web torna-se confuso quando surgem termos como píxeis, PPI, DPI, Retina, 2x, dimensões intrínsecas e píxeis CSS. A pergunta útil é concreta: quantos píxeis são realmente necessários para a imagem ficar nítida no tamanho em que será apresentada?

Começar pelas dimensões em píxeis

Uma imagem raster pode ter 800×600, 1920×1080 ou 4032×3024 px. Estas dimensões indicam quantas amostras contém e são o primeiro dado relevante para o Web.

Uma fotografia de smartphone pode exceder 4000 px de largura mesmo que o site a apresente a 800 ou 1200 px. Usar sempre o original pode transferir muito mais dados do que o necessário.

Definição, densidade e tamanho físico

A definição é o número de píxeis da imagem. A densidade exprime píxeis por unidade física, como PPI. DPI associa-se sobretudo à impressão.

Na Web, o tamanho apresentado é principalmente definido pelo CSS. Os conceitos relacionam-se nalguns contextos, mas não são equivalentes.

Porque 72 DPI não é uma regra Web

Dois ficheiros idênticos de 1200×800, um marcado 72 DPI e outro 300 DPI, contêm os mesmos píxeis. Se ambos forem apresentados a width:600px, o navegador dispõe da mesma informação de origem.

Alterar apenas a metainformação DPI não acrescenta detalhe. DPI é útil sobretudo quando se relacionam píxeis com um tamanho físico de impressão.

Píxel da imagem e píxel CSS

width:600px significa 600 píxeis CSS, não necessariamente 600 píxeis físicos. Num ecrã de alta densidade, vários píxeis físicos podem representar cada píxel CSS.

devicePixelRatio exprime aproximadamente essa relação. Com DPR 2, uma zona de 600×400 CSS pode usar cerca de 1200×800 píxeis físicos.

Regra prática

largura útil da fonte ≈ largura CSS máxima × densidade alvo

Para 700 CSS px:

• 1x → cerca de 700 px;
• 2x → cerca de 1400 px;
• 3x → cerca de 2100 px.

Uma variante próxima de 2x é muitas vezes um bom compromisso, mas não uma regra universal.

Porque não enviar sempre 3x

Duplicar largura e altura quadruplica o número de píxeis. 1000×600 contém 600.000; 2000×1200 contém 2,4 milhões; 3000×1800 chega a 5,4 milhões.

Mais píxeis significam geralmente mais dados para descarregar e descodificar. Enviar sempre 3x pode tornar a página mais lenta sem benefício visual percetível.

Partir do tamanho de apresentação

Não pergunte “como mantenho os 4032 píxeis da câmara?”, mas “qual é a largura máxima real no layout?”.

Se a imagem aparece no máximo a 800 CSS px, uma variante perto de 1600 px pode servir muito bem a ecrãs 2x. Pode criá-la com o redimensionador de imagem.

Preservar a proporção

Uma imagem 1600×900 é 16:9. Reduzida para 800 px de largura, a altura coerente é:

900 × 800 / 1600 = 450

logo 800×450. Passar para 800×600 sem recorte deforma-a.

Redimensionar e recortar

Redimensionar altera o número de píxeis mantendo o enquadramento. Recortar elimina parte do conteúdo e pode alterar a proporção. Uma miniatura quadrada e um banner panorâmico podem portanto precisar de cortes diferentes da mesma fotografia.

Ampliar não recupera detalhes

Levar uma fonte de 400 px para 1600 px requer interpolação. Algoritmos podem produzir um resultado agradável, mas não recuperam informação que nunca existiu. Métodos com IA podem gerar detalhes plausíveis, não necessariamente fiéis ao original.

Reduzir é geralmente mais seguro

Reduzir condensa vários píxeis de origem em menos píxeis finais. Há perda de informação, mas se esses detalhes seriam invisíveis no tamanho de uso, a perda é coerente com a otimização Web.

Resolução e tamanho do ficheiro

Mais píxeis significam mais dados potenciais, mas duas imagens com as mesmas dimensões podem ter tamanhos muito diferentes conforme conteúdo, formato e compressão.

Por isso resolução, compressão e formato devem ser decididos em conjunto.

Em sites responsive, produza variantes e deixe o navegador escolher através de srcset e sizes em vez de enviar o mesmo ficheiro enorme a todos.