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.

Note: Images uploaded via Site Styles, such as background images, always display at their original image width. We recommend loading these images with a maximum of 2500 pixels along their longest edge. For more tips, see Image best practices below.

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.
• In most cases, Squarespace will reformat large images to a maximum width of 2500 pixels. However, images added through Site Styles (background images and site-wide banner images) load at their original dimensions. This can cause page loading issues if the image is over 2500 pixels along its longest edge.

You can reduce an image's dimensions in the Adobe Creative Cloud Image Editor, or use third-party software. We don't recommend enlarging a smaller image, as this can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide. You can also search and add high-quality stock images directly from your 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

Browsers load the full image for images cropped by your site, such as those cropped with the cropping handle or Site Styles aspect ratio tweaks. To reduce the file size of large images, it's better to first crop them close to the intended size manually with third party software or the built-in Adobe Creative Cloud Image Editor.

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.

Image names

An image's name acts as alt text if there isn't any other alt text provided. It also tells search engines what the image is about, which makes it more likely that you'll show up in image searches.

When creating your images, use readable names that will make sense to people who use assistive screen readers or who've disabled images in their browser. For example, if your image name is IMG_0178.jpg, change it to something that describes the image, like blue-ceramic-glazed-planter.jpg.

Keep these tips in mind:

• Be descriptive and helpful. How would you describe this image to someone who couldn't see it?
• Separate each word with a hyphen or underscore.
• Keep your image names short, typically eight words or fewer.
• Incorporate keywords, without "keyword-stuffing."
• You can omit words like "the" and "a," and terms like "photo" or "picture." For example, instead of a-picture-of-a-green-vase.jpg, use the name green-vase.jpg.

Tip: To change the filename for most images, re-upload the image with the new name. In Image Blocks, you can change the Filename field in the Content tab.

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

When adding a logo, upload it at a similar height to that which you'd like to display. In some templates, you can adjust the display height using the Logo Image Height tweak in Site Styles. 

Tip: Avoid having to increase the size of your logo in Site Styles. It's better to start with a large image and then decrease its size once it's uploaded to your 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.

Stock images

Before adding a stock image to your site, review our best practices.

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

When uploading images of products you sell on your site, ensure that the aspect ratio matches what you select for the product size options in Site Styles.

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).