Bhinish Dhiman
Como aumentar uma imagem sem deixá-la borrada, e o que a ampliação não consegue fazer
Traduzido do original em inglês. Ler o original
Carregue a imagem, escolha 1.5×, 2×, 3× ou 4× (ou uma largura de destino), arraste o seletor de região até uma borda para comparar o painel do Lanczos3 com o redimensionador do próprio navegador e baixe o resultado. O Lanczos3 mantém as bordas mais limpas do que um redimensionamento bilinear rápido, mas nenhum reamostrador acrescenta detalhes: a 2×, cada pixel captado cobre quatro pixels de saída, então 75% do resultado é interpolado; a 4×, cerca de 94%.
Parte do borrado pode ser evitada e parte não pode. O tipo evitável vem de um filtro de redimensionamento ruim, que espalha bordas que o original mantinha nítidas. O tipo inevitável já está no arquivo: uma imagem pequena guarda um número fixo de pixels medidos, e aumentá-la espalha esses pixels por mais espaço. Uma boa ampliação resolve o primeiro e é honesta sobre o segundo.
Dois termos
Reamostragem de imagem é calcular novos pixels a partir dos que estão ao redor quando uma imagem muda de tamanho. Um reamostrador redistribui a informação que já está lá. Ele não consegue acrescentar nenhuma, e essa é a diferença entre reamostragem e a super-resolução neural que a palavra “upscaler” hoje sugere para a maioria das pessoas.
Lanczos3 é um filtro de reamostragem que pondera uma janela larga de pixels de origem para cada pixel novo, usando uma função sinc janelada. Ele preserva o contraste das bordas que um filtro mais estreito, como o bilinear, acaba diluindo na média. O efeito colateral conhecido é um halo leve que pode aparecer ao lado de uma borda muito dura.
Ampliando uma imagem, passo a passo
- Abra o ampliador de imagens e pressione Choose an image (escolher uma imagem), ou solte ou cole uma em qualquer lugar da página. PNG, JPEG, WebP, GIF e AVIF abrem normalmente; um HEIC do iPhone em geral precisa ser convertido antes.
- Em Enlarge by (ampliar em), escolha 1.5×, 2×, 3× ou 4×, ou abra More options (mais opções) e digite uma largura em pixels em Target width (largura de destino). Os dois andam juntos, e nenhum passa de 4×. O tamanho abaixo dos fatores mostra o tamanho de saída, o tamanho de origem e a contagem de megapixels.
- Leia a linha abaixo desse tamanho. Ela diz quantos pixels de saída cada pixel captado está cobrindo e que parte do resultado é interpolada; Result (resultado) repete isso como porcentagem.
- Em Pick the region (escolha a região), arraste o retângulo (ou use as setas do teclado; segure Shift para passos maiores) até uma borda: letras, um horizonte, um fio. Os dois painéis mostram esse trecho a um pixel de saída por pixel de tela, o Lanczos3 à esquerda e o
drawImagedo próprio navegador à direita. - Em More options, Save as (salvar como), escolha Smallest (a menor), PNG, JPEG ou WebP. Smallest tenta WebP, depois JPEG, depois PNG, e fica com o que o seu navegador gravou menor; WebP só aparece na lista onde o navegador consegue gravá-lo. Para uma imagem com áreas transparentes, escolha PNG ou WebP, porque a opção JPEG achata tudo o que for transparente sobre branco.
- Pressione Download the enlargement (baixar a ampliação). Ele salva a imagem inteira, e não o trecho dos painéis, com um nome como photo@2x.webp, e depois mostra o tamanho e o formato do arquivo em Result. A barra no rodapé da tela também traz Download.
Quanto de uma ampliação foi captado
Toda ampliação é, na maior parte, interpolação, e essa parte cresce rápido. Num fator f, cada pixel captado cobre f² pixels de saída, então a parte interpolada é 1 − 1/f².
| Fator | Pixels de saída por pixel captado | Parte interpolada | Oferecido pela ferramenta |
|---|---|---|---|
| 1.5× | 2.25 | 56% | Sim |
| 2× | 4 | 75% | Sim |
| 3× | 9 | 89% | Sim |
| 4× | 16 | 94% | Sim |
| 8× | 64 | 98% | Não |
| 16× | 256 | 99.6% | Não |
É por isso que as opções param em 4×. Depois disso, um único pixel medido está sendo convocado a virar 64 ou 256, e o resultado é uma versão grande e borrada de uma imagem pequena. Como referência prática, 2× costuma ser indistinguível na distância normal de visualização, 3× é aceitável para uma impressão vista à distância de um braço, e 4× começa a parecer mole em texturas finas. Uma imagem de 200 pixels guarda 200 pixels de detalhe em qualquer tamanho em que você a exiba.
O teto do canvas que transforma 2× em 1.18×
O limite que as pessoas encontram primeiro não é o filtro. Um canvas do navegador tem um teto de cerca de 8 192 pixels por lado e, em iPhones mais antigos, de uns 16 megapixels no total, e, além desse teto, ele devolve uma imagem em branco em vez de um erro. A ferramenta verifica os dois limites, 8 192 pixels por lado e 16 777 216 pixels no total (4 096 × 4 096), antes de desenhar qualquer coisa, reduz a saída para caber e avisa isso num alerta em Result.
Pegue uma foto de 12 megapixels, 4000 × 3000. A 2×, ela pede 8000 × 6000, ou seja, 48 megapixels, quase três vezes o teto de área. A ferramenta produz 4729 × 3547 no lugar: um fator efetivo de 1.18×. Todas as outras opções dão esse mesmo arquivo: 1.5×, 3× e 4× também estouram o teto nessa foto, e cada uma é reduzida para o maior tamanho com aquela proporção que cabe.
A conta dá a regra útil. Uma imagem quadrada pode ser dobrada até 2 048 pixels por lado, já que 4 096 × 4 096 é exatamente o teto, e quadruplicada até 1 024. A ferramenta serve para ícones, capturas de tela, digitalizações pequenas e miniaturas. Uma fotografia vinda direto do celular costuma ser maior do que qualquer coisa que ela consegue gerar.
O painel da direita é o navegador no seu melhor
Comparar o Lanczos3 com a configuração de menor qualidade do navegador seria manipular o teste, então o painel da direita usa drawImage com imageSmoothingQuality definido como 'high'. O código-fonte da ferramenta registra que isso dá um filtro parecido com Lanczos no Chrome e no Firefox e bicúbico no Safari, e que uma página não tem como perguntar qual dos dois recebeu.
Por isso, em algumas imagens, os dois painéis parecem iguais, e esse é um resultado real. Áreas lisas ficam idênticas com qualquer reamostrador; as bordas são onde qualquer diferença aparece, e é por isso que o seletor de região pede que você mire numa delas. Quando não der para ver diferença, fique com o arquivo menor. O argumento a favor de um filtro com nome é que você sabe o que foi feito com a sua imagem, em qualquer navegador.
Os painéis são desenhados a um pixel de saída por pixel de tela por um motivo que vale para qualquer comparação que você mesmo fizer. Uma ampliação de 4× encaixada numa prévia pequena é reduzida de novo pelo navegador, o que esconde a diferença que você está tentando avaliar. Olhe o arquivo baixado a 100% antes de concluir que ele ficou mole.
Outras formas de ampliar uma imagem
No macOS, o Tools → Adjust Size do Preview redimensiona uma imagem. Este guia não afirma nada sobre qual filtro ele usa.
No Windows, o app Fotos (Photos) nativo recorta e gira imagens, mas este guia não tem um método nativo verificado para ampliar uma. Também não tem um método de linha de comando verificado, então não oferece nenhum.
Ampliadores neurais são uma operação diferente. Um modelo treinado gera pixels novos que ele prevê que pertencem à imagem, em vez de redistribuir os que foram captados. Este guia não afirma nada sobre o quanto qualquer um deles faz isso bem. Esta ferramenta não inclui um porque não seria possível servi-lo: a versão WebGPU do runtime mediu 27 648 KB, acima do limite de 25 MiB por arquivo da hospedagem deste site, e os pesos do modelo comprimem só cerca de 7%. O reamostrador que ela usa no lugar tem 14 KB.
| Ampliador de imagens | Preview do macOS, Adjust Size | Um ampliador neural | |
|---|---|---|---|
| Método | Reamostragem Lanczos3 | Não informado aqui | Um modelo treinado gera pixels |
| Acrescenta detalhe que não foi captado | Não | Não | Gera detalhe novo |
| Mostra o resultado ao lado de uma alternativa | Sim, contra o redimensionador do navegador | Não | Não abordado aqui |
| Fator máximo | 4× | Não informado aqui | Não abordado aqui |
| A sua imagem é enviada para algum lugar | Não | Não | Depende do serviço |
Como verificar que a imagem ficou na sua máquina
Carregue a página e amplie uma imagem para que tudo de que ela precisa já tenha chegado. Depois, desconecte-se da rede e amplie uma segunda. Se os painéis forem redesenhados e o download terminar offline, nada pode ter sido enviado. A aba Network das ferramentas de desenvolvedor conta a mesma história com a conexão ligada: o código da própria página, e nenhuma requisição levando a sua imagem.
O ampliador de imagens é gratuito. Para recortar ou girar antes de ampliar, use o editor de imagens e, para escolher entre PNG e WebP no resultado, quanto o PNG para WebP economiza, medido em onze imagens traz os números.