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 seja 20 MB para cada imagem. Em relação ao tamanho da imagem, maior nem sempre é melhor, pois o upload de 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 atua como texto alternativo se não houver nenhum outro texto alternativo presente. Ele também comunica aos motores de busca sobre o que é a imagem, aumentando as chances de você aparecer em buscas de imagem.

Ao criar suas imagens, use nomes fáceis e legíveis para beneficiar quem usa softwares de leitores de tela ou para quem tenha desabilitado imagens em seu navegador. Por exemplo, se o nome da sua imagem for IMG_0178.jpg, mude-a para algo que descreva a imagem, como vaso-azul-cerâmica.jpg.

Considere estas dicas:

• Seja descritivo e prestativo. Como você descreveria essa imagem para quem não a enxerga?
• Separe cada palavra com hífen ou underscore.
• Dê um nome curto à imagem, com oito palavras ou menos.
• Inclua palavras-chave, sem exagerar.
• Você pode omitir palavras como "a" e "um", e termos como "foto" ou "imagem". Por exemplo, em vez de foto-de-um-vaso-verde.jpg, use vaso-verde.jpg.

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

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 logotipo, carregue-o com uma altura semelhante à que você gostaria de exibir. Alguns templates permitem ajustar a altura de exibição usando o ajuste de Altura da imagem do logotipo no painel Estilos do Site. 

Dica: evite usar o painel Estilos do Site para aumentar o tamanho do logotipo. É melhor começar com uma imagem grande e reduzir o tamanho após carregá-lo 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

Criar e editar imagens

Acesse Como editar imagens em seu site para ver links de softwares de edição de imagens recomendados.

Cenas de bancos de imagem

Antes de adicionar uma cena de banco de imagem ao seu site, leia nossas melhores práticas.

Editor de imagem integrado

Para ajuda na edição de imagens com o nosso Editor de Imagens integrado, acesse Como editar imagens em seu site.

Tela retina e tela de alta densidade

Para saber como mostrar imagens na tela retina ou na tela de alta densidade, leia Como meu site aparece na tela retina?.

Imagens de produtos

Ao carregar uma imagem de produtos vendidos no seu site, a proporção da imagem precisa corresponder ao tamanho que você selecionou nas opções de tamanho de produtos no painel Estilos do Site.

Para saber mais, acesse Como estilizar a a Página de Produtos Clássica.

Blocos de Imagem

Para informações sobre como usar imagens em Blocos de Imagem, acesse Visão geral de Blocos de Imagem.

Blocos de Galeria

Para informações sobre como exibir imagens em Blocos de Galeria, acesse Visão geral de 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.

Atenção: para uma ajuda mais avançada com a formatação das imagens do seu site, recomendamos nosso fórum para desenvolvedores e clientes, o Squarespace Answers, ou consulte um Squarespace Expert.