Preparar uma imagem para publicação

Redimensione para o tamanho a que a imagem vai realmente ser apresentada, no máximo o dobro disso em ecrãs de alta densidade. Recorte para a forma de que o layout precisa, em vez de deixar o navegador esmagá-la. Comprima até os artefactos começarem a aparecer e recue então um ponto. Remova os metadados no fim. A ordem conta: todos os passos a seguir ao primeiro trabalham sobre muito menos píxeis.

As dimensões vêm primeiro

A contagem de píxeis cresce com o quadrado da largura, por isso uma diferença modesta nas dimensões é uma diferença enorme em dados. Uma imagem guardada com 4000 píxeis de largura e mostrada numa coluna de 800 píxeis transporta cerca de vinte e cinco vezes os dados de que precisa, e nenhuma definição de qualidade recupera isso.

Para escolher uma largura alvo, meça a maior largura a que a imagem alguma vez é desenhada no layout, não a maior largura que o ecrã atinge. Um cartão numa grelha de três colunas pode nunca passar dos 380 píxeis de largura. Se um único ficheiro serve vários sítios, dimensione-o para o maior deles.

Píxeis do dispositivo, píxeis CSS e o mito dos DPI

Um píxel CSS é uma unidade de layout, não um ponto físico. O rácio de píxeis do dispositivo é quantos píxeis físicos o ecrã pinta por cada píxel CSS: 1 em monitores mais antigos, 2 na maioria dos telemóveis e portáteis modernos, 3 em alguns telemóveis. Uma coluna de 800 píxeis CSS com rácio 2 é pintada com 1600 píxeis do dispositivo, e é por isso que uma imagem dimensionada pela sua largura em CSS aparece desfocada.

A regra prática é 2x. Exporte com o dobro da largura de apresentação e deixe o navegador reduzir. Ir para 3x custa mais 125% em dados a troco de uma diferença que poucas pessoas veem à distância normal de visualização.

Os DPI e PPI guardados num ficheiro são irrelevantes para a web. São um número no cabeçalho a dizer a que tamanho físico o ficheiro deve ser impresso, e os navegadores ignoram-no por completo.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Exportar a "300 DPI" não acrescenta píxeis nenhuns nem altera dado nenhum da imagem.

O que a reamostragem faz

Reduzir a escala significa que muitos píxeis de origem se transformam num só. O detalhe mais fino do que a nova grelha não pode ser representado e, se o reamostrador recolher poucos píxeis de origem em vez de fazer a média de toda a área, esse detalhe volta dobrado como falso padrão: diagonais serrilhadas e moiré em texturas finas e repetidas, como uma camisa às riscas ou uma tabela com contornos de um píxel. Uma boa redução faz a média de todos os píxeis que contribuem, e costuma precisar de um pouco de nitidez a seguir.

Aumentar a escala não cria detalhe nenhum. A interpolação limita-se a adivinhar valores entre píxeis que já existem, pelo que o resultado fica desfocado ou aos quadrados. Os ampliadores baseados em aprendizagem automática inventam detalhe plausível, o que não é o mesmo que recuperá-lo.

Proporção: recortar, letterbox ou esticar

Recortar mantém o motivo à escala certa e deita fora as margens, e é a opção certa por omissão. O letterbox mantém o enquadramento inteiro, mas acrescenta bandas e obriga a escolher a cor dessas bandas; vale a pena quando não se pode cortar nada, como acontece com uma obra ou um diagrama. Esticar distorce, e o olho apanha isso de imediato em rostos, círculos e tipografia.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Quando um mesmo ficheiro aparece em várias formas, pense em termos de área segura: a região que sobrevive a todos os recortes. Um banner 16:9 corta em cima e em baixo, um mosaico 1:1 e um cartão 4:5 cortam dos lados, por isso o que todos eles mantêm é uma faixa que atravessa o centro. Mantenha o motivo e todo o texto lá dentro, ou um rosto junto à margem de uma foto horizontal fica decapitado pelo recorte quadrado.

