Formatar suas imagens para exibição na Internet

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 são exibidas na Web, saber mais sobre os requisitos de imagem do Squarespace e encontrar dicas de formatação para suas imagens. Também temos etapas para solucionar problemas de 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.

Assistir a um vídeo

Como as imagens são exibidas na web

Vários fatores influenciam a forma como suas imagens são exibidas em 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 – As imagens com largura estreita podem parecer ótimas em dispositivos móveis, mas embaçadas nos computadores, pois as telas do computador são mais amplas que as de dispositivos móveis.
• Forma da imagem – Também conhecida como proporção, essa é a relação entre a altura e a largura da imagem. A forma da imagem influencia a forma como as imagens são exibidas em seu site. Para saber mais, acesse Noções básicas sobre proporções de imagens. Também temos exemplos de proporções de imagens comuns.
• Recipientes e recortes de imagem – Toda imagem em seu site está em um contêiner, que é uma caixa invisível que controla como a imagem é exibida em relação a outros conteúdos na página. Por exemplo, banners têm um contêiner retangular. Para minimizar ou evitar o corte, verifique se a forma da imagem corresponde à forma do contêiner. Se a imagem aparecer cortada, acesse Solução de problemas de corte.
• Design responsivo – Todo site do Squarespace tem um design responsivo, que altera automaticamente o tamanho de suas imagens, dependendo do dispositivo do visitante.

Requisitos de imagem e práticas recomendadas

Antes de enviar imagens para o seu site, certifique-se de que suas imagens sigam nossos requisitos de imagem. Você não pode alterar o arquivo de imagem em si após o upload, apenas alterar sua aparência usando nosso editor de imagens integrado.

Atributo de imagem	Especificação	Anotações
Tipo de arquivo	Somente arquivos .jpg, .gif ou	Arquivos .pdf, .psd e .doc não são aceitos
Tamanho de arquivo	Limite de 20 MB	Use imagens de 500 KB ou menos para ajudar o site a carregar rapidamente. Nosso limite de imagens do Squarespace Scheduling é de 1,5 MB. Para obter mais requisitos de imagens do Scheduling, acesse Imagens no Squarespace Scheduling.
Nome de arquivo	Use apenas letras, números, underline 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 redimensionar suas imagens se elas forem maiores que 2500px e atenderem às nossas outras especificações. Imagens com menos de 1500px de largura podem parecer desfocadas. Sugerimos diferentes larguras para logotipos de sites, ícones de browser, campanhas por e-mail e .gifs animados.
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 1500px x 1650px tem 2,47 MP.
Modo colorido	RGB (vermelho, verde, azul)	O modo de cores CMYK é apenas para materiais impressos e não aparecerá corretamente na maioria dos navegadores. Em Macs, esse atributo pode ser chamado de Perfil de cores ou Espaço de cores.
Perfil de cores	sRGB	Se as imagens não ficarem corretas em dispositivos móveis, talvez elas não tenham um perfil de cor sRGB.
DPI e PPI	n/d	Você não precisa se preocupar com DPI e PPI porque eles afetam apenas a qualidade de impressão de uma imagem, não sua exibição na web.

Nossos requisitos são os mínimos que recomendamos para garantir que suas imagens sejam bem exibidas em seu site. Mantenha o tamanho da página abaixo de 5 MB para garantir que seu site seja carregado rapidamente. Se você perceber que seu site carrega lentamente, acesse Reduzir o tamanho da página para carregar mais rápido.

Examinar arquivos de imagem

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

Mac

Para examinar as informações de uma imagem:

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

Windows

Para examinar as informações de uma imagem:

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

Dispositivos móveis

As etapas para exibir as informações da imagem variam conforme o aplicativo, o dispositivo e o sistema operacional. Revise a documentação do app que você usa para ver ou editar fotos no seu dispositivo móvel.

Atenção: iPhones e iPads no iOS 11 e posteriores 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 seu telefone para capturar imagens como .jpg por padrão. Para saber mais, acesse a documentação da Apple.

Formatação de imagens

Como e onde você adiciona imagens influencia o modo como elas aparecem em suas páginas. Adicione imagens ao site usando blocos, seções e páginas.

Lembre-se:

