Redimensionar imagens _

Como funciona o redimensionamento de imagens no navegador

Cada redimensionamento é um pipeline curto que corre inteiramente em JavaScript. Nenhuma biblioteca de codec é descarregada e nenhum servidor está envolvido. A própria Canvas API do navegador descodifica o ficheiro, redesenha-o no tamanho alvo e recodifica-o em memória, depois entrega-lhe um Blob que a página pode pré-visualizar ou comprimir em ZIP. Como cada passo vive dentro da sandbox da aba, os ficheiros originais nunca chegam à rede.

1. Lê cada ficheiro carregado como Blob e cria um URL de objeto para que o navegador possa descodificá-lo localmente, sem copiar bytes para um servidor nem escrevê-los em disco.
2. Calcula as dimensões alvo a partir do modo escolhido — um limite do lado mais longo, uma largura e altura exatas, ou uma escala percentual. O bloqueio de proporção mantém as proporções corretas quando edita um único campo.
3. Cria um Canvas fora do ecrã com o tamanho alvo e chama ctx.drawImage(source, 0, 0, width, height) para redesenhar os píxeis descodificados. O navegador trata da interpolação que suaviza o resultado escalado.
4. Chama canvas.toBlob para recodificar no formato de origem. PNG mantém-se sem perdas, JPEG e WebP recodificam com alta qualidade. Depois a página mostra um cartão antes/depois e oferece um download por imagem ou um único ZIP construído em memória com fflate.

Porquê redimensionar imagens?

• Imagens sobredimensionadas são a causa mais comum de páginas lentas. Uma foto de telemóvel de 4000×3000 inserida diretamente num layout de 600 píxeis de largura envia aproximadamente 40 vezes mais píxeis do que o ecrã pode mostrar. Limitar o lado mais longo a 1600 px antes do upload corta drasticamente o peso da página e melhora o LCP dos Core Web Vitals.
• Os formulários de upload impõem dimensões rígidas. Espaços de avatar, portais de fotos de identidade, anúncios em marketplaces e cartões OG para redes sociais exigem tamanhos exatos em píxeis: 1200×630 para uma pré-visualização Open Graph, 512×512 para um ícone de app, 150×150 para uma miniatura. Acertar no número certo evita o ciclo de rejeições.
• Clientes de e-mail e de chat recomprimem silenciosamente qualquer imagem grande, o que pode destruir um screenshot limpo. Redimensionar para uma largura razoável você mesmo mantém o resultado previsível em vez de o deixar a cargo do pipeline com perdas de outro.
• A consistência em lote é importante para galerias e catálogos. Passar uma pasta de fotos de tamanhos variados por um único alvo de 800×800 faz com que cada cartão se alinhe na grelha, sem imagem gigante a quebrar o layout.

Aplicações comuns

O redimensionamento surge sempre que as dimensões de origem e as expetativas do destino não coincidem. Três padrões aparecem repetidamente.

• Preparar fotos de produtos para uma loja Shopify ou WooCommerce. Uma pasta de originais de câmara de 4000 píxeis é limitada a um lado mais longo de 1600 px para que a loja carregue rapidamente, mantendo a proporção intacta para que nada pareça esticado.
• Gerar ativos para redes sociais e apps a partir de um ficheiro mestre. Definir um 1200×630 exato para o cartão Open Graph, depois 512×512 para um ícone de app, exportando cada um em dois cliques sem abrir um editor pesado.
• Reduzir um lote de screenshots de QA ou suporte antes de os anexar a um ticket. Escalar uma pasta de 50 imagens para 50% tipicamente reduz o tamanho do arquivo em aproximadamente três quartos antes de ir para o bug tracker.

Um exemplo prático: foto de 4000 px para imagem web de 1600 px

Uma foto de 4000×3000 diretamente do telemóvel é uma carga comum que é muito maior do que qualquer layout web necessita. É um bom referencial para o que o redimensionamento poupa.

Solte a foto na zona de carregamento, deixe o modo em Limitar lado mais longo e defina o valor para 1600. A pipeline Canvas redesenha a imagem a 1600×1200 com a proporção preservada, depois recodifica-a no formato original. O cartão de saída mostra as novas dimensões e o tamanho do ficheiro, que para um JPEG típico desce de vários megabytes para algumas centenas de kilobytes. Clique em Descarregar no cartão para obter o ficheiro individual, ou em Descarregar .zip se redimensionou várias imagens numa só passagem. O ciclo completo, de soltar a descarregar, corre em fração de segundo e usa zero largura de banda depois de a própria página carregar.

Que modos de redimensionamento estão disponíveis?

Três. Limitar lado mais longo limita o maior entre a largura ou a altura a um valor em píxeis e escala o outro lado para corresponder — é o padrão seguro porque nunca distorce. Largura × altura exatas permite escrever ambos os números, com um bloqueio de proporção que recalcula o segundo campo a partir da proporção de origem ao editar o primeiro — desative o bloqueio quando um formulário exija um tamanho exato não proporcional. Escalar por percentagem multiplica ambas as dimensões por um único fator, útil para reduzir a metade ou duplicar um lote inteiro de uma vez. Seis predefinições de um clique (de 1920×1080 até uma miniatura de 150×150) cobrem os alvos mais comuns.

Isto acontece no meu dispositivo?

Sim, totalmente. A página usa a Canvas API nativa do navegador e a Web File API para descodificar, redesenhar e recodificar cada imagem em memória. Nenhum dado de imagem é enviado para um servidor, não há upload temporário e não há ida e volta à nuvem. Pode verificar: abra as DevTools, vá ao painel Network e execute um redimensionamento. Os únicos pedidos de saída que verá são o carregamento inicial da página e as chamadas de anúncios. Nada em forma de imagem sai da aba, o que torna isto seguro para documentos de identidade digitalizados, imagens médicas e outro material que nunca quereria enviar.

O redimensionamento vai reduzir a qualidade?

Encolher uma imagem (downscaling) fica excelente — o navegador faz a média dos píxeis de origem em menos píxeis, por isso o detalhe mantém-se nítido e o ficheiro fica muito mais pequeno. Ampliar além da resolução de origem (upscaling) não pode inventar detalhe que nunca foi capturado, por isso uma imagem pequena escalada para cima ficará suave; esse é um limite de qualquer redimensionador, não deste especificamente. A saída mantém o formato de origem: PNG mantém-se sem perdas, enquanto JPEG e WebP recodificam com uma definição de alta qualidade para que a diferença visual do original seja difícil de notar.

Que formatos de ficheiro suporta?

Na entrada, é aceite qualquer formato que o navegador possa descodificar: PNG, JPEG, WebP, GIF e BMP cobrem quase todos os ficheiros que um telemóvel, câmara ou ferramenta de screenshot produz. A saída preserva o formato de origem onde o encoder Canvas o suporta — PNG, JPEG e WebP funcionam diretamente. GIF e BMP, que a Canvas API pode descodificar mas não recodificar, são guardados como PNG sem perdas. O nome do ficheiro redimensionado inclui as novas dimensões (por exemplo foto-1600x1200.jpg) para que um lote seja fácil de ordenar.

Solte as suas imagens, escolha um tamanho, redimensione. Tudo corre na sua aba. Sem upload, sem conta, sem esperar numa fila de servidor.