Encontrar a definição de qualidade

Um número de qualidade não é uma percentagem de coisa nenhuma, e as escalas não são comparáveis entre codificadores. JPEG 80, WebP 80 e AVIF 80 são três definições sem relação entre si.

O método é o mesmo para todos. Exporte com algumas definições, veja o resultado no tamanho a que vai ser mostrado e verifique onde é que os artefactos aparecem primeiro: gradientes suaves como os céus, que ganham bandas e manchas; arestas duras e texto, que ganham anéis. Encontre o ponto em que o estrago se torna visível, recue um ponto, pare.

Um número fixo é errado para todas as imagens porque é o conteúdo que decide quanto se pode deitar fora: uma fotografia ruidosa e cheia de textura precisa de mais bits para sobreviver, enquanto uma ilustração de cor lisa se desfaz numa definição que uma foto carregada nem sente.

Recortes, orlas suaves e halos

Remover o fundo é a decisão certa quando a imagem tem de assentar sobre mais do que uma cor de fundo, ou sobrepor-se a outros elementos: fotografias de produto, logótipos, uma pessoa integrada num layout. É a decisão errada quando o limite é genuinamente fino, como no cabelo, na folhagem ou no vidro, porque uma máscara má fica pior do que um retângulo honesto.

Uma orla dura é binária, cada píxel totalmente opaco ou totalmente transparente, o que serve para gráficos de cor lisa mas cria degraus em tudo o que seja fotográfico. Uma máscara suave permite opacidade fracionária, por isso um píxel pode ser 40% motivo, que é a única forma de o cabelo ficar bem.

O halo vem dos píxeis da fronteira. A desfocagem da objetiva e a suavização de contornos já misturaram a cor do motivo com o fundo antigo, por isso cada um deles contém:

observed = alpha * foreground + (1 - alpha) * background

A remoção de fundo calcula apenas o alfa. A cor que fica nesses píxeis continua contaminada, por isso um motivo recortado de uma fotografia de estúdio branca traz consigo uma franja pálida: invisível numa página branca, evidente numa escura. Uma extração de máscara a sério também resolve a cor do primeiro plano, apresentada como defringe ou descontaminação de cores. Na falta disso, encolha a máscara para dentro uma fração de píxel e volte a suavizar-lhe a orla.

Rotação e metadados

Uma imagem que está direita num programa e deitada noutro é quase sempre uma questão de orientação EXIF. As máquinas guardam a imagem do sensor sem rotação e acrescentam uma etiqueta a dizer como a virar. O software que lê a etiqueta mostra-a corretamente; o software que a ignora, incluindo muitas bibliotecas de imagem e geradores de miniaturas, mostra os píxeis em bruto deitados de lado.

A solução é gravar a rotação nos próprios píxeis e pôr a etiqueta a 1 ou removê-la. Rodar em passos de 90 graus reorganiza os píxeis sem os reamostrar. Cuidado com a rotação a dobrar: píxeis já rodados, etiqueta ainda definida, e assim todos os visualizadores que a respeitam voltam a rodá-los.

Remover os metadados é uma medida de privacidade, não uma arrumação. Os blocos EXIF, IPTC e XMP transportam rotineiramente coordenadas GPS com poucos metros de precisão, a hora da captura, a marca, o modelo e o número de série da máquina, o nome do proprietário e, por vezes, uma miniatura incorporada que ainda mostra a imagem antes de ter sido recortada. Uma fotografia tirada em casa e publicada intacta publica uma morada.

Remova-os no fim, com uma exceção: o perfil de cor ICC fica junto a esses metadados e, se o retirar de uma imagem de gamute alargado, ficam números que passam a ser lidos como sRGB, aparecendo como cor apagada ou sobressaturada. Converta primeiro para sRGB e só depois remova tudo o resto.