Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Proporções de imagem

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

As proporções de imagem são escritas como uma fórmula de largura e altura, assim: 3:2.

Por exemplo, uma imagem quadrada tem uma proporção de 1:1, pois a altura e a largura são as mesmas. A imagem pode ter 500px × 500px ou 1500px × 1500px, e a proporção da imagem continuaria sendo 1:1.

Outro exemplo: uma imagem em estilo retrato pode ter uma proporção de 2:3. Com essa proporção, a altura é 1,5 vezes maior que a largura. Portanto, a imagem pode ter 500px × 750px, 1500px × 2250px etc.

Proporção da imagem no Squarespace

Muitas opções de estilos permitem escolher proporções diferentes para cada tipo de imagem, como a miniatura da publicação do blog, imagens de galeria ou produtos.

  • Por exemplo, se você escolher uma proporção de 3:2 para as imagens em miniatura de postagens de blog, todas as miniaturas das postagens na sua Página do Blog serão recortadas neste formato.
  • Como as imagens são dimensionadas para cima ou para baixo para se ajustarem a diferentes larguras de navegadores, elas não têm dimensões exatas (como 750px × 500px), mas sempre terão a mesma forma.
  • Começar com imagens que têm a mesma proporção da imagem ajuda a prever como serão recortadas.

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:

brine-blog-example.png

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.

skye-blog-example.png

Recortar de acordo com a proporção da imagem

Além de usar opções integradas de Estilos do Site, 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 seu site.

Opção 1 - Recortar de maneira predefinida

Use o Editor de Imagens interno para recortar imagens de uma maneira específica. Após abrir o editor, use a ferramenta Recortar para escolher proporções de imagem predefinidas.

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 interno, use um editor de terceiros.

Como as imagens não precisam ter as mesmas dimensões para ter a mesma proporção da imagem, é melhor recortá-las de acordo com uma proporção específica do que tentar criar suas dimensões exatas. Para obter melhores resultados, recorte o lado mais curto com base no lado mais longo.

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

Para descobrir o comprimento que o lado mais curto precisa ter, use uma calculadora de proporção da imagem como esta. Observe que é um aplicativo de terceiros e que fica fora 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.

Banners de página

Os banners de página não têm proporções ou dimensões da imagem predefinidas. Isso ocorre porque eles se expandem e mudam de formato para se ajustarem a uma variedade de navegadores.

  • Pode ser útil recortar a imagem para um formato de banner (largo e com altura baixa). Você pode determinar isso "no olho" ao recortar,enquanto recorta, pois não existem dimensões exatas para os templates. Carregar imagens com a mesma proporção ajuda a prever como elas serão recortadas para caber no formato de banner.
  • A maioria dos templates oferece a opção de ajustar a altura do banner.
  • Para banners com altura fixa, como nos templates Montauk ou Skye, garantir que todas as suas imagens da banner tenham a mesma proporção da imagem criará uma aparência uniforme.

Proporções de imagem em porcentagens

Em galerias de grade de índice na família de templates Brine, a proporção da imagem é mostrada como uma porcentagem que pode ser ajustada com um controle deslizante.

  • O controle deslizante mostra valores de 0 a 160.
  • O valor definido em 100 cria imagens quadradas.
  • Valores abaixo de 100 têm orientação de paisagem.
  • Valores acima de 100 têm orientação de retrato.

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

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

Exemplos de proporções de imagem

Veja algumas proporções comuns.

1-1.png

2-3.png

3-2.png

4-3.png

16-9.png

Este artigo foi útil?
Utilizadores que acharam útil: 177 de 279