Carregue uma foto de paisagem para um post no Instagram, uma foto alta de telefone como uma imagem de link do LinkedIn ou uma captura de tela para X, e a plataforma decide silenciosamente que parte dela as pessoas veem Ele se encaixa na imagem em uma das poucas formas fixas e apara o que não cabe, e apara do meio para fora Se o assunto estiver no meio, isso funciona Se o assunto for um rosto perto da parte superior do quadro, um produto à esquerda ou uma manchete ao longo da parte inferior, a plataforma o aflora.
A correção é cortar a imagem você mesmo, para a forma exata que a ração quer, e escolher qual parte sobrevive Este guia cobre os tamanhos e proporções que as plataformas principais exibem, a geometria de uma cultura, como escolher um ponto focal, o que o corte faz com a qualidade e o tamanho do arquivo, e como evitar o resultado suave e ampliado que pega as pessoas Os exemplos trabalhados usam o livre Cortador de imagem de mídia social no Toolz, que faz todo o trabalho do lado do cliente.
tl;dr: Para cortar uma imagem para mídias sociais, escolha a proporção alvo para a plataforma e posicionamento (por exemplo 1080 x 1350 para uma postagem de retrato do Instagram, 1200 x 630 para uma visualização de link, 1600 x 900 para uma imagem de postagem X), pegue a maior região dessa forma que cabe dentro de sua foto, ancore-a na parte que importa e, em seguida, dimensione-a para o tamanho exato do pixel Uma foto de telefone 4032 x 3024 cortada para 4:5 mantém 60% de sua área; cortada para 16:9, mantém 75%. A cortador de imagem de mídia social faz isso em uma tela do seu navegador com uma grade focal de nove pontos, gratuita, sem inscrição, sem upload.
O que faz um cortador de imagens de mídia social?
Um cortador de imagem de mídia social corta uma foto para a proporção que uma plataforma exibe e a dimensiona para essa plataforma e tamanho de pixel no 39; portanto, a plataforma não tem mais nada para cortar. Duas operações separadas acontecem e ajudam a mantê-las separadas:
- Colheita. Escolha um retângulo dentro do original que tenha a forma alvo Os pixels fora dele são descartados Os pixels dentro dele são intocados.
- Escala. Redimensione esse retângulo para as dimensões alvo, como 1080 x 1350. é aqui que a qualidade pode mudar, porque a imagem é reamostrada.
Um editor de imagens genérico pode fazer as duas coisas, mas faz você encontrar a proporção, desenhar a caixa à mão e lembrar o tamanho da saída Um cropper dedicado conhece os tamanhos, desenha a maior caixa válida automaticamente e permite movê-la com um clique A versão do Toolz também informa qual o custo da colheita antes de baixar: quanto da área original sobrevive e se o resultado foi reduzido ou aumentado.
Quais tamanhos de imagem as principais plataformas usam?
Cada rede renderiza imagens de alimentação em um pequeno conjunto de proporções, e qualquer outra coisa é ajustada ao mais próximo A tabela lista os 15 tamanhos de destino incorporados ao cortador, que refletem o que cada plataforma exibe atualmente sem recortar As plataformas revisam estes de tempos em tempos, portanto, trate-os como orientação atual, em vez de uma especificação permanente.
| plataforma | Colocação | Tamanho do pixel | proporção | onde é usado |
|---|---|---|---|---|
| Poste quadrado | 1080x1080 | 1:1 | O clássico feed post | |
| Retrato post | 1080 x 1350 | 4:5 | O mais alto que o feed permite, a maior parte do espaço da tela | |
| Posto paisagístico | 1080x566 | 1.91:1 | O mais amplo que o feed aceita | |
| História ou Reel | 1080x1920 | 9:16 | Tela cheia; mantenha o texto livre dos 250 px superiores e inferiores | |
| Fios | Poste quadrado | 1080x1080 | 1:1 | Mostrado desencapado na linha do tempo |
| Fios | Retrato post | 1080 x 1350 | 4:5 | Telas mais altas são exibidas sem recorte |
| Bluesky | Imagem feed | 1200x630 | 1,90:1 | Imagens amplas são puxadas em direção a 1,91:1 |
| Bluesky | Imagem quadrada | 1080x1080 | 1:1 | Mostrado descalço |
| X | Postar imagem | 1600 x 900 | 16:9 | Mostrado na íntegra sem toque |
| X | Cartão sumário | 1200x628 | 1.91:1 | Cartão de visualização de link grande |
| Postagem de alimentação | 1200x630 | 1,90:1 | Também o tamanho Open Graph | |
| Postagem de alimentação | 1200x627 | 1.91:1 | Padrão de alimentação do LinkedIn | |
| YouTube | miniatura | 1280x720 | 16:9 | Mínimo 1280 de largura para o leitor HD |
| Pin padrão | 1000 x 1500 | 2:3 | Os pinos mais altos são rebaixados | |
| Open Graph | Visualização link | 1200x630 | 1,90:1 | Cartão padrão a maioria dos sites e aplicativos de bate-papo render |
Duas coisas se destacam. O "1,91:1" família (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) tem um formato com arredondamento ligeiramente diferente e é o formato de quase todas as visualizações de links na web. Ele remonta ao Open Graph protocolo, que define o og:image os sites de tags usam para fornecer uma imagem de visualização E os formatos altos diferem: Instagram e Threads param às 4:5, Pinterest vai às 2:3 e Stories usa 9:16. uma safra não serve a todos eles.
Se você também estiver definindo a imagem de visualização de uma página da web, o Open Graph ferramenta de visualização mostra como será a aparência dessa imagem de 1200 x 630 depois de compartilhada.
Como é calculado o retângulo de corte?
A cultura é o maior retângulo da forma alvo que se encaixa dentro da imagem original Se a imagem é mais larga do que a forma alvo, a cultura mantém a altura total e apara os lados Se for mais alto, a cultura mantém a largura total e apara a parte superior e inferior.
Em números, para uma fonte de largura W e altura H e uma razão alvo R (largura dividida pela altura):
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
Exemplo 1 trabalhado: uma foto de telefone 4032 x 3024 para uma postagem de retrato no Instagram.
- Proporção de fonte: 4032 /3024 = 1,333. Proporção de meta: 1080 /1350 = 0,8.
- A fonte é mais larga, então a colheita mantém a altura total de 3.024 px.
- Largura da colheita: 3024 x 0,8 = 2419,2 px.
- Área mantida: 2.419,2 /4.032 = 0,60, então 60% da foto sobreviveu e 40% é cortada nas laterais.
- A colheita é então reduzida de cerca de 2.419 x 3.024 para 1.080 x 1.350.
Exemplo 2 trabalhado: a mesma foto para uma imagem de postagem X.
- Relação alvo: 1600 /900 = 1,778. a relação fonte 1,333 é menor, então a colheita mantém a largura total de 4032 px.
- Altura da colheita: 4032 /1,778 = 2268 px.
- Área mantida: 2.268 /3.024 = 0,75, então 75% sobreviveram, com 756 px aparados da altura.
Exemplo 3 trabalhado: a mesma foto para um pino do Pinterest.
- Proporção alvo: 1000 /1500 = 0,667. Largura da colheita: 3024 x 0,667 = 2016 px.
- Área mantida: 2016 /4032 = 50%. Metade da foto vai.
Estas percentagens são o que a ferramenta reporta como & quot; Mantendo 60% do original", e vale a pena lê-las antes de você cometer Uma colheita que mantém metade do quadro é uma decisão de composição, não uma etapa de formatação.
Como você escolhe que parte da imagem manter?
Escolha o ponto focal que segura o assunto, e lembre-se que ele só importa ao longo do eixo que está sendo aparado A grade de nove pontos cropper' s define um foco de 0, 0,5 ou 1 em cada eixo, que ancora o corte à borda esquerda, ao centro ou à borda direita horizontalmente, e ao topo, ao meio ou à parte inferior verticalmente.
A posição é trabalhada assim, depois fixada para que o corte nunca saia da imagem:
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
No exemplo 1 trabalhado, apenas os lados são aparados, portanto apenas a escolha horizontal muda alguma coisa:
| Coluna âncora | Colheita x | Mantiveram colunas da foto |
|---|---|---|
| Esquerda | 0 | 0 a 2419 |
| Centro | 806,4 | 806 a 3226 |
| Direita | 1612,8 | 1613 a 4032 |
As linhas superior, média e inferior dão resultados idênticos para aquela cultura, porque a altura total já está mantida É uma verificação útil quando um clique parece não fazer nada: a cultura só está livre para se mover em uma direção.
Exemplo 4 trabalhado: uma foto de telefone retrato como uma imagem do LinkedIn. Uma foto 3024 x 4032 cortada para 1200 x 627 (proporção 1,914) mantém a largura total e uma tira 3024 /1,914 = 1580 px de altura Isso é 1580 /4032 = 39% da foto Com a âncora central padrão a tira vai de y = 1226 a y = 2806, que em um retrato típico de cabeça e ombros é o peito, não o rosto Clicando no centro-superior move a tira para y = 0 a 1580 e mantém a cabeça Este caso é a razão pela qual a grade focal existe: centralização é um padrão razoável e a resposta errada para a maioria dos retratos transformados em banners.
Algumas regras práticas para escolher uma âncora:
- Pessoas: linha superior, já que os rostos geralmente ficam no terço superior de uma moldura.
- Manchetes ou legendas incorporadas em um gráfico: a linha ou coluna onde o texto está.
- Produtos e assuntos descentralizados: o canto ou lado correspondente.
- Cenas simétricas e logotipos centrados: deixe-o no centro.
O corte reduzirá a qualidade da imagem?
O corte por si só não reduz a qualidade, mas a etapa de dimensionamento pode Descartar pixels fora do quadro deixa os pixels restantes exatamente como estavam O redimensionamento para o tamanho alvo é onde o resultado pode melhorar ou degradar.
A redução de escala é segura e muitas vezes faz uma foto parecer mais nítida, uma vez que vários pixels de origem são calculados em média em cada pixel de saída O cortador desenha com a configuração de alta qualidade de suavização do canvas' s, usando o drawImage método definido no Especificação de tela HTML WHATWG. A ampliação não pode adicionar detalhes que nunca foram capturados A saída fica maior, mas não mais nítida, e as bordas parecem suaves.
Exemplo 5 trabalhado: uma captura de tela aprimorada. Uma captura de tela de 800 x 600 cortada para uma imagem de postagem X mantém a largura total de 800 px e uma faixa de 450 px de altura, 75% da área Essa região de 800 x 450 é então ampliada para 1600 x 900, o dobro do seu tamanho em cada direção A ferramenta diz isso na visualização: & quot; Upscaled - a fonte é menor que o alvo, portanto, ficará suave."
O teste rápido é comparar a largura da colheita com a largura do alvo Se a colheita for mais larga que o alvo, a imagem é reduzida e ficará bem Se for mais estreita, está a ser ampliada Para fotos, uma câmara telefónica tem quase sempre pixels de sobra Capturas de ecrã, imagens antigas e imagens guardadas de outros posts são os casos habituais de upscaling, e a única correção real é uma fonte maior.
Você deve exportar PNG, JPEG ou WebP?
Exporte JPEG para fotografias, PNG para capturas de tela, texto e gráficos com bordas rígidas e WebP quando quiser o menor arquivo e souber que o destino o aceita O padrão do cortador é PNG porque não tem perdas e oferece todos os três.
| formato | Compressão | melhor para | cuidado com |
|---|---|---|---|
| png | Sem perdas, conforme especificado pelo Padrão PNG W3C | Capturas de tela, UI, texto, logotipos, transparência | Arquivos grandes para fotografias |
| jpeg | Perdido, o método em ITU-T T.81 | Fotografias | Halos em torno de texto e linhas nítidas; sem transparência |
| WebP | Perdido ou sem perdas, descrito em Documentação do WebP do Google' | Menores arquivos com qualidade semelhante | Algumas ferramentas mais antigas não conseguem abri-lo |
As exportações JPEG e WebP usam uma configuração de qualidade de 0,92 no codificador de tela, que é alta o suficiente para que os artefatos de compactação sejam difíceis de ver nas fotografias. O arquivo baixado leva o nome do original mais a predefinição, portanto team.jpg recortado para uma postagem de retrato no Instagram enquanto JPEG salva como team-ig-portrait.jpeg.
A maioria das plataformas recodifica o que você carrega de qualquer maneira, para que uma PNG sem perdas de uma fotografia não sobreviva como PNG uma vez postado Ele adiciona principalmente o tamanho do upload Para escolher formatos com mais profundidade, o Guia do conversor de formato de imagem compara-os em mais casos de uso.
Passo a passo: recortar uma imagem com a ferramenta
o cortador de imagem para mídias sociais tem quatro etapas, e a tela de visualização é a mesma tela que produz o arquivo, então o que você aprova é o que você baixa.
- Adicionar a imagem. Largue um ficheiro, carregue para escolher um, ou cole uma imagem da área de transferência com Cmd+V ou Ctrl+V. O ouvinte de colagem está na página inteira, pelo que uma imagem copiada para a área de transferência entra directamente sem ser gravada primeiro A zona de entrega aceita PNG, JPEG, WebP, GIF ou AVIF, ou qualquer outra coisa que o seu navegador possa descodificar.
- Escolha o tamanho alvo. O menu Tamanho do alvo agrupa as 15 predefinições por plataforma, cada uma rotulada com o seu tamanho e proporção de pixels, e mostra uma nota de uma linha sobre onde o tamanho é usado O padrão é o post retrato do Instagram.
- Escolha o que manter. Clique em um dos nove pontos da grade Manter. A visualização é redesenhada imediatamente.
- Verifique os números e faça o download. Embaixo da visualização, leia a linha que indica a porcentagem mantida, as dimensões do corte e se o resultado é reduzido ou aumentado Escolha PNG, JPEG ou WebP e clique em Baixar.
Tudo é executado em uma tela HTML na guia do navegador A imagem não é carregada, armazenada ou registrada, e a página continua trabalhando com a rede desligada Como todas as ferramentas do site, a etapa de download verifica um limite de uso diário.
Que erros você pode encontrar?
A maioria dos problemas vem do formato do arquivo ou do tamanho da fonte As mensagens são específicas.
- O & quot; esse ficheiro não é uma imagem." O tipo de arquivo's não começa com
image/, por exemplo um PDF ou um vídeo A mensagem nomeia o ficheiro. - O & quot; essa imagem não pôde ser lida Poderá estar corrompida ou num formato que este navegador não descodifica." O arquivo afirma ser uma imagem, mas o navegador não pode decodificá-lo O caso comum é uma foto do iPhone HEIC em um navegador sem suporte HEIC Converta-o para JPG primeiro com o conversor de formato de imagem.
- O & quot; Upscaled - a fonte é menor que o alvo, por isso irá parecer suave. & quot; Não é um erro, um aviso Use um original maior se você tiver um.
- A grade focal parece não fazer nada. A colheita é aparada apenas ao longo de um eixo, portanto apenas as âncoras ao longo desse eixo a movem.
- Limite diário atingido. O subsídio de utilização diária gratuita foi utilizado.
Vale a pena conhecer mais um efeito Como a saída é recodificada a partir de pixels da tela, o arquivo baixado não carrega metadados EXIF: sem configurações de câmera, data de captura ou localização GPS. Para fotos postadas publicamente, isso geralmente é um ganho de privacidade Guia removedor EXIF explica o que esses metadados contêm e por que são importantes ao compartilhar fotos.
Cortar, redimensionar ou caber em um fundo?
Cortar é uma das três maneiras de colocar uma imagem em uma forma fixa, e a correta depende se você pode perder alguma imagem.
| aproximar-se | O que acontece | Quando usá-lo | ferramenta |
|---|---|---|---|
| Corte para a proporção | Apara as bordas, mantém a forma exata | O assunto é uma parte do quadro e as bordas podem ir | Cortador de imagem de mídia social |
| Encaixe em um fosco | Encolhe toda a imagem em um fundo colorido ou desfocado | Nada pode ser cortado, como obras de arte ou uma foto de grupo | Gerador fosco |
| Redimensionar apenas | Muda as dimensões do pixel, mantém a proporção original | A proporção já está certa ou a plataforma aceita qualquer formato | Redimensionamento da imagem |
| Dividir em slides | Corta uma imagem ampla em slides consecutivos do carrossel | Um panorama largo demais para um post | Gerador de rolagem carrossel |
Se o problema for o tamanho do arquivo e não a forma, o guia de redimensionamento de imagem cobre a mudança de dimensões sem distorção Quando uma imagem recortada está saindo publicamente e deve levar seu nome, o marcador d'água adiciona um logotipo ou assinatura em um canto ou azulejos em todo o quadro O conjunto completo de ferramentas de imagem para postar vidas no centro de ferramentas de mídia social.
Por que cortar antes de fazer o upload?
Porque a colheita da plataforma é decidida por um software que não pode ver o seu assunto Cada feed renderiza em proporções fixas, e um upload em qualquer outra forma é ajustado automaticamente, geralmente aparando uniformemente de ambos os lados da dimensão longa Algumas plataformas, Bluesky entre elas, aplicam esse corte apenas em exibição na linha do tempo, então a imagem completa existe, mas a maioria das pessoas nunca a vê.
Cortar primeiro move três decisões de volta para você: qual parte do quadro é visível, quão nítido é o resultado no tamanho exato da exibição e quão grande é o arquivo. Leva alguns segundos por imagem e é mais importante exatamente para as imagens com as quais as pessoas se preocupam: retratos, fotos de produtos e gráficos com texto próximo a uma borda. Para aqueles, corte a imagem para o tamanho da plataforma com o ponto focal sobre o assunto, livre, sem inscrição, e carregar um arquivo o feed não tem motivos para alterar.
