>> Tecnologia Eletrônica >  >> Câmeras >> Câmeras Digitais

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez

Redimensionar imagens para web e e-mail são talvez as formas mais comuns de compartilhar fotos digitais. Particularmente para apresentação web, conseguir reter nitidez livre de artefatos em imagem reduzida é crítico — mas pode ser problemático. Diferente do aumento de foto onde bordas serrilhadas são problema, a redução resulta no artefato de aliasing oposto: moiré. A prevalência de moiré depende largamente do tipo de interpolador usado, embora algumas imagens sejam muito mais suscetíveis que outras. Este tutorial compara diferentes abordagens de redimensionamento para web e e-mail, e faz recomendações baseadas nos resultados.

Contexto: Artefatos de Moiré

Moiré (pronuncia-se "mora-ê") é outro tipo de artefato de aliasing, mas pode ocorrer ao reduzir uma imagem. Aparece em imagens com texturas finas próximas ao limite de resolução. Essas texturas ultrapassam a resolução quando reduzidas, então a imagem pode apenas registrá-las seletivamente em padrão repetitivo:

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Imagem Original
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Imagem Reduzida a 50%
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Imagem Reduzida Mostrada a 200%

Note como esse padrão não tem significado físico na foto porque essas linhas não correlacionam com a direção das telhas do telhado. Imagens com padrões geométricos finos estão no maior risco; incluem telhas de telhado, tijolos e marcenaria distantes, cercas de arame, e outros.

Suavização Induzida por Redimensionamento

Além de artefatos de moiré, uma imagem redimensionada pode também ficar significativamente menos nítida. Algoritmos de interpolação que preservam a melhor nitidez são mais suscetíveis a moiré, enquanto os que evitam moiré tipicamente produzem resultado mais suave. Infelizmente, isso é uma troca inevitável no redimensionamento.

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Original Reduzido 90%
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Imagem Redimensionada Mais Suave — passe o mouse para ver como máscara de foco recupera nitidez

Uma das melhores formas de combater isso é aplicar uma máscara de foco subsequente após redimensionar — mesmo se a original já tinha sido aguçada.

Desempenho de Interpolação Comparado

Como exemplo: quando uma imagem é reduzida a 50% do tamanho original, é impossível mostrar detalhe que antes tinha resolução de apenas um pixel. Se qualquer detalhe é mostrado, não é real e deve ser artefato do interpolador.

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Original Reduzido 50%
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Média da Imagem em Cinza

Usando esse conceito, um teste foi desenhado para avaliar tanto a resolução máxima quanto o grau de moiré que cada interpolador produz ao reduzir. Amplifica esses artefatos para cenário típico: redimensionar imagem de câmera digital para resolução web/e-mail gerenciável de 25% do tamanho original.

A imagem de teste (abaixo) foi desenhada para que a resolução de listras aumente progressivamente a partir do centro. Quando a imagem é reduzida, todas as listras além de certa distância do centro não devem mais ser resolvíveis. Interpoladores que mostram detalhe até o limite teórico (caixa vermelha tracejada abaixo) preservam máximo detalhe, enquanto os que mostram detalhe fora desse limite adicionam padrões que não estão lá (moiré).

 1. Vizinho Mais Próximo
 2. Bilinear
 3. Bicúbico **
 4. Sinc
 5. Lanczos
 6. Bicúbico, pré-desfoque 1px
 7. #6 c/ nitidez
 8. Genuine Fractals
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Resultados do teste de interpolação
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Imagem de Teste* — Mostrar Caixa Vermelha? SIM / NÃO

*Imagem de teste acima modificada para visualização; imagem real é 800×800 pixels e listras estendem à resolução máxima nesse tamanho.
**Bicúbico é da configuração padrão no Adobe Photoshop CS & CS2
Gráfico de teste concebido em artigo da BBC e implementado primeiro em www.worldserver.com/turk/opensource/; todos diagramas e código personalizado realizados em Matlab.

Algoritmos sinc e lanczos produzem os melhores resultados; conseguem resolver detalhe até o máximo teórico (caixa vermelha), mantendo menos artefatos fora dela. Bicúbico do Photoshop fica em segundo, com moiré visível bem fora da caixa. Note também como bicúbico não mostra tanto detalhe e contraste logo dentro da caixa. 6 e 7 são variantes do bicúbico, discutidas abaixo. Genuine Fractals 4.0 incluído para comparação, embora vá mal em redução (não seu uso pretendido). Isso destaca divisão chave: alguns algoritmos são muito melhores em aumentar que diminuir tamanho, e vice-versa.

