Dicas de estilo para as imagens aparecerem com clareza em telas de todos os tamanhos.

O Squarespace faz a otimização da formatação das suas imagens para exibição na internet. Criamos sete variações de cada imagem carregada para garantir a exibição perfeita nas telas de qualquer tamanho.

Use este guia para entender como as imagens aparecem na web, saber mais sobre os requisitos de imagem do Squarespace e encontrar dicas de formatação para suas imagens. Também temos os passos para solucionar problemas na formatação de imagens.

Dica: faça o seu site se destacar com imagens de alta qualidade e na posição certa. Confira nosso guia sobre como escolher imagens chamativas.

Assista ao vídeo

Como as imagens aparecem na web

Vários fatores influenciam como as imagens aparecem nos sites:

• Especificações do arquivo de imagem - confira nossos requisitos de imagem para garantir o upload das imagens para o seu site.
• Largura da imagem - imagens com largura estreita podem ficar ótimas na versão móvel e embaçadas no computador, pois a tela do computador é mais ampla.
• Forma da imagem - também conhecida como proporção da imagem, é a relação entre a altura e a largura da imagem. A forma da imagem influencia como as imagens aparecem no site. Saiba mais em Entendendo a proporção da imagem. Também temos os exemplos mais comuns de proporção de imagem.
• Contêiner e recortes de imagem - todas as imagens no site ficam em um contêiner - uma caixa invisível que controla como a imagem aparece em relação a outros conteúdos na página. O banner, or exemplo, tem um contêiner retangular. Para minimizar ou evitar o recorte, veja se a forma da imagem corresponde à forma do contêiner. Se a imagem aparecer recortada, confira Solução de problemas no recorte.
• Design responsivo - todos os sites Squarespace têm design responsivo, que altera automaticamente o tamanho das imagens dependendo do aparelho do visitante.

Requisitos de imagem e recomendações

Antes de enviar imagens para seu site, veja se elas seguem nossos requisitos. Você não pode alterar o arquivo de imagem em si após o upload, apenas alterar a aparência dela no nosso editor de imagens integrado.

Atributo da imagem	Especificação	Atenção
Tipo de arquivo	Somente .jpg, .gif ou .png	Arquivos .pdf, .psd e .doc não são aceitos
Tamanho de arquivo	Limite do 20 MB	Use imagens com até 500 KB para o site a carregar rapidamente. O melhor é carregar imagens de qualidade e maiores do que o máximo que você espera que a imagem apareça no site. Com isso, as versões ajustadas da imagem aparecem com a melhor qualidade possível. No Acuity, nosso limite para imagens é 1,5 MB.
Nome do arquivo	Use apenas letras, números, underscore e hifens.	Letras acentuadas, pontos de interrogação, sinais de porcentagem e ampersands podem não carregar ou causar problemas inesperados.
Largura da imagem	A largura de 2.500 pixels é ideal na maioria dos casos.	Você não precisa ajudar o tamanho de imagens com mais de 2.500 px e dentro das nossas outras especificações. Ao exportar uma imagem especificamente para carregar no Squarespace, ajuste-a para 2.500 px de largura. Assim, você tem acesso a toda a gama de imagens ajustadas que criamos, minimizando o tempo de upload. Para limitar a resolução máxima da imagem que aparece no site, você pode carregar imagens menores do que 2.500 px. Isso aumenta a velocidade do download da imagem em alguns aparelhos e limita a qualidade da imagem baixada pelos visitantes do site. Imagens com menos de 1.500 px de largura podem ficam desfocadas. Sugerimos diferentes larguras para os logotipos do site, ícones do browser e campanhas por e-mail.
Resolução	Limite de 120 MP (megapixels)	Para encontrar a resolução da imagem, use esta calculadora ou multiplique as dimensões e divida por 1 milhão. Por exemplo: uma imagem de 1.500 px x 1.650 px tem 2,47 MP.
Modo das cores	RGB (vermelho, verde, azul)	O modo de cores CMYK é apenas para materiais impressos e não aparece corretamente na maioria dos browsers. no Mac, esse atributo pode ser chamado de Perfil de cor ou Espaço de cor.
Perfil de cores	sRGB	Se as imagens não ficarem corretas na versão móvel, talvez elas não tenham perfil de cor sRGB.
DPI e PPI	n/d	Você não precisa se preocupar com DPI e PPI, pois eles afetam apenas a qualidade da impressão de uma imagem, não como ela aparece na web.

Dependendo do tamanho original da imagem, não é possível fazer download do arquivo original pelo seu site. Para não perder os arquivos originais, mantenha todos os arquivos de imagem no seu computador após carregá-los no site.

