Critérios e recomendações para o upload de imagens.

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 otimizada 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. Para solução de problemas, consulte "Solucionando problemas no upload e na formatação de imagens".

Após carregar as imagens no site, guarde todos os arquivos no seu computador para não perder as imagens originais.

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.
• Formato da imagem - também conhecido como proporção, é a relação entre a altura e a largura da imagem. As imagens adicionadas à galeria geralmente aparecem melhor se todas tiverem formato semelhante. Saiba mais em Entendendo a proporção da imagem. Também temos exemplos de proporções mais comuns 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, por exemplo, tem um contêiner retangular. Para minimizar o recorte, veja se a forma da imagem corresponde à forma do contêiner. Saiba mais em "Solucionando 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

Antes de carregar uma imagem para o seu site, veja se ela atende aos nossos critérios. Não é possível alterar o arquivo de imagem em si após o upload, apenas alterar como ela aparece — para isso, use nosso  editor de imagens integrado. Para alterar os atributos da imagem, formate a imagem no seu computador e faça upload novamente.

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	Para o site carregar rapidamente, recomendamos o upload de imagens de até 500 KB.
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	Uma largura de 2.500 pixels é ideal para a maioria das imagens.	Ao carregar imagens com 2.500 px de largura, você tem acesso a toda a gama de imagens redimensionadas que criamos, minimizando o tempo de upload. Você pode carregar imagens com larguras menores para restringir a resolução máxima que aparecerá no seu site. Isso pode diminuir o tempo de carregamento do site em alguns aparelhos ou a limitar a qualidade da imagem que os visitantes podem baixar, mas imagens com menos de 1.500 px de largura podem parecer borradas. 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.

Esses requisitos e recomendações garantem as melhores imagens no seu site. Se o site tiver muitas imagens grandes e você achar que ele está carregando lentamente, consulte "Reduzindo o tamanho da página para o carregamento 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 .

Encontre os detalhes da imagem

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

Mac

Para encontrar essas informações:

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 encontrar essas informações:

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.

Fundo transparente

Caso precise de uma imagem sem fundo ou cor de fundo, como para o logotipo, use um arquivo .png. com fundo transparente. Para isso, você pode usar um software externo ou usar o Squarespace Logo para criar automaticamente um com fundo transparente.

Se você editar a imagem com nosso editor de imagens integrado, ela será salva em .jpg e não terá transparência. Para manter o formato .png, edite a imagem com um software externo.

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.

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

Para ver uma prévia do site na versão móvel, use a prévia por aparelho.

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

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
• Solução de problemas no upload e na formatação de imagens
• 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.