Nota Técnica: algoritmos de interpolação variam dependendo do software, mesmo se o algoritmo tem o mesmo nome. Interpolação sinc, por exemplo, tem variações que consideram 256-1024+ pixels adjacentes conhecidos. Isso pode ou não ser explicitamente declarado no software. Além disso, software pode variar em quanto peso dão a pixels próximos vs. distantes nos cálculos, o que frequentemente ocorre com "bicúbico".

Pré-Desfoque para Minimizar Artefatos de Moiré

Uma abordagem que pode melhorar resultados em imagens problemáticas é aplicar leve desfoque na imagem antes de reduzi-la. Isso permite eliminar detalhes menores que o que você sabe ser impossível capturar em resolução menor. Se não tem problema com moiré, não há necessidade de pré-desfoque.

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Imagem reduzida a 1/4 — raio de 1 pixel eliminou artefatos fora da caixa

Como a imagem acima foi reduzida a 1/4 do tamanho original, padrões repetitivos menores que 4 pixels não podem ser resolvidos. Raio de até 2 pixels (diâmetro total 4) poderia ter sido usado no #6, porém 1 pixel foi suficiente para virtualmente eliminar artefatos fora da caixa. Pré-desfoque excessivo pode levar a suavização na imagem final.

A imagem do Photoshop pré-desfocada (#6) elimina a maior parte do moiré (encontrado no #3), porém nitidez adicional (realizada no #7) é necessária para recuperar nitidez para detalhe logo dentro da caixa vermelha. Após pré-desfoque e nitidez, bicúbico do Photoshop performa próximo aos mais sofisticados sinc e lanczos.

Bicúbico Mais Nítido vs. Bicúbico Mais Suave no Photoshop

Versões CS (8.0) e superiores do Adobe Photoshop têm três opções para interpolação bicúbica: bicúbico mais suave, bicúbico (padrão intermediário), e bicúbico mais nítido. Todas fornecem resultados similares ao #3 na comparação, mas com graus variados de nitidez. Portanto, se sua imagem tem moiré, a configuração mais nítida amplificará e a mais suave reduzirá (relativo ao padrão).

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Original Reduzido 75%
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Comparação: Mais Suave vs. Mais Nítido

Muitos recomendam usar variação mais suave para ampliar e mais nítida para reduzir. Funciona bem, mas minha preferência é usar bicúbico padrão para redução — deixando maior flexibilidade para aguçar depois conforme a imagem requer. Muitos acham a nitidez embutida na variação mais nítida um pouco forte e grosseira para a maioria das imagens, mas é questão de preferência.

Recomendações

Toda essa análise visa explicar o que acontece quando as coisas dão errado. Se redimensionamento é livre de artefatos, pode não precisar mudar nada; fluxos fotográficos já são complicados o suficiente. Muitas fotos não têm detalhe suscetível a moiré — independentemente da interpolação. Por outro lado, quando as coisas dão errado, isso ajuda a explicar por que — e que ações tomar para corrigir.

A solução ideal é usar algoritmo sinc ou lanczos para evitar artefatos de moiré na imagem reduzida, seguida de máscara de foco com raio muito pequeno (0.2-0.3) para corrigir qualquer suavização induzida por interpolação. Por outro lado, algoritmo sinc não é amplamente suportado e software que o usa costuma ser menos amigável.

Abordagem alternativa: usar bicúbico, pré-desfoque imagens problemáticas e depois aguçar após redução. Isso prepara a imagem para o interpolador de forma que minimize artefatos de aliasing. A principal desvantagem é que o raio de desfoque necessário depende de quanto você deseja reduzir — portanto deve usar essa técnica caso a caso.

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Gráfico Computacional Original Reduzido 50%
Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez
Zero Antialiasing

Finalmente, você pode garantir que não induz antialiasing em gráficos computacionais se usar algoritmo de vizinho mais próximo. Apenas tenha cautela especial quando a imagem contém texturas finas, pois este algoritmo é o mais propenso a artefatos de moiré.

Para leitura adicional, visite:
Interpolação de Imagem Digital, Parte 1

Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez Redimensionamento de Imagens para Web e E-mail: Evitando Moiré e Perda de Nitidez