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:Acesse nossa série de vídeos Tudo sobre imagens para obter mais conselhos e tutoriais passo a passo sobre como adicionar imagens em seu site.

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 Properties (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.

• Aspect ratio (Relação de aspecto) - A relação de aspecto de uma imagem é a relação entre a sua largura e a sua altura, expressa em um número, como 3:4. Manter uma relação de aspecto consistente impede que as imagens fiquem distorcidas. Por exemplo, se a largura de uma imagem for reduzida pela metade, a altura também deve ser reduzida pela metade.
• Largura da imagem - Nesse guia, os tamanhos das imagens se referem ao número de pixels ao longo da largura e da altura da imagem. Sua imagem pode aparecer maior ou menor em seu site dependendo do tamanho do contêiner. Para saber mais, acesse Redimensionar imagem.

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:

Tipos de arquivos

Salve imagens apenas nos formatos .jpg, .gif, ou .png .

Arquivos .pdf, .psd, .tff, e .doc não são compatíveis com a Internet.

Dica: Você pode criar links de download para arquivos não compatíveis com a Internet.

Nome de arquivo

Use apenas letras, números, underline, hífens nos nomes de arquivos. Outros caracteres como: pontos de interrogação, sinais de porcentagem e & (e comercial), podem ser carregados incorretamente ou levar a um comportamento inesperado nas galerias.

Resolução

Há um limite de resolução de imagem de 60 MP (megapixels).

Dica: Para encontrar o MP de uma imagem, multiplique as dimensões e divida por um milhão. Por exemplo, uma imagem com dimensões e 1500px x 1650px tem 2.475 MP.

Modo colorido

Salve imagens no modo de cores RGB. O modo de impressão (CMYK) não será processado na maioria dos navegadores.

Perfil de cores

Salve as imagens no perfil de cores sRGB. Se as imagens não parecerem corretas em dispositivos móveis, pode ser, provavelmente, que 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 aparecer embaçadas ou pixelizadas quando são esticadas para preencher os contêineres, como banners.
• Na maioria dos casos, o Squarespace irá reformatar 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 com suas dimensões originais Isso pode ocasionar problemas no carregamento da página se a imagem for maior do que 2.500 pixels em seu lado mais comprida.

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.

Recorte de imagem

Os browsers 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 de uma imagem, o primeiro passo sugerido é recortá-la manualmente (próximo do tamanho desejado) com um software externo ou com o Editor de imagens integrado.

Texto da imagem

Sempre que possível, recomendamos adicionar texto como uma sobreposição em vez de incluí-lo na imagem. Isso torna o texto pesquisável e o mantém visível se a imagem aparecer em dispositivos menores. Veja nossas dicas sobre como adicionar texto de sobreposição a Blocos de Imagens, banners, Páginas de Galerias e  Blocos de Galerias.

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 de uma imagem funciona como texto alternativo caso não haja texto alternativo. Ele também comunica aos motores de busca sobre o que é a imagem, aumentando as chances de você aparecer em buscas de imagem. 

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

Ajuda a garantir que cada imagem usada tenha a mesma relação de aspecto (altura:largura) antes de carregar, pois, geralmente, as imagens são recortadas com base na largura e altura. Se todas as imagens possuírem a mesma relação de aspecto, será mais fácil antecipar como elas serão recortadas. Para saber mais, acesse Understanding aspect ratios (Entenda as relações de aspecto).

Orientação

Veja se a imagem está na orientação correta antes de carregá-la. Se a imagem for salva de ponta-cabeça, rode a imagem com um software de edição antes de carregá-lo no site. 

Se já tiver adicionado a imagem no site, rode a imagem com o Editor de imagemintegrado.

DPI e PPI

Sobre resoluções de imagens, considere suas dimensões e tente mantê-las com tamanhos de arquivo de 500 KB ou menos. É mais importar focar no tamanho e não no DPI (pontos por polegada) ou no PPI (pixels por polegada). O DPI e o PPI afetam a qualidade de impressão de uma imagem, não sua 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

Ao adicionar um logotipo, carregue-o com uma altura semelhante à que você gostaria de exibir.

Em alguns templates, é possível alterar a altura. Para isso, é melhor começar com uma imagem grande e reduzir o tamanho após carregá-la no site.

Nota: Cada template trata os logo de forma diferente. Visite nossos guias de templates para saber como seu template exibirá seu logo.

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 de arquivo recomendadas para um favicon são 100px × 100px a 300px × 300px. Os favicons serão exibidos nos navegadores como 16px x 16px.

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

Os .gifs animados

Os .gifs animados são uma exceção à regra de 1500-2500 pixels, principalmente .gifs em Blocos de Imagem. Um .gif com largura de 1500 pixels provavelmente será muito grande, o que pode desacelerar bastante seu site. Recomendamos formatar .gifs animados em qualquer tamanho que desejar que apareçam no site.

Links úteis

• Editor de Imagens Integrado - Acesse Como editar imagens em seu site.
• Imagens de acervo - Antes de adicionar uma imagem de banco de imagem ao site, confira nossas práticas recomendadas.
• Tela retina e tela de alta densidade - acesse Design responsivo.
• Imagens de produtos - Acesse estilos de Páginas de Produtos.
• Blocos de Imagem - Acesse Usar o Bloco de Imagem.
• Blocos de Galeria - leia Usando Blocos de Galeria.
• Páginas de Galeria - Acesse Usar Páginas de Galeria.

Se precisar de ajuda mais avançada com a formatação de imagens no seu site, acesse o Fórum do Squarespace para desenvolvedores e clientes ou consulte um Squarespace Expert.