Redimensionar Imagem

Por que reduzir de uma vez fica ruim

Quando um navegador desenha uma imagem grande num espaço muito menor numa única operação, ele amostra um número limitado de pixels de origem e ignora o resto. O detalhe que ficou entre as amostras não entra na média, é descartado, e o resultado é aliasing: diagonais serrilhadas, texturas finas cintilando e texto que vira ruído. É por isso que uma imagem reduzida só com o atributo width costuma ficar pior do que a mesma imagem reduzida num editor de imagens.

A solução usada aqui é reduzir a imagem pela metade repetidamente e só dar o último passo pequeno no fim. Cada redução pela metade faz a média de grupos de quatro pixels, então, quando o tamanho final é alcançado, cada pixel de saída deriva de toda a área que representa, e não de uma amostra arbitrária dentro dela. É o mesmo princípio do mipmapping em computação gráfica, e numa redução grande a diferença não é sutil.

Ferramentas dedicadas vão além com filtros Lanczos ou semelhantes, que ponderam uma vizinhança maior e preservam um pouco mais de nitidez aparente. As reduções sucessivas pela metade chegam perto o bastante para que a diferença seja difícil de ver em fotos, e rodam rápido o suficiente para mostrar a prévia na hora num celular.

Escolhendo o tamanho final

Dimensione para onde a imagem será exibida e depois leve em conta a densidade de pixels. Uma foto mostrada com 800 pixels CSS de largura numa página precisa ter uns 1600 pixels para ficar nítida num celular ou notebook moderno, que têm dois pixels do dispositivo por pixel CSS. Acima de 2x o ganho visível é mínimo e o custo em tamanho de arquivo é considerável.

Para uma página que atende muitos dispositivos, a melhor resposta é oferecer vários tamanhos com o atributo srcset e deixar o navegador escolher. Larguras comuns de 640, 960, 1280 e 1920 cobrem a maioria dos layouts. Para e-mail, fique por volta de 600 pixels. Para um documento ou slide, use o dobro do tamanho em que a imagem será posicionada.

Nunca amplie para atingir um tamanho. Ampliar inventa pixels que não foram fotografados; torna uma imagem suave maior e mais suave, e deixa o arquivo maior sem ganho nenhum. Se algo precisa ser maior que a origem, é a origem que precisa mudar.

O limite, e por que ele existe

São aceitos arquivos de até 30 MB e imagens de até cerca de 16,7 milhões de pixels - uns 4000 por 4000, ou qualquer outro formato com a mesma área total.

Esse limite é do canvas do navegador, não uma política arbitrária. O Safari no iOS, em especial, limita a área que um canvas pode ocupar, e a falha acima disso é do pior tipo: nenhum erro, nenhuma exceção, só uma imagem em branco devolvida como se tudo tivesse funcionado. Para que isso não aconteça, qualquer imagem acima do limite é recusada com uma explicação. Se você tem uma exportação RAW de 50 megapixels para reduzir, um editor de imagens de desktop é a ferramenta certa.

O mesmo limite explica por que os lotes são processados uma imagem por vez, e não em paralelo. Uma imagem decodificada ocupa largura vezes altura vezes quatro bytes na memória, por menor que seja o arquivo compactado, então várias imagens grandes ao mesmo tempo é o que faz o navegador do celular derrubar a aba.

Redimensionar, recortar ou comprimir

Essas operações resolvem problemas diferentes e costumam ser confundidas quando o objetivo real é um arquivo menor.

Redimensionar muda quantos pixels existem e é, de longe, a alavanca mais eficaz sobre o tamanho do arquivo, porque o efeito é quadrático - reduzir largura e altura pela metade corta o número de pixels para um quarto. Muda o que se vê em tamanho real, mas mantém o quadro inteiro.

Recortar muda o que está no quadro. Também reduz pixels, mas é uma decisão de composição, não técnica, e não pode ser desfeita.

Comprimir muda a precisão com que os pixels existentes são armazenados, que é a configuração de qualidade do conversor. Mantém as dimensões e troca fidelidade por tamanho.

Para uma foto pesada demais para uma página web, a ordem que funciona é redimensionar primeiro para o tamanho de exibição e depois codificar em WebP ou JPG com uma qualidade sensata. Fazer só a segunda etapa normalmente deixa a maior parte da economia na mesa.

Por que reduzir exige um filtro

Reduzir uma imagem significa responder a uma pergunta para cada pixel de saída: que cor representa esta região do original. Pegar o pixel de origem mais próximo e ignorar os vizinhos é a resposta mais barata e a pior, porque o detalhe que caiu entre os pontos amostrados é descartado em vez de promediado, e esse detalhe descartado reaparece como um padrão que nunca esteve na fotografia.

Isso é aliasing, e é o mesmo fenômeno da roda de carroça que parece girar para trás num filme. Amostrar a uma taxa menor do que o detalhe exige não faz o detalhe se perder em silêncio; ele é dobrado de volta para dentro da imagem como um padrão falso, de frequência mais baixa. Texturas finas cintilam, linhas diagonais viram degraus e textos pequenos viram ruído.

