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

Temos algumas recomendações sobre como formatar suas imagens, antes de carregá-las. Para melhores resultados, siga as sugestões abaixo.

Dica: para mais conselhos e tutoriais passo a passo sobre como adicionar imagens ao site, confira nossa série de vídeos Tudo sobre imagens.

Assistir a um vídeo

Antes de começar

Para encontrar o tamanho e as dimensões da imagem original antes de carregá-la no site:

• PC - clique com o botão direito no arquivo da imagem e selecione Propriedades.
• Mac - Aperte Option (Opção) enquanto clica no arquivo da imagem e selecione Get Info (Obter Informações).

Glossário

Aqui está um pouco da terminologia que verá neste guia.

• Proporção da imagem - é a relação entre a largura e a altura da imagem, expressa em número, como 3:4. A proporção uniforme da imagem impede elas fique distorcida. Por exemplo: se a largura da imagem for reduzida pela metade, a altura deve ser reduzida na mesma proporção.
• Largura da imagem - neste guia, o tamanho das imagens se refere ao número de pixels ao longo da largura e da altura da imagem. Dependendo do espaço, a imagem pode aparecer maior ou menor no site. Saiba mais em Redimensionamento de imagens.

O que acontece depois que eu carregar uma imagem?

Quando você carrega uma imagem, o Squarespace cria até sete versões dessa imagem, cada uma com uma largura diferente. Essas larguras são:

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

A altura muda com relação à largura, para preservar a proporção de aspecto da imagem. O design incorporado responsivo do Squaespace escolhe o tamanho de imagem adequado, com base na tela do visitante.

Observação: imagens carregadas pelo painel Estilos do Site, como imagens de fundo, sempre aparecem em sua largura original. Recomendamos carregar essas imagens com no máximo 2.500 pixels em seu lado mais comprido. Para mais dicas, acesse as Melhores práticas para imagens abaixo.

Requisitos de imagem

Ao carregar imagens no seu site, siga estas orientações:

Atributo de imagem	Especificação	Anotações
Tipo de arquivo	Somente arquivos .jpg, .gif ou	Arquivos .pdf, .psd e .doc não são compatíveis
Tamanho de arquivo	Limite de 20 MB	Use imagens até 500 KB para obter melhores resultados.
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 podem causar problemas inesperados.
Resolução	Limite de 60 MP (megapixel)	Para encontrar a resolução da sua imagem, multiplique as dimensões e divida por 1 milhão. Por exemplo, uma imagem de 1500 px x 1650 px é de 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 boas no dispositivo móvel, talvez elas não tenham um perfil de cor sRGB.

Práticas recomendadas de imagem

Tamanho de arquivo

Para o melhor resultado, recomendamos usar arquivos de imagem com menos de 500 KB, mesmo que o limite de upload de cada imagem seja 20 MB. Em relação ao tamanho da imagem, maior nem sempre é melhor, pois o upload de várias imagens maiores pode afetar o desempenho do site. Ao adicionar várias imagens a uma página, lembre-se também do tamanho da página como um todo.

Largura da imagem

As dimensões da imagem original carregada no site podem causar um grande impacto na exibição da imagem. Recomendamos utilizar imagens medindo entre 1500 e 2500 pixels.

• Imagens menores que 1500 pixels podem parecer borradas ou pixeladas quando se estendem para preencher contêineres, como banners. Para saber como os banners são redimensionados em diferentes dispositivos e larguras de tela, visite Design responsivo.
• Geralmente, o Squarespace reformata imagens grandes para uma largura de no máximo 2.500 pixels. No entanto, imagens adicionadas pelo painel Estilos do Site (imagens de fundo e imagens de banner que ocupam todo o site) são carregadas nas dimensões originais. Isso pode ocasionar problemas no carregamento da página se a imagem for maior do que 2.500 pixels no lado mais comprido.

Você pode usar um software externo para reduzir as dimensões de uma imagem. Não recomendamos aumentar uma imagem pequena, pois ela pode ficar pixelizada. Em vez disso, comece com uma imagem de pelo menos 1.500 pixels de largura. Você também pode buscar e adicionar imagens de alta qualidade diretamente do seu site.

Dica: Se estiver tendo problemas com o carregamento, tais como a imagem de plano de fundo não carrega nos dispositivos móveis, tente reduzir a borda mais comprida de todas as imagens para 1500 pixels. Essa é a combinação mais segura entre qualidade da imagem e velocidade de carregamento para os visitantes.

