Recorte de imagens no site: como preservar o assunto principal

Para revisar o recorte de uma imagem no site, identifique o que precisa continuar visível e confira cada uso na página publicada. A foto pode aparecer inteira na abertura do artigo e perder o assunto num cartão quadrado. Se o enquadramento corta a informação necessária, ajuste o recorte ou a composição adequada àquele destino, preservando o original.

O guia de imagem para web reúne formatos, dimensões e exportação. Este artigo aprofunda o enquadramento: a diferença entre o arquivo original e a área efetivamente mostrada no layout. A revisão se aplica a capas, cartões e imagens de produto, sem impor uma medida universal para todos os sites.

O que precisa permanecer dentro da área visível?

Defina a função da imagem. Em uma foto de produto, pode ser necessário mostrar a peça inteira ou um detalhe que ajuda a escolher. Em uma cena de trabalho, a relação entre pessoa e objeto pode explicar a ação. Um recorte que mantém o rosto e elimina o objeto pode mudar o sentido da foto.

Registre também os elementos que não podem ser cortados, como uma alça, uma característica do produto ou uma etapa demonstrada. Um ponto de interesse ajuda a orientar o enquadramento, mas um único ponto não representa necessariamente toda a região importante.

Não resolva uma composição inadequada simplesmente comprimindo mais o arquivo. Compressão altera o tamanho e a qualidade da exportação; o recorte altera o que fica visível. A versão pode estar nítida e leve e ainda omitir a informação necessária.

Por que uma imagem horizontal muda num cartão quadrado

Quando o layout precisa preencher uma área de proporção diferente, há escolhas distintas. Ele pode mostrar toda a imagem com espaço restante ou preencher a área e cortar partes. Outra configuração pode distorcer a imagem. O comportamento depende da implementação e deve ser conferido com quem mantém o site.

A documentação da MDN descreve object-fit: o valor cover preserva a proporção e preenche a área, cortando o que excede; contain preserva a imagem inteira dentro dela, podendo deixar espaço. Já fill pode esticar a imagem se as proporções diferirem. São propriedades de apresentação, não instruções para aplicar a mesma regra a todo o site.

Exemplo fictício: um desenho de 1600 × 900 pixels contém uma bolsa perto da borda direita. Para extrair um quadrado de 900 × 900 sem redimensionar, um recorte central retira 350 pixels de cada lateral. A região horizontal visível vai de 350 a 1250 nas coordenadas do desenho. O assunto entre 1300 e 1500 fica fora dessa área.

Origem do exemplo fictício

Desenho de 1600 × 900 pixels. Bolsa perto da borda direita, entre x = 1300 e x = 1500.

Quadrado central

900 × 900 pixels: região horizontal de 350 a 1250. O objeto fica fora do recorte.

Quadrado à direita

900 × 900 pixels: região de 700 a 1600. A bolsa fica inteira dentro do recorte. As contas se referem à origem, sem redimensionamento, e não definem um tamanho universal.

Descrição da figura

O desenho vetorial fictício tem 1600 por 900 pixels. A bolsa ocupa a região horizontal entre 1300 e 1500. Linhas verticais mostram os limites do recorte central: 350 e 1250. Esse recorte quadrado de 900 por 900 não contém a bolsa. O recorte à direita, de 700 a 1600, também mede 900 por 900 e contém a bolsa inteira. As miniaturas são exibidas em tamanhos diferentes para caber na figura, mas as contas se referem à origem, sem mudança de escala. Nenhuma fotografia foi recortada ou testada neste exercício.

Um recorte deslocado para a direita pode usar a região de 700 a 1600, ainda com largura 900. Nesse cenário, a bolsa permanece dentro do quadrado. As medidas são premissas didáticas de um desenho vetorial, sem demonstrar o corte de uma fotografia real ou definir dimensões recomendadas para seu tema.

A diferença total é 1600 − 900 = 700 pixels; no recorte central, metade sai de cada lado: 700 ÷ 2 = 350. Não houve mudança de escala. No site, o navegador também pode redimensionar a imagem, por isso não copie essas coordenadas para uma configuração sem conferir o comportamento real.

Escolha entre deslocar, recompor e mostrar a imagem inteira

A propriedade object-position, documentada pela MDN, controla o alinhamento do conteúdo da imagem dentro da área. Pode participar da solução em uma implementação, mas não cria espaço que não existe no original nem recupera uma parte já removida no arquivo exportado.

Se o recorte quadrado não consegue preservar os dois elementos que explicam a cena, uma nova composição pode ser mais adequada do que insistir no mesmo arquivo. Para diagramas com rótulos, considere texto e elementos responsivos; encolher a arte inteira pode tornar a explicação ilegível.

Confira os usos, e não apenas a biblioteca de mídia

Liste onde a imagem aparece: abertura, listagem de artigos, cartão relacionado e compartilhamento, quando pertinente. Cada um pode usar arquivo, proporção ou configuração próprios. Alterar a imagem destacada não garante que todas as variantes tenham recebido a mesma atualização.

Abra a publicação no computador e no celular. Confirme se a imagem carregou, qual região aparece e se ela mantém o sentido do texto. Imagens carregadas só quando entram na tela precisam ser verificadas na posição de leitura. Uma miniatura na biblioteca não demonstra o resultado público.

Artigo e imagem de origem:
Função e região que precisa continuar visível:
Uso afetado e proporção observada:
Arquivo ou variante exibida:
Problema encontrado e evidência:
Ajuste proposto e responsável:
Computador e celular: resultado observado:
Outros usos que precisam de conferência:
Versão aprovada e original preservado:

Depois de uma mudança, compare o resultado com o objetivo registrado. Não altere o texto alternativo para descrever uma parte que desapareceu e encerrar a revisão: se essa parte era necessária, o problema de apresentação continua. O roteiro de texto alternativo de imagens ajuda a tratar a descrição conforme o uso final.

Perguntas frequentes sobre recorte de imagens

Mais pixels impedem um corte inadequado?

Não. Resolução e enquadramento são decisões diferentes. Um arquivo grande também pode perder o assunto quando a área de exibição usa outra proporção.

Centralizar sempre preserva o assunto?

Não. O elemento importante pode estar perto da borda ou ocupar uma região maior que o recorte. Confira o que fica visível no destino.

Ajustar o ponto de interesse recupera algo cortado no arquivo?

Não. O alinhamento só pode trabalhar com o conteúdo disponível. Preserve o original e prepare outra exportação quando necessário.

Preciso modificar o tema para resolver?

Nem sempre. Pode haver um ajuste de mídia ou uma composição específica. Combine a solução com quem mantém o site e evite alterações globais sem avaliar o efeito nas demais páginas.

Para planejar imagens e recursos coerentes com a leitura, converse conosco sobre a apresentação do seu conteúdo. Podemos ajudar a definir critérios e responsabilidades para a produção e a conferência.