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.

Nota: Imagens carregadas via Editor de Estilo, como imagens de plano de fundo, sempre são exibidas na largura original. Recomendamos carregar essas imagens com no máximo 2500 pixels ao longo da borda mais comprida. Para mais dicas, veja as Melhores práticas da imagem 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.

Tamanho de arquivo

Recomendamos que você utilize arquivos de imagem com menos de 500 KB para obter melhores resultados, embora o limite para um upload individual de imagem seja 20 MB. Quando se trata de tamanho de imagem, a maior nem sempre é a melhor, já que fazer o upload de imagens maiores pode afetar o desempenho do site.

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

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 reformata imagens grandes para que fiquem com uma largura de no máximo 2500 pixels. Contudo, imagens adicionadas através do Editor de Estilo (imagens de plano de fundo e imagens de banner que ocupam o site todo) são carregadas com as dimensões originais. Pode haver problemas de carregamento na página se a imagem for maior que 2500 pixels ao longo de sua borda mais comprida.

É possível reduzir as dimensões de uma imagem no Adobe Creative Cloud Image Editor ou usar um software externo. Não recomendamos aumentar uma imagem menor, pois pode deixá-la pixelizada. Em vez disso, comece com uma imagem que tenha pelo menos 1500 pixels. Nossa parceria com a Getty Images pode ajudar você a pesquisar por imagens de alta qualidade.

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 navegadores carregam a imagem completa de imagens recortadas pelo seu site, assim como aquelas recortadas com a alça de corte ou os ajustes da proporção de estilos do Editor de Estilo. Para reduzir o tamanho de imagens grandes, é melhor recortá-las manualmente primeiro com o software do terceiro ou com o Editor de Imagem integrado do Adobe Creative Cloud.

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.

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

Certifique-se de que sua imagem esteja na orientação correta, antes de carregá-la. Se sua imagem estiver salva de cabeça para baixo, gire-a com um software de edição de imagem, antes de carregá-la no seu site. Para obter uma lista de programas de edição de imagem, acesse Editar imagens para seu site.

Se já tiver adicionado a imagem ao site, você poderá girar a imagem usando o editor de imagens Adobe Creative Cloudintegrado.

DPI

Se estiver preocupado com a resolução da imagem, você não precisa se preocupar com o DPI (dots per inch, pontos por polegados em português) ou com PPI (pixels per inch, pixels por polegada em português), pois nenhum deles afeta a qualidade de exibição da Internet. Em vez disso, concentre-se em usar as dimensões de imagem que funcionam para seu site e em manter tamanhos de arquivos menores que 500 KB.

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 logo,carregue-o em uma altura semelhante à que você gostaria de exibir. Em alguns templates, você pode ajustar a altura de exibição usando o ajuste de Logo Image Height (Altura da Imagem de Logo) no Editor de Estilos. 

Dica: Evite ter que aumentar o tamanho do logo no Editor de Estilos. É melhor iniciar com uma imagem grande e depois reduzir seu tamanho, depois de ela ter sido carregada no seu 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

Criar e editar imagens

Acesse Editar imagens para seu site para obter links para softwares de edição de imagem recomendados.

O editor de imagens Adobe Creative Cloud integrado

Para obter ajuda com a edição de imagens no seu site do Squarespace, acesse Edição de imagens com o Adobe Creative Cloud.

Telas de retina e de alta densidade

Para obter informações sobre como exibir imagens em telas de retina ou de alta densidade, acesse Como meu site aparecerá em telas de retina?.

Imagens de produtos

Ao carregar imagens de produtos que você vende no site, certifique-se de que a proporção de aspecto corresponda à selecionada para as opções de tamanho dos produtos no Style Editor (Editor de Estilos).

Para saber mais, acesse Estilizando a Página de Produtos.

Blocos de Imagem

Para obter informações sobre como usar imagens em Blocos de Imagem, acesse Usar o Bloco de Imagem.

Blocos de Galeria

Para obter informações sobre como exibir imagens com Blocos de Galeria, acesse Usar Blocos de Galeria.

Páginas de Galeria

Para obter informações sobre como exibir imagens com Páginas de Galeria, acesse Usar a Página de Galeria.

Nota: Para obter ajuda mais avançada com a formação de imagens para seu site, recomendamos acessar o Squarespace Answers,nosso fórum do desenvolvedor e do cliente. Você também pode considerar uma consultoria com um Squarespace Specialist (Especialista do Squarespace).