Recortar imagem

O que é um recortador de imagens?#

Recortar parece a operação de imagem mais simples — manter um retângulo, jogar o resto fora. No momento em que você precisa fazer isso direito, porém, toda uma série de questões se acumula: o recorte mantém uma proporção fixa para um slot de miniatura ou banner, posso corrigir um horizonte inclinado antes, a exportação será pequena o suficiente para enviar, e alguma disso sai do meu dispositivo? Esta página é um estúdio completo de recorte que responde às quatro no navegador.

Você arrasta uma imagem, desenha uma caixa de seleção sobre ela (ou pega uma de suas oito alças para redimensionar), opcionalmente gira ou espelha todo o quadro, bloqueia a seleção em uma proporção como 1:1 ou 16:9 e exporta a região recortada como PNG, JPEG ou WebP numa qualidade que você escolhe. Tudo roda na API de Canvas dentro desta aba — o arquivo original é lido localmente e o resultado é recodificado localmente, então nada é enviado.

Como usar#

1. Arraste uma imagem para a zona de soltar tracejada (ou clique nela para escolher um arquivo). O editor aparece, substituindo a zona de soltar.
2. Use a barra de ferramentas acima da pré-visualização para transformar todo o quadro antes de recortar:
   • Girar 90° gira a imagem 90° no sentido horário a cada clique. A seleção de recorte é rastreada no espaço de coordenadas girado, então sempre se alinha com o que você vê.
   • Espelhar H / Espelhar V espelham o quadro horizontal ou verticalmente.
3. Escolha uma Proporção no menu suspenso: Livre (arraste qualquer retângulo), 1:1 (avatar / perfil), 4:3 ou 16:9 (papel de parede / capa de vídeo). Com uma proporção travada, a caixa mantém essa forma conforme você arrasta — as alças de canto crescem para alcançar o cursor; as alças de borda derivam o lado perpendicular automaticamente.
4. Arraste o corpo da caixa para movê-la; arraste qualquer uma das oito alças para redimensionar. Mouse e toque funcionam.
5. Defina as opções de exportação abaixo da pré-visualização:
   • Formato de saída — JPEG (menor, com perdas), WebP (pequeno, moderno) ou PNG (sem perdas; o controle de qualidade fica desativado porque o PNG não tem ajuste de qualidade).
   • Lado máximo de saída — um número em pixels; o lado mais longo do recorte é limitado a esse valor, preservando a proporção. Deixe em 0 para manter a resolução completa do recorte.
   • Qualidade — 5–100, usado apenas por JPEG e WebP. 92 é um padrão sensato; reduza para 80 em miniaturas.
6. Observe a leitura ao lado de Baixar: ela mostra o tamanho da seleção e o tamanho resultante da saída, por exemplo 1500×1500 → 800×800 quando uma seleção 1:1 é limitada a 800.
7. Clique em Baixar para salvar. Use Redefinir recorte para limpar a seleção de volta ao padrão centralizado.

Principais funcionalidades#

• Redimensionamento com proporção travada que de fato parece certo. As alças de canto crescem para alcançar o cursor em ambos os eixos; as alças de borda ajustam apenas o eixo arrastado e recalculam o outro a partir da proporção. Sem distorção acidental.
• Seleção consciente das transformações. Rotação e espelhamento são aplicados uma vez a uma tela offscreen, e a caixa de recorte vive naquele espaço transformado, então o que você seleciona é exatamente o que exporta — sem divergência entre pré-visualização e saída.
• Três formatos com qualidade honesta. PNG é marcado como sem perdas e desativa o controle em vez de ignorá-lo silenciosamente. JPEG e WebP expõem um valor real de qualidade alimentado direto no codificador.
• Limite opcional de saída. Defina uma dimensão máxima e o recorte é reduzido preservando a proporção — útil para avatares, imagens Open Graph ou limites de upload — sem você fazer a conta.
• Leitura ao vivo antes/depois. As dimensões da seleção e as dimensões finais da saída ficam lado a lado, então um limite ou mudança de proporção é visível antes de você comprometer.
• 100% local. A imagem é decodificada pelo navegador e recodificada pelo navegador. Não há endpoint de envio.

Exemplo prático#

Você tem uma foto panorâmica de 4000×3000 e precisa de uma miniatura de banner 16:9 cujo lado maior seja 1280px. Carregue a foto, defina Proporção como 16:9 e arraste a seleção sobre o horizonte. Como a proporção está travada, a caixa se encaixa num retângulo 16:9; suponha que a seleção se fixe em 4000×2250 em pixels de origem. Agora digite 1280 em Lado máximo de saída. A leitura atualiza para:

crop size  4000 × 2250  →  1280 × 720

Escolha Formato de saída: JPEG, deixe Qualidade em 92 e clique em Baixar. Você obtém um JPEG 1280×720 com cerca de 180–280 KiB dependendo da cena — uma fração do arquivo original de vários megabytes, com a proporção exata que um banner de destaque precisa e sem faixas pretas. O mesmo fluxo com 1:1 e Lado máximo de saída 512 produz uma foto de perfil pronta para upload.

FAQ#

A seleção não fica menor que um certo tamanho — por quê?#

Há uma borda mínima de 8 pixels, imposta para que as alças continuem fáceis de agarrar e a exportação nunca seja uma lasca degenerada. Se você precisa de um recorte extremamente apertado, não amplie e recorte uma região minúscula — recorte uma área maior e depois reduza com Lado máximo de saída.

Travei 16:9, mas a caixa mudou de tamanho quando arrastei perto da borda.#

Isso é a fixação de limites mantendo a caixa totalmente dentro da imagem. Quando uma caixa com proporção travada ultrapassaria uma borda, o lado mais curto é reduzido para que a proporção sobreviva dentro do espaço disponível. Mova a caixa em direção ao centro primeiro, depois redimensione.

Devo exportar JPEG ou WebP?#

WebP na mesma qualidade é tipicamente 25–35% menor que JPEG e hoje é suportado em todos os lugares que importam. Use JPEG apenas quando algum pipeline legado, mais à frente, rejeita WebP. Use PNG quando o recorte é um logo, uma captura de tela de UI ou qualquer coisa com bordas nítidas e cores chapadas, onde artefatos com perdas ficariam visíveis.

Recortar reduz o tamanho do arquivo?#

Pode, de duas formas: menos área significa menos pixels para codificar, e o Lado máximo de saída pode reduzir ainda mais em cima disso. Mas um recorte de 200×200 de uma foto com ruído na qualidade 100 ainda pode ser maior que a imagem inteira na qualidade 80 — o controle de Qualidade é a verdadeira alavanca para tamanho com perdas.