Redimensionador e Cortador de Imagens

Imagens digitais são grades de pixels — uma imagem de 1920×1080 tem mais de 2 milhões de pixels individuais. Redimensionar altera o número de pixels nesta grade. Redução de escala (diminuir dimensões) exige mesclar múltiplos pixels em menos pixels, um processo chamado decimação ou subamostragem. Aumento de escala (aumentar dimensões) exige interpolar novos pixels a partir dos existentes, um processo chamado interpolação ou superamostragem. A qualidade do resultado depende fortemente do algoritmo de reamostragem usado.

A API Canvas do navegador usa a reamostragem de imagem integrada do navegador, que é tipicamente interpolação bilinear ou bicúbica. A interpolação bilinear calcula cada novo pixel como uma média ponderada dos 4 pixels originais mais próximos. A interpolação bicúbica usa uma vizinhança de 4×4 e produz resultados mais suaves, especialmente para aumento de escala. A propriedade imageSmoothingQuality do canvas pode ser definida como 'low', 'medium' ou 'high' — nossa ferramenta usa 'high' para qualidade máxima. Para imagens fotográficas, isso produz resultados comparáveis a software dedicado de edição de imagens.

Ao redimensionar, é importante manter a proporção (a razão entre largura e altura) para evitar distorção. Se você alterar a largura sem alterar proporcionalmente a altura, a imagem parecerá esticada ou comprimida. Nossa ferramenta bloqueia a proporção por padrão — alterar uma dimensão ajusta automaticamente a outra. Para redimensionamento não proporcional (por exemplo, ajustar uma imagem em um contêiner de tamanho fixo), você pode desbloquear a proporção, mas o resultado parecerá distorcido.

Redimensionamento, corte e compressão são três operações distintas que frequentemente são confundidas. Redimensionar altera as dimensões da imagem (contagem de pixels). Cortar remove pixels das bordas para focar em uma região específica. Comprimir reduz o tamanho do arquivo sem alterar as dimensões aplicando algoritmos de compressão com perdas ou sem perdas. Essas operações servem a propósitos diferentes: redimensionar para ajustar dimensões, cortar para composição, comprimir para tamanho de arquivo.

Para otimização web, você tipicamente precisa de todos os três: corte para a proporção desejada, redimensione para as dimensões alvo (por exemplo, 1200×630 para imagens Open Graph) e comprima para reduzir o tamanho do arquivo (alvo < 200 KB para imagens hero). Um erro comum é redimensionar sem comprimir — uma imagem de 4000×3000 redimensionada para 800×600 mas salva como PNG ainda pode ter vários megabytes. Sempre redimensione E comprima (usando formato JPEG ou WebP) para imagens web.