Como recortar, girar e redimensionar uma imagem de uma vez sem perder nitidez

Uma tarefa típica tem três verbos. Uma foto de 4032 × 3024 tirada de cima, olhando para uma mesa, saiu de lado, e precisa de um recorte quadrado, um quarto de volta e um tamanho final de 1080 pixels. Feito em três sites de uma função só, isso dá três uploads, três downloads e três novas codificações da mesma imagem. Feito num lugar só, é uma decodificação e uma codificação, e a nitidez que sobrevive depende principalmente de como a última etapa encolhe os pixels.

O exemplo completo, passo a passo

Etapa	Tamanho depois	Megapixels	O que importa aqui
Foto original	4032 × 3024	12.19	Qualquer marcação de orientação que o celular gravou é respeitada na entrada; esta foto está de lado de verdade
Recorte 1:1 centralizado (Left 504, Top 0, Width 3024, Height 3024)	3024 × 3024	9.14	(4032 − 3024) ÷ 2 = 504 pixels cortados de cada lado
Um quarto de volta com ↻ 90°	3024 × 3024	9.14	Um quadrado mantém o tamanho; os números do recorte continuam se referindo às mesmas bordas
Width definida como 1080	1080 × 1080	1.17	1080 ÷ 3024 = 35.7% da largura, uma redução de 64%
Download	Um arquivo		Uma codificação, com o nome do formato que o navegador de fato gravou

A última linha antes do download é onde a nitidez é ganha ou perdida. Uma redução de 64% passa bem do ponto, cerca de um terço, em que o redimensionador embutido do navegador começa a jogar fora detalhes de forma visível.

Por que reduções grandes ficam borradas

Reamostragem é calcular novos pixels a partir dos que estão ao redor quando uma imagem muda de tamanho. Todo redimensionamento faz isso; a questão é com quanto cuidado.

O caminho do próprio navegador é desenhar a imagem num canvas menor. Isso amostra de forma barata e, numa redução de mais de um terço, mais ou menos, pula os detalhes que ficavam entre as amostras: linhas finas viram pontilhado, texto pequeno vira borrão, cabelo e folhagem ficam moles. Você também não pode escolher o método. O Chrome e o Firefox usam algo parecido com Lanczos, o Safari usa bicúbico, e nada na interface do canvas permite que uma página peça outra coisa.

O editor de imagens redimensiona com Lanczos3, que calcula cada pixel de saída a partir de uma janela ponderada de pixels de origem, em vez de uma única amostra barata. É por isso que bordas e letras sobrevivem a uma redução de 64%. O reamostrador custa 14 KB com gzip, carrega só nesta página e roda num worker, então arrastar uma alça de recorte continua fluido enquanto ele trabalha. Ele só roda quando o tamanho realmente muda; em 1:1 não há nada a reamostrar.

Ampliar passa pelo mesmo reamostrador e sai limpo, mas não inventa nada. Um detalhe que a câmera nunca captou não está no arquivo, e esse é o assunto do ampliador de imagens.

Por que uma passada vence três

Cada ferramenta separada decodifica o seu arquivo, faz a única coisa que sabe e codifica um arquivo novo. Se o formato for JPEG, ou WebP abaixo da qualidade máxima, cada uma dessas codificações descarta detalhes de novo, além do que a anterior já descartou, e não há como recuperá-los. Três ferramentas significam três codificações; uma passada significa uma.

A comparação da própria ferramenta com páginas de uma função só:

	O editor de imagens	Páginas separadas de recorte, rotação, espelhamento e redimensionamento
Idas e voltas	Uma decodificação, uma codificação	Recodifica entre cada etapa
Ordem das transformações	Declarada: recorte, espelhamento, rotação, redimensionamento	Não documentada
Coordenadas do recorte	Guardadas nos pixels da imagem original	Recalculadas depois de cada rotação
Redução	Lanczos3 num worker	O que o navegador fizer
Teclado	Caixas numéricas e uma seleção que recebe foco	Só ponteiro

Smallest (a menor), a opção de exportação padrão, tenta WebP, JPEG e PNG e fica com a que saiu menor. São três codificações dos mesmos pixels finais, e não uma codificação alimentando a seguinte, então o arquivo que você guarda continua a uma única geração de distância do original.

A ordem é fixa, e está documentada