• Certifique-se de que sua imagem esteja na orientação correta antes de enviá-la. Se sua imagem for salva de cabeça para baixo, gire a imagem com o software de edição de imagem antes de carregá-la no site. Se você já adicionou a imagem ao site, gire a imagem usando nosso editor de imagens integrado.
• As imagens adicionadas às galerias são exibidas melhor se todas as imagens tiverem uma forma semelhante. Por exemplo, use todas as imagens de paisagem (mais largas do que altas) ou todas as imagens de retrato (mais altas do que largas), não uma mistura de ambas.
• Para visualizar a aparência do site em dispositivos móveis, use a visualização por dispositivo.

Fundos transparentes

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

Se você editar sua imagem com nosso editor de imagens integrado, ela será salva como .jpg e removerá toda a transparência. Para manter o formato .png, use software de terceiros.

Como minhas imagens são redimensionadas para dispositivos diferentes?

Quando você carrega uma imagem, o Squarespace cria até sete versões dessa imagem, cada uma com uma largura diferente. A altura muda em relação à largura para preservar a forma da imagem. O design responsivo integrado do Squarespace escolhe automaticamente o tamanho da imagem apropriado com base na tela do visitante. As larguras que criamos são:

• 100 pixels
• 300 pixels
• 500 pixels
• 750 pixels
• 1000 pixels
• 1500 pixels
• 2500 pixels

Minhas imagens precisam ter dimensões exatas?

Não. Nosso sistema redimensiona automaticamente suas imagens para serem maiores ou menores para caber em diferentes larguras de dispositivos, para que você não precise formatar suas imagens com dimensões exatas, como 750px × 500px. Por exemplo, não há um requisito específico de altura e largura da imagem para blocos de imagem e um requisito diferente para imagens nas seções da galeria. Siga nossas dicas sobre a largura da imagem para ajudar a garantir que suas imagens não fiquem desfocadas.

Se suas imagens não forem exibidas da maneira que você gostaria:

• Certifique-se de seguir nossos requisitos de imagem
• Estilize suas imagens
• Solucione problemas de formatação de imagem

Adicione e estilize suas imagens

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:

Nomes de arquivos de imagem e texto

Nomes de arquivos de imagem e texto alternativo

Se não houver outro texto alternativo fornecido, o nome do arquivo de uma imagem atuará como texto alternativo. O texto alternativo também informa aos mecanismos de pesquisa do que se trata a imagem, aumentando a probabilidade de que seu site apareça nas pesquisas de imagens. Os blocos de imagens têm apenas uma fonte de texto alternativo. 

Ao criar imagens, lembre das práticas recomendadas para texto alternativo.

Dica: para alterar o nome do arquivo na maioria das imagens, carregue a imagem novamente com o novo nome.

Texto da 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.

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

Se suas imagens aparecerem cortadas ou distorcidas, você pode:

• Faça alterações no estilo de bloco, da seção ou da página ao qual você adicionou imagens
• Siga as etapas em Solução de problemas de corte.
• Use pontos focais 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 uma mensagem de erro aparece quando faço upload da minha imagem?

Primeiro, analise nossos requisitos de imagem. Se você estiver usando o tipo de arquivo correto e sua imagem tiver 20 MB ou menos, o problema pode ser a resolução da sua imagem. A resolução da imagem é medida em megapixels, e nosso limite é de 120 MP.

Por que a cor da minha 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 de banner aparecem cortadas em dispositivos móveis?

As imagens de banner quase sempre aparecem cortadas em dispositivos móveis porque um banner é amplo e os dispositivos móveis têm uma largura estreita. Vários fatores fazem com que as imagens de banner sejam cortadas em dispositivos móveis. Se você notar recorte em dispositivos móveis:

• Saiba como banners e imagens de fundo de seção aparecem em dispositivos móveis
• Saiba como personalizar seus banners

Imagens no Squarespace Scheduling

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

• O limite de tamanho do arquivo é menor que o limite para imagens de sites.
• O agendamento redimensiona automaticamente imagens maiores que 600px x 120 px quando elas são carregadas no campo Logotipo da empresa.
• O agendamento redimensiona automaticamente imagens maiores que 600px x 600px quando elas são carregadas como imagem para um tipo de calendário ou compromisso.
• Para obter os melhores resultados visuais, recomendamos o uso de imagens com formato quadrado ou proporção de 1:1.

Mais ajuda

Para saber mais sobre como adicionar imagens no Squarespace, acesse estes guias:

• Série de vídeos: Tudo sobre imagens
• Como adicionar e ajustar o tamanho de uma imagem
• Adição de logotipo ao site
• Edição de imagens no site
• Pesquise e adicione cenas de bancos de imagem
• Práticas recomendadas de banco de imagens
• Importar metadados de 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.