Dicas para redimensionamento de imagens em seu site.

Proporção da imagem é a relação proporcional entre a largura e a altura de uma imagem. Essencialmente, ela descreve a forma da imagem.

A proporção da imagem é escrita como uma fórmula de largura e altura, tal como 3:2.

Uma imagem quadrada, por exemplo, tem a proporção de 1:1, pois a altura e a largura são as mesmas. A imagem pode ter 500 px × 500 px ou 1.500 px × 1.500 px - a proporção continua sendo 1:1.

Outro exemplo: uma imagem em estilo retrato pode ter uma proporção de 2:3. Nesse caso, a altura é 1,5 vez maior do que a largura. Portanto, a imagem pode ter 500 px × 750 px, 1.500 px × 2.250 px etc.

Assistir a um vídeo

Proporção da imagem no Squarespace

Muitas opções de estilos deixam você escolher diferentes proporções para cada tipo de imagem, como a imagem em destaque da publicação do blog, imagens de galeria ou imagens de um produto.

• Por exemplo: se você escolher uma proporção de 3:2 para as imagens em destaque das publicações do blog, todas as imagens em destaque das publicações na sua página do blog serão recortadas nesse formato.
• Como as imagens são crescem ou diminuem para se ajustarem a browser de diferentes larguras, elas não têm uma dimensão exata (como 750 px × 500 px), mas sempre terão a mesma forma.
• Comece com imagens com a mesma proporção para prever como elas serão recortadas.
• Para alterar a altura de alguns blocos de imagem, use a alça de recorte. Saiba mais sobre como recortar as imagens em "Solucionando problemas no recorte".

As opções exatas de proporção disponíveis dependem da versão e do template. Veja um exemplo da página do blog no template Brine:

Alguns ajustes de estilo dão a opção de ignorar a proporção da imagem. Nesse caso, as imagens mantêm a forma original. Por exemplo: na página do blog do template Skye, você pode escolher Recorte de imagem: nenhum.

Recorte de acordo com a proporção da imagem

Além de usar as opções integradas de estilos, recomendamos recortar a imagem manualmente em uma determinada proporção. Por exemplo: se você usa imagens de um produto com a mesma proporção, elas serão recortadas da mesma maneira no site.

Opção 1 - recorte em uma forma predefinida

Use o editor de imagens integrado para recortar a imagem de uma maneira específica. Após abrir o editor, use a ferramenta "Recortar" para escolher uma proporção predefinida da imagem.

Dica: se preferir fazer isso antes de carregar a imagem, algumas ferramentas de terceiros oferecem opções de proporções de imagem predefinidas.

Opção 2 - dimensões personalizadas

Para recortar imagens em uma proporção personalizada não oferecida pelo nosso editor de imagens integrado, use um editor externo.

Como as imagens não precisam ter as mesmas dimensões para ter a mesma proporção, é melhor recortá-las de acordo com uma proporção específica do que tentar usar às dimensões exatas. Para um melhor resultado, recorte o lado mais curto com base no lado mais longo.

• Por exemplo: se a imagem tem 1.500 px × 1.200 px, e você quer uma proporção de 3:1, recorte o lado mais curto para deixar a imagem com 1.500 px × 500 px.
• Não amplie o lado mais longo; isso pode borrar a imagem.

Para descobrir o comprimento que o lado mais curto precisa ter, use uma calculadora de proporção da imagem como esta (atenção: esse app é externo e foge do escopo de suporte do Squarespace).

1. Encontre as dimensões da imagem no seu computador.
2. Na calculadora de proporção da imagem, digite W1 e H1 à esquerda para identificar a proporção atual.
3. Ajuste o lado mais curto até encontrar a proporção desejada.

Banner da página

O banner da página não têm proporções ou dimensões predefinidas. Isso ocorre porque ele se estiva e muda de forma para se ajustar a browsers variados. Lembre-se:

• Antes de fazer upload de uma imagem para o banner, siga nossas dicas de formatação para a imagem do banner.
• Uma boa ideia é usar o nosso editor de imagens integrado para recortar a imagem. Se precisar de ajuda para recortar o banner, confira "Solucionando problemas no recorte".
• A maioria dos templates tem a opção de alterar o tamanho do banner, incluindo a altura.
• Para banners com altura fixa, como nos templates Montauk ou Skye, deixe todas as imagens do banner com a mesma proporção para ficar com um visual uniforme.

Proporção das imagens do produto

É importante deixar as imagens do seu produto atraentes para potenciais clientes. Para isso, você pode fixar a proporção das imagens do produto nas páginas da loja e nas páginas de detalhes do produto. Para saber como ajustar o estilo das imagens do produto, confira "Imagens do produto".

Se as imagens do produto aparecerem recortadas, confira "Solucionando problemas no recorte".

Proporção da imagem para vídeos

Nos vídeos que você carrega diretamente para o seu site, a proporção do vídeo corresponde à proporção do arquivo carregado. No reprodutor, a maioria dos vídeos carregados aparece com proporção de 16:9; portanto, podem aparecer barras pretas ou espaços em vazios na lateral dos vídeos com outras proporções. O vídeo carregado para o fundo da seção é recortado e ampliado para preencher o tamanho do fundo.

Nos vídeos incorporados, a miniatura do serviço de hospedagem do vídeo determina a proporção da imagem do vídeo. Se você colocar um bloco de vídeo em linhas ou usar uma galeria em grade, as linhas poderão ficar desiguais.

Se você usar um bloco de galeria ou página de galeria (somente versão 7.0), e os vídeos não aparecerem corretamente, altere os estilos do site:

• No bloco de galeria, ative Recortar imagens para deixar os vídeos com uma proporção uniforme.
• Na página de galeria, deixe a proporção da imagem em qualquer configuração, exceto Automático.

Proporção da imagem em porcentagem

Na galeria em grade do Índice na família de templates Brine, a proporção da imagem aparece como uma porcentagem que pode ser ajustada com um controle.

• O controle mostra valores de 0 a 160.
• Com o valor 100, a imagem fica quadrada.
• Valores abaixo de 100 deixam a imagem com orientação de paisagem.
• Valores acima de 100 deixam a imagem com orientação de retrato.

Para criar uma proporção exata, divida a altura pela largura. Por exemplo:

• Proporção da imagem 2:3: 3 ÷ 2 = 1,5. Portanto, arraste o controle para 150.
• Proporção da imagem 3:2: 2 ÷ 3 = 0,667. Portanto, digite 66,7 ao lado do controle.

Exemplos de proporção da imagem

Confira algumas proporções comuns.