Ordem das transformações da imagem é a sequência em que recorte, espelhamento, rotação e redimensionamento são aplicados. Ela importa porque as transformações não são comutativas: espelhar e depois girar dá uma imagem diferente de girar e depois espelhar.

Aqui é sempre recorte, depois espelhamento, depois rotação, depois redimensionamento. As caixas de recorte são guardadas nas coordenadas de pixel da própria foto original, então um Left de 504 digitado antes de você pressionar ↻ 90° continua significando a mesma borda depois. O redimensionamento roda por último porque não faz sentido reamostrar pixels que um recorte está prestes a descartar.

Uma consequência parece um bug e não é. Como o espelhamento roda antes da rotação, um espelhamento horizontal guardado aparece como vertical quando a imagem está a 90°. Os botões de espelhar compensam isso, então Flip ↔ sempre espelha no sentido que parece certo, e o indicador ao lado deles mostra o giro e os espelhamentos como você os vê.

Fazendo isso no editor de imagens

1. Abra o editor de imagens e pressione Choose an image (escolher uma imagem), ou solte uma na caixa. Um HEIC vindo direto do iPhone muitas vezes precisa ser convertido antes.
2. Defina o recorte em Crop · drag or type (recortar: arraste ou digite). Arraste um retângulo sobre a foto, escolha uma proporção entre Free (livre), 1:1, 4:3, 16:9 e 3:2, ou digite valores exatos em Left, Top, Width e Height (esquerda, topo, largura e altura). Com Tab até a seleção, as setas do teclado a movem um pixel por vez, ou vinte com Shift pressionado. Reset volta ao quadro inteiro.
3. Gire e espelhe em Turn (girar): ↺ 90°, ↻ 90°, 180°, Flip ↔ e Flip ↕.
4. Redimensione no painel seguinte. Digite uma Width, uma Height ou um Percent (porcentagem); Ratio locked (proporção travada) mantém as proporções, e Match crop (igualar ao recorte) volta o tamanho às dimensões recortadas. Os indicadores Output (saída) e Megapixels ao lado da prévia ao vivo se atualizam enquanto você digita.
5. Escolha um formato em Save as (salvar como): Smallest, PNG, JPEG ou WebP, se o seu navegador conseguir codificá-lo. O controle deslizante Quality (qualidade) vai de 0.30 a 1.00, começa em 0.85 e fica desativado para PNG, que é sem perdas.
6. Pressione Download. O arquivo recebe o nome do que o navegador realmente produziu, e Last file (último arquivo) mostra o tamanho dele.

O que a exportação muda além dos pixels

• Os metadados vão embora. A recodificação descarta o EXIF, o que remove as coordenadas de GPS que um celular grava em toda foto, e também os campos de direitos autorais e de câmera, se você precisasse deles.
• JPEG não tem transparência. Tudo o que for transparente é achatado sobre branco.
• Existe um teto de tamanho. Um canvas do navegador comporta cerca de 8 192 pixels por lado, e versões antigas do iOS limitam o total a perto de 16 megapixels. Além de qualquer um desses limites, o canvas devolve uma imagem em branco sem erro, então a ferramenta limita o tamanho e avisa. A verificação cobre também o canvas intermediário: uma digitalização de 12 000 pixels recortada para 11 000 pixels continua acima do teto.
• Sem rotação em ângulo livre. Só quartos e meias voltas. Endireitar um horizonte em dois graus interpolaria, e suavizaria, cada pixel.

Outras formas de fazer isso

No Mac, o Preview faz duas das três coisas: Tools → Crop recorta para uma seleção, e Tools → Adjust Size redimensiona. No Windows, o app Fotos (Photos) recorta e gira imagens. Seja qual for o app, faça todas as mudanças antes de salvar, para que a imagem seja codificada uma vez só.

Como verificar que nada foi enviado

Abra as ferramentas de desenvolvedor do navegador na aba Network antes de começar. O primeiro redimensionamento baixa o próprio reamostrador, um script servido por este site; nada que leve a sua imagem sai, porque o recorte, o giro e a reamostragem acontecem todos na aba.

Faça as três tarefas de uma vez no editor de imagens. Para descobrir em que tamanho os pixels finais vão imprimir, use o conversor de pixels; para deixar o arquivo salvo menor sem mexer em nenhum pixel, o compressor de imagens.