Corte de imagens

Os navegadores carregam a imagem cheia das imagens recortadas pelo site, tais como imagens recortadas com a alça de recorte ou com os ajustes de proporção da imagem do painel Estilos do Site. Para reduzir o tamanho do arquivo de imagens grandes, é melhor cortá-las primeiro perto do tamanho pretendido manualmente com software de terceiro ou o Editor de imagens integrado.

Texto da imagem

Sempre que possível, recomendamos adicionar o texto como sobreposição em vez de incluí-lo na imagem. Assim, o texto é detectado pelo buscador e o fica visível se a imagem for recortada em aparelhos menores. Veja nossas dicas sobre como adicionar texto de sobreposição a um Bloco de Imagens, banner, Página de Galeria e Bloco de Galeria.

Se a sua imagem contiver texto, é melhor salvá-lo como um arquivo .png. O texto em um arquivo .jpg geralmente fica desfocado quando a imagem é compactada. Um arquivo .png normalmente mantém sua nitidez, especialmente se a imagem for exibida em seu tamanho original.

Nomes de imagens

O nome da imagem funciona como texto alternativo caso não haja um. Ele também explica aos buscadores sobre o que é a imagem, aumentando as chances de você aparecer nas buscas de imagens.

Quando 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. Em Blocos de Imagem, é possível alterar o campo Nome do arquivo na aba Conteúdo.

Relação de aspecto

Garante que a imagem tenha a mesma proporção (altura:largura) antes de carregar, pois as imagens geralmente são recortadas com base na largura e na altura. Se todas as imagens possuírem a mesma proporção, fica mais fácil antecipar como elas serão recortadas. Saiba mais em Entendendo a proporção da imagem.

Orientação

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 já tiver adicionado a imagem no site, gire a imagem com o Editor de imagem integrado.

DPI e PPI

Sobre a resolução da imagem, considere as dimensões dela e use arquivos com até 500 KB. Desconsidere o DPI (pontos por polegada) e o PPI (pixels por polegada), que afetam a qualidade de impressão da imagem, mas não a exibição na web.

Tamanho da página

Mesmo se todas as suas fotos forem menores que 500 KB, se você possuir várias imagens em uma página elas podem gerar problemas, tais como velocidades lentas de carregamento. Verifique o conteúdo de sua página para garantir que o tamanho dela seja menor que 5 MB.

Logotipos

Revise nossos requisitos de imagem antes de adicionar um logotipo. Formate a imagem para que seja semelhante em altura à forma como você deseja que ela seja exibida. Não exigimos um tamanho específico para o seu logotipo, mas é melhor começar com uma imagem maior. Quando sua imagem é muito pequena para começar, ela pode pixelizar ao redimensionar. Você pode alterar o tamanho depois de carregar o logotipo.

Se o seu site estiver na versão 7.0, a forma como você redimensionar um logotipo depende do seu template.

Favicons

Ao adicionar um favicon ao seu site, certifique-se de que a imagem seja salva como um arquivo .ico ou como um arquivo .png.

As dimensões recomendadas são entre 100 × 100 e 300 × 300 (em pixels). Os favicons aparecem no browser em 16 x 16 pixels.

Nota: O Internet Explorer não pode exibir .pngs como favicons.

Os .gifs animados

Os .gifs animados são exceção à nossa regra de 1.500-2.500 pixels, principalmente nos Blocos de Imagens. Um .gif de 1.500 pixels de largura provavelmente será grande demais, o que pode deixar o site lento. Recomendamos formatar .gifs animados no tamanho que você desejar que apareçam no site.

Mais ajuda

• Editor de imagens integrado - acesse Edição de imagens no site.
• Imagens de acervo - antes de adicionar uma imagem de acervo ao site, confira nossas melhores práticas.
• Tela retina e tela de alta densidade - acesse Design responsivo.
• Imagens do produto – acesse Tipos de Página de Armazenamento.
• Blocos de Imagem - acesse Bloco de Imagem.
• Seções de galeria - acesse Seções de galeria na versão 7.1.
• Blocos de Galeria – Visite Blocos de Galeria.
• Páginas de Galeria – Visite Páginas da Galeria.
• Metadados de imagem - acesse Importação de metadados de imagem.

Além dos guias acima, oferecemos outros recursos para ajudá-lo a formatar imagens:

• Receba conselhos da comunidade no Squarespace Forum.
• Contrate um especialista do Squarespace para ajudar.