A solução é promediar toda a área que cada pixel de saída representa, e filtros diferentes ponderam essa média de maneiras diferentes. A média por caixa é simples e deixa a imagem levemente suave; o Lanczos pondera uma vizinhança mais ampla com uma curva baseada em sinc e preserva mais nitidez aparente, ao custo de um leve ringing perto de bordas duras. A redução sucessiva pela metade, usada aqui, chega perto do mesmo resultado por uma fração do custo.

Dimensões, proporção e recorte

Redimensionar preserva o enquadramento inteiro e muda quantos pixels o descrevem. Recortar muda o enquadramento. Confundir as duas coisas produz aquelas imagens distorcidas que se vê em sites malfeitos, em que uma foto panorâmica foi espremida dentro de um contêiner quadrado porque as duas dimensões foram definidas de forma independente.

Quando o layout exige uma forma fixa, recorte de propósito em vez de esticar. O object-fit do CSS com cover faz isso no navegador e serve bem para imagens decorativas; para qualquer coisa em que o assunto importa, recortar de antemão dá controle sobre o que permanece no quadro. O recorte automático pelo centro decapita gente em fotos de grupo com uma regularidade impressionante.

Direção de arte é o caso em que um único recorte não basta: uma imagem de destaque panorâmica que funciona no desktop costuma precisar de um recorte vertical mais fechado no celular, e não apenas de uma versão menor do mesmo enquadramento. É para isso que serve o elemento picture com condições de mídia, diferentemente do srcset, que entrega o mesmo recorte em tamanhos diferentes.

O peso das imagens e o que ele custa à página

Imagens costumam ser a coisa mais pesada que uma página baixa, e o largest contentful paint - uma das métricas que o Google reporta nos Core Web Vitals - é muitas vezes uma imagem. Cada kilobyte desnecessário nesse único arquivo adia o momento em que a página parece carregada.

Um orçamento viável é manter a imagem de destaque abaixo de uns 200 KB e tudo que está abaixo da dobra bem menor, o que é alcançável com ajustes de qualidade comuns assim que as dimensões estiverem certas. Servir uma foto de 3 MB e deixar o CSS reduzi-la é o problema de desempenho mais comum em sites de conteúdo, e custa ao visitante a franquia de dados além do tempo.

A estabilidade do layout é a outra metade. Uma imagem sem width e height declarados não reserva espaço, então o texto abaixo dela pula quando a imagem chega. Definir os dois atributos, ou um aspect-ratio no CSS, é uma mudança de uma linha que elimina uma categoria inteira de defeito visível.

Redimensionando muitas imagens de uma vez

Para um punhado de arquivos, uma ferramenta de navegador é o caminho mais rápido. Passando de algumas dezenas, ou como parte de um build, uma ferramenta programável é melhor: o mogrify -resize 1600x -quality 82 *.jpg do ImageMagick dá conta de um diretório em um único comando, e sharp, libvips ou Pillow fazem o mesmo dentro de um pipeline Node ou Python, com um consumo de memória bem menor do que a fama sugere.

Dois hábitos evitam os acidentes de sempre. Trabalhe em cópias, já que o mogrify sobrescreve no lugar por padrão e não há desfazer. E use uma restrição só de largura, como 1600x, em vez de dimensões fixas, para que imagens em retrato e em paisagem sejam tratadas sem distorção.

Num site que recebe uploads de usuários, o redimensionamento deve acontecer uma vez na entrada, e não a cada requisição, guardando o original caso você venha a precisar de outros tamanhos depois. Derivar tamanhos sob demanda por uma CDN de imagens é a outra arquitetura razoável; fazer isso na página com CSS não é, porque o arquivo inteiro é baixado de qualquer maneira.

Ampliação e o que as ferramentas de IA mudam

Ampliar uma imagem não recupera detalhes que nunca foram capturados. A interpolação clássica - bilinear, bicúbica, Lanczos - produz uma imagem maior e suave a partir da mesma informação, e ela parece macia porque é macia mesmo. Isso não é uma deficiência do algoritmo; a informação realmente não está lá.

Ampliadores baseados em aprendizado de máquina entregam algo mais nítido inventando detalhes plausíveis com base no que já viram antes. Para um papel de parede ou uma impressão de foto de viagem, isso costuma ser exatamente o que se quer. Para qualquer coisa com valor probatório - a digitalização de um documento, a foto de um produto em que o cliente vai confiar, uma imagem numa reportagem -, é um problema sério, porque o detalhe acrescentado é um palpite apresentado com a mesma confiança dos pixels reais.

A regra confiável continua a mesma: conserte a origem. Exporte de novo a partir do arquivo original, redigitalize em resolução mais alta, ou peça o material no tamanho de que você precisa. Todo o resto é um remendo feito com material inventado.