Quando você adiciona um Bloco de Imagem a uma página ou postagem de blog, vários fatores afetam o tamanho dele em seu site:
- O tamanho no Bloco de Imagem
- O layout escolhido para o Bloco de Imagem
- O tamanho da imagem original (somente layout alinhado)
Este guia ajuda você a entender esses fatores e explica as diferentes opções de redimensionamento de imagem.
Antes de começar
- Este guia trata do redimensionamento dos Blocos de Imagem, que permitem adicionar imagens a Páginas Simples, postagens de blog e outras áreas de conteúdo no Squarespace. Para obter informações sobre outros tipos de imagem, consulte nossas informações sobre outras imagens.
- Recomendamos fazer o upload de uma imagem que tenha largura entre 1500 e 2500 pixels. Esse intervalo é a melhor opção para imagens com boa aparência, mas que não sobrecarregam seu site.
- Se você estiver usando um layout inicial com um bloco de imagem de espaço reservado, adicione sua própria imagem ao bloco antes de tentar redimensioná-lo.
Redimensionar com outros blocos
Quando você adiciona um bloco de imagem, ele é expandido para preencher a largura total da área de conteúdo. Você pode diminuir o tamanho do Bloco de Imagem adicionando blocos em ambos os lados. A relação de aspecto (largura e altura) permanece a mesma, portanto, a imagem inteira diminui, mantendo a mesma forma.
A maneira mais comum de fazer isso é comBlocos de Espaço, que criam espaços em branco. Adicione-os à esquerda ou à direita de um Bloco de Imagem e arraste o cursor de redimensionamento para redimensionar o Bloco de Imagem.
- Clique em um Ponto de Inserção para adicionar um Bloco de Espaço.
- Arraste o Bloco de Espaço para a esquerda ou direita do Bloco de Imagem.
- Clique e arraste o cursor de redimensionamento.
Para centralizar a imagem, adicione Blocos de Espaço de tamanho igual em ambos os lados.
Outros blocos
Você pode usar o mesmo método com outros blocos. Isso é especialmente útil para textos lado a lado com imagens, como mostrado no .gif abaixo.
Recorte a imagem original
O recorte pode alterar a altura e a forma de uma imagem cortando partes da imagem.
Para recortar a imagem original, use o Editor de Imagem do Adobe Creative Cloud incorporado, conforme mostrado na imagem abaixo, ou use seu próprio software de terceiro e redimensione a imagem.
Dica: Na maioria dos casos, as imagens recortadas permanecerão com a mesma largura no seu site. Para alterar a largura, use um dos outros métodos neste guia.
Use a ferramenta de recorte
Uma opção para os layouts Alinhados e layouts de Poster é clicar e arrastar a ferramenta de recorte para cortar a imagem verticalmente. Isso mantém a largura da imagem, mas altera sua altura.
- Clique no Bloco de Imagem. É exibida uma margem com um cursor de recorte circular na parte inferior.
- Clique e arraste o cursor de recorte para cortar a imagem.
Dicas:
- Mantenha pressionada a tecla Shift enquanto arrasta a ferramenta de recorte para redimensionar a imagem em incrementos de 20 pixels. Isso ajuda a alinhar a parte inferior da imagem com outro bloco.
- A ferramenta de recorte só aparece depois que você adiciona uma imagem.
- Você pode optar por centralizar a imagem recortada usando os pontos focais.
- Clique duas vezes no cursor de recorte para desfazer o corte.
- Puxe a alça para baixo para ampliar a imagem.
Clique e arraste o cursor de recorte para baixo para cortar horizontalmente. A imagem é ampliada, recortando os lados.
Redimensione com o Editor de Estilos
Os layouts de Cartão, Sobreposição e Colagem tem opções de redimensionamento no Editor de Estilos.
- No Menu Inicial, clique em Design, e no Style Editor (Editor de Estilos).
- Vá até a seção desse layout. (Por exemplo, role até a seção Bloco de Imagem: Cartão.)
- Use o ajuste de Largura de Imagem para alterar seu tamanho. O texto da imagem ficará automaticamente maior ou menor para caber no espaço.
Dica: Isso afeta todos os Blocos de Imagens com esse layout.
Amplie a imagem para preencher o bloco
Se você estiver usando o layout Alinhado e a sua imagem for menor que o Bloco de Imagem, a imagem manterá sua largura original. Você verá um espaço em branco nos dois lados da imagem dentro do bloco. Isso preserva a qualidade da imagem original.
Para preencher o espaço em branco e fazer com que a imagem ocupe toda a largura do bloco, abra o Bloco de Imagem e marque a opção Stretch (Esticar).
Dicas:
- Esticar uma imagem pode afetar sua qualidade.
- Para reduzir a necessidade de alongamento, recomendamos fazer o upload da imagem com largura entre 1500 e 2500 pixels.
- Se a imagem for mais larga do que a área do Bloco de Imagem, ela será encolhida para caber (sem corte).
- Os outros layouts são ampliados automaticamente.
Opções por layout
Veja a seguir uma referência rápida sobre as diferentes opções disponíveis em cada layout:
| Opção | Alinhado | Pôster | Cartão | Sobreposição | Colagem | Stack (Pilha) |
| Redimensionamento com blocos | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Recorte a imagem original | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Ferramenta de corte | ✓ | ✓ | ✕ | ✕ | ✕ | ✕ |
| Editor de Estilos |
✕ | ✕ | ✓ | ✓ | ✓ |
✕ |
| Ampliar para preencher | ✓ | n/d | n/d | n/d | n/d | n/d |
Outras imagens
Seu site tem outras opções para adicionar imagens, cada uma com sua própria opção de redimensionamento:
- No caso de imagens de Bloco de Galeira, acesse Perguntas frequentes de Blocos de Galeria.
- No caso das imagens de banner, acesseAdicinoando uma imagem de banner.
- No caso de imagens de Página de Galeria, consulte seu guia de template.
- No caso dos Blocos de Instagram, acesse Usando Blocos de Instagram.
- No caso dos Blocos de Sumário, acesse Visão geral dos Blocos de Sumário.
- Veja nossas opções de criação de imagens sem margens.
Dica: em qualquer bloco, é possível usar o método de Redimensionamento com outros blocos.