Redimensionamento de imagem em tela HTML5 (downscale) com alta qualidade

Redimensionar imagens no navegador usando tela HTML5 pode resultar em baixa qualidade, especialmente quando redução de escala. Este artigo investiga o problema e fornece uma solução para alcançar a qualidade ideal durante a redução de escala.

Desativando interpolação e suavização de imagem

O código CSS e JS inicial fornecido na pergunta incluía propriedades para desabilitar interpolação e suavização de imagem:

image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

No entanto, essas propriedades não afetam diretamente a qualidade da redução de escala. A interpolação e a suavização se preocupam com a criação de novos pixels, o que não é relevante ao reduzir o tamanho da imagem.

Redução da resolução vs. para redução da resolução em vez de interpolação.

Na redução da resolução, os navegadores normalmente usam um método simples em que selecionam um único pixel da imagem de origem para cada pixel na imagem de destino. Isso pode resultar em perda de detalhes e ruído. pixels em consideração. O trecho de código fornecido é um exemplo de tal algoritmo:

function downScaleCanvas(cv, scale) { // Processa todos os pixels na imagem de origem para (sy = 0; sy Este algoritmo calcula a contribuição de cada pixel de origem para um, dois ou quatro pixels de destino, garantindo que todos os detalhes sejam preservados durante a redução de escala.

Significância de múltiplas etapas de redução de escala

A redução de escala em várias etapas pode levar ao aumento da imprecisão na imagem. Isso ocorre porque os erros de arredondamento cumulativos de operações sucessivas de redução de escala resultam em maior ruído.

function downScaleCanvas(cv, scale) {
    // Process all pixels in the source image
    for (sy = 0; sy < sh; sy  ) {
        for (sx = 0; sx < sw; sx  ) {
            // Calculate target pixel position and weights
            ...

            // Add weighted contributions to target buffer
            ...
        }
    }

    // Create result canvas and populate it
    ...

    return resCV;
}

Comparação com outras abordagens

O algoritmo fornecido supera outras técnicas de redução da resolução, conforme demonstrado no imagens de exemplo. Ele alcança um equilíbrio entre manter a nitidez e minimizar o ruído, mesmo com várias etapas de redução de escala.