Squarespace retira a configuração da formatação das suas imagens para visualização na web. Criamos sete variações de cada imagem enviada, para garantir uma exibição perfeita em qualquer tamanho de tela.

temos algumas recomendações sobre como formatar as suas imagens antes de As enviar. Para melhores resultados, siga as sugestões abaixo.

Tip: visite a nossa série de vídeos sobre Imagens para mais conselhos e tutoriais passo-a-passo sobre a adição de imagens em todo o seu site.,

Assista a um vídeo

Antes de começar

Para encontrar o tamanho e as dimensões da sua imagem original antes de fazer o upload para o seu site:

• PC – clique Direito no arquivo de imagem e selecione Propriedades.
• Mac – Press opção ao carregar no ficheiro da imagem, depois seleccione obter informação.

glossário

Aqui está alguma da terminologia que você verá neste guia.

• proporção – a proporção da imagem é a sua relação largura / altura expressa como um número, como 3: 4., Manter uma proporção consistente impede que as imagens se tornem Distorcidas. Por exemplo, se você reduzir a largura de uma imagem para a metade, Você também deve reduzir a altura para a metade.
• largura da imagem-neste guia, os tamanhos da imagem referem-se ao número de pixels ao longo da largura e altura da imagem. Sua imagem pode exibir maior ou menor no seu site, dependendo do tamanho do seu recipiente. Para saber mais, visite redimensionar uma imagem.

O que acontece depois de enviar uma imagem?

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

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

As alterações de altura em relação à largura, para preservar o formato da imagem. O design responsivo embutido do Squarespace escolhe o tamanho adequado da imagem com base na tela do visitante.

Nota: imagens carregadas através de estilos de Site, tais como imagens de fundo, sempre exibir em sua largura de imagem original. Recomendamos carregar estas imagens com um máximo de 2500 pixels ao longo de sua borda mais longa., Para mais dicas, consulte as melhores práticas da imagem abaixo.

Requisitos de imagem

ao carregar imagens para o seu site, siga estas orientações:

tipos de Ficheiros

guardar imagens em .jpg .Gif, or .apenas o formato png.

.documento, .estoque, .tff, and .os ficheiros doc não são compatíveis com a web.

Tip: pode criar ligações de download para ficheiros não compatíveis com a web.

File name

use apenas letras, números, sublinhados e hifens em nomes de arquivos., Outros caracteres (como letras acentuadas, pontos de interrogação, sinais percentuais e amplificadores) podem carregar incorretamente ou causar um comportamento inesperado nas galerias.

resolução

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

Tip: para encontrar o MP para uma imagem, multiplique as dimensões e divida por um milhão. Por exemplo, uma imagem com dimensões de 1500px x 1650px é de 2,475 MP.

modo de cor

gravar imagens no modo de cores RGB. O modo de cores CMYK é apenas para materiais impressos e não aparecerá corretamente na maioria dos navegadores., Se você notar variação com suas imagens, verifique seus arquivos de imagem para garantir que eles estão no modo de cor RGB.

perfil de cores

gravar as imagens no perfil de cores sRGB. Se as imagens não parecem bem nos dispositivos móveis, é provavelmente porque eles não têm um perfil de cores sRGB.

as melhores práticas da imagem

tamanho do ficheiro

recomendamos a utilização de ficheiros de imagem de menos de 500 KB para obter melhores resultados, embora o limite para um envio individual da imagem seja de 20 MB. Quando se trata de tamanho da imagem, maior nem sempre é melhor, como o upload de várias imagens grandes pode afetar o desempenho do site., Se você está adicionando várias imagens a uma página, mantenha o tamanho geral da página em mente.

Largura da imagem

As dimensões da imagem original que envia para o seu site podem ter um grande impacto na forma como ela é exibida. Recomendamos a utilização de imagens com entre 1500 e 2500 pixels de largura.

• imagens menores que 1500 pixels podem parecer desfocadas ou pixelizadas quando se esticam para encher recipientes, tais como estandartes. Para saber como os banners dimensionam em diferentes dispositivos e larguras de tela, visite o design responsivo.,
• na maioria dos casos, o Squarespace irá reformular imagens grandes para uma largura máxima de 2500 pixels. No entanto, as imagens adicionadas através de estilos de Site (imagens de fundo e imagens de banner de todo o site) carregam em suas dimensões originais. Isso pode causar problemas de carregamento de páginas se a imagem for mais de 2500 pixels ao longo de sua borda mais longa.

você pode usar software de terceiros para reduzir as dimensões de uma imagem. Não recomendamos a ampliação de uma imagem menor, pois isso pode fazê-la parecer pixelizada. Em vez disso, comece com uma imagem com pelo menos 1500 pixels de largura., Você também pode pesquisar e adicionar imagens de estoque de alta qualidade diretamente do seu site.