Nossos requisitos são os mínimos recomendados para que as imagens apareçam bem no site. Mantenha o tamanho da página abaixo de 5 MB para que o site carregue rapidamente. Se você achar que o site está lento, confira Reduzindo o tamanho da página para carregar mais rápido.

Dica: otimize o tamanho das imagens conectando a extensão TinyIMG . A TinyIMG substitui imagens superdimensionadas por versões compactadas, garantindo um carregamento mais rápido da página e mantendo a qualidade da imagem. Embora trabalhemos com serviços de terceiros para garantir que as Squarespace Extensions funcionem corretamente, elas estão fora do nosso escopo de suporte. Podemos ajudar a conectar ou desconectar suas extensões. Para todas as outras dúvidas, entre em contato diretamente com o provedor de extensões .

Examine os arquivos de imagem

Para determinar se a sua imagem atende aos nossos requisitos, confira as informações do arquivo da imagem.

Mac

Para analisar as informações de uma imagem:

1. Selecione o arquivo de imagem no seu computador.
2. Pressione Command + I.
3. Na janela que abrir, clique em Mais informações.

Windows

Para analisar as informações de uma imagem:

1. Selecione o arquivo de imagem no seu computador.
2. Pressione Alt + Enter.
3. Na janela que abrir, clique em Detalhes.

Versão móvel

Os passos para mostrar as informações da imagem variam conforme o app, o aparelho e o sistema operacional. Confira a documentação do app que você usa para ver ou editar fotos no seu aparelho móvel.

Atenção: na versão iOS 11 e posteriores, iPhones e iPads capturam imagens em um formato de alta eficiência (HEIF) que produz arquivos .heic. Eles são convertidos automaticamente para .jpg quando importados ou compartilhados em muitos lugares, incluindo o app do Squarespace, mas você pode ajustar as configurações do celular para capturar imagens como .jpg como padrão. Saiba mais na documentação da Apple.

Formatação da imagem

Como e onde você adiciona uma imagem influencia como elas aparecem na página. Use blocos, seções e páginas para adicionar imagens ao site.

Lembre-se:

• Antes de carregar uma imagem, veja se ela está na orientação correta. Se a imagem for salva de ponta-cabeça, gire-a com um software de edição antes de carregá-la no site. Se você já adicionou a imagem ao site, use nosso editor integrado para girar a imagem.
• As imagens adicionadas às galerias aparecem melhor se todas as imagens tiverem formas parecidas. Por exemplo: use todas as imagens no modo paisagem (mais largas do que altas) ou todas as imagens no modo retrato (mais altas do que largas). Evite misturar ambos.
• Para ver uma prévia do site na versão móvel, use a prévia por aparelho.

Fundo transparente

Para criar uma imagem sem cor no fundo, veja se a imagem é um arquivo.png com fundo transparente. Você pode usar um software externo para obter isso ou, se precisar de um logotipo, pode usar o Squarespace Logo para criar automaticamente um logotipo com fundo transparente.

Se você editar a imagem no nosso editor de imagens integrado, ele salvará como .jpg e retirará toda a transparência. Para manter o formato .png, use um software externo.

Como o tamanho das imagens são adaptadas para diferentes aparelhos?

Ao fazer o upload da imagem, o Squarespace cria até sete versões dela, cada uma com uma largura diferente. Para preservar a forma da imagem, a altura muda em relação à largura. O design responsivo integrado do Squarespace escolhe automaticamente o tamanho da imagem com base na tela do visitante. As larguras que criamos são:

• 100 pixels
• 300 pixels
• 500 pixels
• 750 pixels
• 1.000 pixels
• 1.500 pixels
• 2.500 pixels

Minhas imagens precisam ter dimensões exatas?

Não. Nosso sistema ajusta automaticamente o tamanho das imagens para caberem em diferentes aparelhos. Assim, você não precisa formatar as imagens com dimensões exatas, como 750 px × 500 px. Não há, por exemplo, um requisito específico de altura e largura da imagem no bloco de imagens e outro requisito para imagens na seção de galeria. Confira nossas dicas sobre a largura da imagem para que suas imagens não fiquem desfocadas.

Se suas imagens não aparecerem como você gostaria:

• Siga nossos requisitos de imagem
• Ajuste o estilo da imagem
• Solucione os problemas na formatação da imagem

Adicione e ajuste o estilo de uma imagem

Você pode usar estilos do site, painéis de design e configurações de seção de bloco ou página para fazer alterações no estilo e personalizar como as imagens aparecem. O modo de adicionar e ajustar o estilo das imagens depende da versão do site. A tabela abaixo mostra como adicionar e ajustar o estilo das imagens no site:

Texto na imagem

Ao adicionar texto sobre a imagem, recomendamos sobrepor em vez de incorporar à imagem. Com isso, o texto aparece nas buscas e fica visível se a imagem for cortada em telas menores. Confira nossas dicas para adicionar texto de sobreposição ao bloco de imagem, banner, página de galeria e bloco de galeria.

