Como adicionar fotos ao seu site

A primeira impressão do público sobre seu site é influenciada pelas imagens que você escolhe para representar sua marca. As fotos e outras mídias que complementam as palavras no seu site fazem parte da construção do site e ajudam você nos seus objetivos.

Aqui você descobre como obter imagens para o seu site, os melhores formatos de imagem, como fazer upload de imagens para uma página da web e como otimizar as fotos para buscadores e acessibilidade.

Onde obter imagens para o seu site

O primeiro passo para escolher as imagens para o seu site é identificar quais tipos se alinham com sua marca e seu design. Após determinar a estética que representa sua marca, você pode procurar as fotos e imagens que a representarão. 

As fotos de acervo e geradores de imagem são um bom lugar para começar, principalmente quando você está abrindo uma empresa e ainda não possui muitas fotos. O Squarespace oferece integrações com serviços de fotos de acervo para você encontrar imagens de qualidade e baixo custo para uso no seu site.

Para obter imagens para o seu site, você também pode tirar as fotos ou contratar um fotógrafo, dependendo do seu orçamento.

O Squarespace fechou parceria com o Soona para oferecer serviços de fotografia de produtos. Envie seus produtos para o Soona e selecione os tipos de imagem e o estilo - desde GIFs e vídeos até fotos do modelo do produto. Você pode criar uma coleção de fotos ou usar o Pacote Squarespace Starter ou o Pacote Squarespace Deluxe. 

Você mesmo tirar as fotos ou trabalhar com um profissional exige mais tempo do que selecionar as fotos de um acervo, mas há mais benefícios. Fotos que representam diretamente a sua marca (fotos de você, do seu estúdio ou vitrine, dos seus itens à venda ou da sua equipe em ação) podem aumentar sua credibilidade e a confiança do seu público. 

Seja usando fotos de estoque ou não, ao vender produtos, tire uma foto original de cada produto para sua loja on-line.

Como formatar imagens no seu site

Quando for adicionar fotos ao seu site, escolha imagens de alta resolução que tenham formas semelhantes às áreas onde você pretende adicioná-las no template do site. Por exemplo, se estiver carregando uma imagem em um banner, escolha uma imagem que seja mais larga do que alta. 

Além disso, o design responsivo dos sites Squarespace ajusta automaticamente o tamanho das imagens para caberem em qualquer plataforma: aparelhos móveis, browsers de desktop e telas com diferentes larguras.

Para que o carregamento das fotos e imagens do seu site seja rápido e tranquilo, preste atenção no formato, na resolução e no tamanho do arquivo da imagem. 

Melhores formatos de imagem para sites

Os dois principais formatos de imagem são o JPEG (fotos) e o PNG (outras imagens). O melhor formato para sites é o JPEG, que renderiza o amplo espectro de cores típico das fotografias. O melhor formato para sites é o PNG, que beneficia ilustrações nítidas, como logotipos ou infográficos com pouca variedade de cores. 

Melhores tamanhos e resolução de imagem para sites

Ao carregar uma imagem, seja qual for o formato, é fundamental que seja de alta resolução. Recomendamos imagens com 1500 a 2500 pixels de largura. 

É importante haver um equilíbrio entre imagens de alta resolução e arquivos de tamanho menor. Fotos e imagens grandes demais deixam o carregamento da página mais lento. Experimente ajustar a resolução da imagem e o tamanho do arquivo — para isso, comprima o arquivo de imagem ou a diminua se ela for grande demais. Os principais programas de edição de imagem fazem isso. 

É recomendável arquivos em JPEG ou PNG de no máximo 500 KB por imagem. Para otimizar o tempo de carregamento, cada página do site deve ter até 2 MB. Para ver o tamanho de cada página do seu site, use uma ferramenta externa on-line ou uma ferramenta para desenvolvedores integrada ao seu browser. 

Para encontrar o tamanho de cada página da web com ferramentas para desenvolvedores: 

1. Clique com o botão direito do mouse na página da web e selecione “Inspecionar” ou “Inspetor de página” (dependendo do tipo de navegador que você estiver utilizando). O painel exibido chama-se ferramentas para desenvolvedores. 

2. Selecione a guia “Rede” na parte superior desse painel. 

3. Atualize a página.

4. O número exibido antes da palavra “transferido” é o tamanho da página em questão. Por exemplo, pode ser “200 KB transferidos” indicaria que a sua página da web está abaixo do limite de tamanho de 2 MB.

Como adicionar fotos ao seu site

Quando tiver selecionado e compactado as suas fotos, é hora de adicioná-las ao seu site. São duas as etapas principais: ajustar imagens no layout da página e harmonizar as imagens e o texto. 

Como incorporar fotos no seu site

Comece com um template de site — é a forma mais simples de adicionar fotos e outras imagens ao seu site. Os templates do Squarespace facilitam a inserção de imagens nos locais mais eficazes, e você nem precisa ser expert em design. É possível carregar as fotos diretamente no editor do site; ou adicioná-las à sua biblioteca de ativos, organizá-las e reutilizá-las depois.

Ferramentas de criação de sites, como as do Squarespace, também personalizam como suas imagens aparecem no site. Você pode, por exemplo, carregar uma imagem ou adicionar várias fotos em uma galeria ou num slideshow — ideal para quem está criando um site de portfólio.

Se você não gostar de como uma imagem maior foi recortada, ajuste o ponto focal. Para ajustar o tamanho e o posicionamento das imagens, use um bloco de imagem, de cartão, de sobreposição ou de colagem. Para refinar o layout, selecione "Largura da imagem" no painel "Design". E, para ajustar ainda mais o layout das imagens, você pode cortá-las no editor da imagem e adicionar blocos para modificar o espaçamento na página.

Equilíbrio das imagens e do texto

As imagens devem complementar a cópia do site e vice-versa - nenhuma delas precisa fazer o trabalho pesado sozinha. Uma imagem em negrito com cópia esparsa, por exemplo, pode ilustrar um objetivo tão bem quanto as imagens usadas para dividir páginas com uma cópia mais densa. 

Não é recomendado incluir texto em seus arquivos de imagem. Em vez disso, quando adicionar fotos ao seu site, coloque o texto sobre elas com campos de texto. Esse método atenuará os problemas de redimensionamento do navegador e permitirá que o seu texto seja rastreado pelos motores de busca.

Otimize as imagens no seu site

A otimização para motores de busca (SEO) não serve apenas para a cópia do site. O nome que você dá aos seus arquivos de imagem afeta como os buscadores indexam seu site e como as pessoas o encontram. Também é importante otimizar o texto alternativo das imagens - é uma descrição mais detalhada da imagem do que o nome do arquivo. 

Dê a cada um dos seus arquivos um nome direto que os motores de busca possam reconhecer. Dê a eles um nome que os descreva e não use pontuação, somente hifens. Por exemplo, uma foto de arte em unhas para um salão de manicure e pedicure pode ter o nome de arquivo “arte-floral-unha-salão-manicure-pedicure”. 

É ainda mais importante compor um texto alternativo para todas as fotos e imagens que você adiciona ao site. O texto alternativo na imagem não só ajuda na SEO como otimiza seu site para acessibilidade do leitor de tela. Faça descrições concisas, com até 250 caracteres. 

Considere o que alguém com deficiência visual pode querer saber sobre a imagem. Um texto alternativo útil para uma foto de manicure pode ser: “Foto de mãos com unhas compridas e quadradas pintadas de branco com desenhos florais vermelhos.” Não há problema em excluir os artigos (a, de, em) e a pontuação das frases, desde que o leitor de tela possa ler.

Esta publicação foi atualizada em 17 de novembro de 2023.