Tip: se estiver a ver problemas de carregamento, como uma imagem de fundo que não está a carregar no telemóvel, tente reduzir o bordo mais longo de todas as imagens para 1500 pixels. Esta é a combinação mais segura de qualidade de imagem e velocidade de carregamento para os seus visitantes.

recorte de imagens

navegadores carregam a imagem completa para imagens recortadas pelo seu site, tais como as recortadas com o cabo de recorte ou com os ajustes de proporções de estilos do Site., Para reduzir o tamanho do arquivo de imagens grandes, é melhor primeiro recortá-las perto do tamanho pretendido manualmente com o software de terceiros ou o Editor de imagens embutido.

texto da imagem

sempre que possível, recomendamos a adição de texto como uma sobreposição em vez de incluí-lo dentro da imagem. Isso torna o texto pesquisável e mantém-no visível se a imagem cultiva em dispositivos menores. Veja as nossas dicas para adicionar texto sobreposto a blocos de imagens, banners, páginas de Galeria e blocos de Galeria.

Se sua imagem contém texto, é melhor salvá-lo como um .ficheiro png. Mensagem em A.,JPG file often becomes blurry when the image is compressed. A .o arquivo png normalmente mantém sua nitidez, especialmente se a imagem está exibindo em seu tamanho original.

nomes de imagens

o nome de uma imagem funciona como texto alt se não houver qualquer outro texto alt fornecido. Ele também diz aos motores de busca sobre o que a imagem é, o que torna mais provável que você vai aparecer em buscas de imagens.ao criar as suas imagens, tenha em mente as melhores práticas do texto alt.

Tip: para alterar o nome do ficheiro para a maioria das imagens, re-upload a imagem com o novo nome., Nos blocos de imagem, você pode mudar o campo de nome do arquivo na página de conteúdo.

proporções

ajuda a assegurar que cada imagem que está a usar tenha a mesma proporção (altura:largura) antes de carregar, uma vez que as imagens são tipicamente recortadas com base na sua largura e altura. Se todas as suas imagens tiverem a mesma proporção de aspecto, será mais fácil prever como elas irão recortar. Para saber mais, visite as razões de compreensão de aspectos.

orientação

certifique-se de que a sua imagem está na orientação correcta antes de a enviar., Se a sua imagem é gravada de cabeça para baixo, rode a imagem com o software de edição de imagem antes de a carregar para o seu site.

Se você já adicionou a imagem ao seu site, você pode rodar a imagem usando o Editor de imagem embutido.

PPP e PPI

Se estiver preocupado com a resolução da imagem, Concentre-se nas dimensões da imagem e mantenha os tamanhos dos ficheiros abaixo de 500 KB, em vez de PPP (pontos por polegada) ou PPI (pixels por polegada). DPI e PPI afetam a qualidade de impressão de uma imagem, mas não a sua exibição na web.,

tamanho da Página

mesmo que todas as suas fotos estejam abaixo de 500 KB, se você tem um grande número de imagens em uma página, isso pode causar problemas como velocidades de carregamento lentas. Verifique o conteúdo da sua página para garantir que o seu tamanho da página é de 5 MB ou inferior.

logotipos

reveja os nossos requisitos de imagem antes de adicionar um logótipo. Formatar a imagem para que seja semelhante em altura à forma como você quer que ela seja exibida. Nós não precisamos de um tamanho específico para o seu logotipo, mas é melhor começar com uma imagem maior. Quando a sua imagem é muito pequena para começar, ela pode pixelizar ao redimensionar. Pode alterar o tamanho depois de carregar o logótipo.,

Se o seu site está na versão 7.0, como você redimensiona um logotipo depende do seu modelo.

Favicons

ao adicionar um favicon ao seu site, certifique-se de que a imagem é salva como um .ico ou A.ficheiro png.

As dimensões de ficheiro recomendadas para um favicon são de 100px × 100px a 300px × 300px. Favicons irá exibir em navegadores como 16px × 16px.

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

Animated .Gifs

Animated .gifs são uma exceção à nossa regra de 1500-2500 pixels, especialmente .gifs em blocos de imagem., A 1500 pixels de largura .gif provavelmente será muito grande, o que poderia potencialmente abrandar o seu site. Recomendamos a formatação animada .gifs em qualquer tamanho que você quer que eles exibam em seu site.

mais ajuda

• Editor de imagens incorporado-visite editar imagens no seu site.imagens de estoque-antes de adicionar uma imagem de estoque ao seu site, reveja nossas melhores práticas.
• visores de alta densidade e Retina-Visita Design sensível.imagens do produto-visite os tipos de páginas da loja.Blocos de imagem-visitar Blocos de imagem.,secções da galeria-visitar secções da galeria na versão 7.1.Blocos de Galeria-visitar Blocos de Galeria.
• páginas da galeria-visitar páginas da galeria.
• meta-dados da imagem-visitar a importação de meta-dados da imagem.