Se a imagem contiver texto, salve-a como arquivo .png. O texto em .jpg geralmente fica embaçado quando a imagem é compactada. O arquivo .png geralmente mantém a nitidez, principalmente se a imagem aparecer no tamanho original.

Texto alternativo

Ao criar imagens, lembre das recomendações para o texto alternativo. É importante adicionar um texto alternativo às imagens para deixar seu conteúdo mais acessível aos visitantes que usam leitor de tela. O texto alternativo também explica aos buscadores o que é a imagem, aumentando a probabilidade de seu site aparecer nas buscas de imagens.

Se você não adicionar o texto alternativo às imagens, o nome do arquivo será usado como texto alternativo, exceto nos blocos de imagens e layouts automáticos. Na biblioteca de ativos, é possível alterar o nome do arquivo de uma imagem que você já carregou.

Solução de problemas na formatação de imagens

Se as imagens aparecerem recortadas ou distorcidas:

• Faça alterações no estilo de bloco, da seção ou da página ao qual você adicionou imagens.
• Siga os passos em "Solução de problemas com o recorte".
• Use o ponto focal para centralizar as imagens.
• Use nosso editor de imagens integrado para fazer alterações, como recortar e alterar a proporção da imagem.
• Ajuste o tamanho, corte ou edite a imagem original no seu aparelho e, em seguida, carregue-a novamente.

Por que as imagens estão embaçadas?

Se as imagens parecerem borradas ou pixeladas, é provável que sejam estreitas demais para aparecem na web. Na maioria das áreas do Squarespace, recomendamos imagens com mais de 1.500 pixels. Já outras áreas de conteúdo têm requisitos diferentes:

• Logotipos nos sites versão 7.0
• Ícones do browser (ou favicons)
• Imagens nas campanhas por e-mail

Por que aparece uma mensagem de erro quando faço upload da minha imagem?

Primeiro, confira nossos requisitos de imagem. Se você estiver usando o tipo de arquivo correto e a imagem tiver até 20 MB, o problema pode ser a resolução da imagem (medida em megapixels). Nosso limite é 120 MP.

Por que a cor da imagem está distorcida?

O modo ou perfil da cor da imagem pode não estar corretamente formatado. Confira nossos requisitos de imagem para ver se você está usando as configurações corretas.

Por que minhas imagens no banner aparecem recortadas na versão móvel?

No banner, as imagens quase sempre aparecem recortadas na versão móvel porque o banner é amplo, e os aparelhos móveis são estreitos. Há vários fatores para as imagens no banner ficarem recortadas na versão móvel. Se isso ocorrer:

• Saiba como os banners e imagens de fundo da seção aparecem na versão móvel
• Saiba como personalizar o banner

Por que a resolução da imagem muda quando vista em tamanhos diferentes?

Quando você ajusta a dimensão de uma imagem no site, a imagem continua com o mesmo número de pixels, e nosso processador faz uma nova amostragem da imagem. Com isso, à medida que o tamanho do contêiner da imagem muda, os pixels podem se misturar e, assim, diminuir a nitidez. Ao carregar uma imagem, siga nossos requisitos e recomendações para que ela seja renderizada com clareza aceitável em qualquer tamanho - mesmo assim, pequenas discrepâncias são normais.

Imagens no Acuity Scheduling

Ao fazer upload das imagens para o Acuity, você pode usar os mesmos tipos de arquivo de imagem usados no restante do seu site. No entanto, lembre-se dessas diferenças ao formatar suas imagens do Acuity:

• O limite de tamanho do arquivo é menor do que o limite para imagens de sites.
• O Acuity ajusta automaticamente o tamanho das imagens maiores do que 600 px x 120 px quando carregadas no campo do logotipo da empresa.
• O Acuity ajusta automaticamente o tamanho das imagens maiores do que 600 px x 600 px quando carregadas como imagem para um tipo de calendário ou de sessão.
• Para os melhores resultados visuais, recomendamos imagens quadradas ou com proporção de 1:1.

Mais ajuda

Saiba mais sobre como adicionar imagens no Squarespace com estes guias:

• Série de vídeos: Tudo sobre imagens
• Como adicionar e ajustar o tamanho de uma imagem
• Adição de um logotipo ao site
• Edição de imagens no site
• Deixando áudio, imagens e vídeos mais acessíveis
• Procurando e adicionando uma imagem de acervo
• Recomendações para as imagens de acervo
• Importação dos metadados da imagem

Além dos guias acima, oferecemos outros recursos para formatar imagens:

• Consulte com a comunidade no Squarespace Forum.
• Contrate um Squarespace Expert para ajudar.