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.
Assista a este vídeo
Antes de começar
- Este guia trata do redimensionamento dos Blocos de Imagem, que permitem adicionar imagens a Páginas de Layout, publicações do blog e outras áreas de conteúdo no Squarespace. Para obter informações sobre outros tipos de imagens, 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 predefinido com um marcador de posição Bloco de imagem, 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 integrado conforme a imagem abaixo, ou use um software externo e carregue a imagem novamente.
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.
Redimensionar com estilos de bloco de imagem
Os layouts de Cartão, Sobreposição e Colagem oferecem opções de redimensionamento nas configurações de estilo.
- Ao editar uma página, abra Estilos do Site e clique em Blocos de Imagem.
- 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 o tamanho. O texto da imagem será ajustado automaticamente de acordo com o espaço.
- Clique em Salvar.
- No Menu Inicial, clique em Design e depois em Estilos do Site.
- 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.
- Clique em Salvar.
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 clique em Design.
- Ativar a opção 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 | ✓ | ✓ | ✕ | ✕ | ✕ | ✕ |
| Estilos do site | ✕ | ✕ | ✓ | ✓ | ✓ |
✕ |
| 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:
- Para imagens do Bloco de Galeria, visite Blocos de Galeria.
- No caso das imagens de banner, acesse Adição de 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.
- Para um Bloco de Sumário, visite Usando 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.