Como adicionar fotos de antes e depois ao seu site

Se você conserta telhados, recupera porões com danos de água, faz estética automotiva, ou toca um estúdio de bem-estar, o seu trabalho pronto é o seu melhor vendedor. Um visitante que consegue ver uma calha caída virar uma linha limpa e reta, ou um teto manchado voltar a ficar branco brilhante, não precisa de um parágrafo de texto para acreditar em você. É por isso que aprender como adicionar fotos de antes e depois ao seu site é uma das horas de maior retorno que você pode gastar na sua presença online.

A maioria dos guias sobre o tema pula direto para um plugin do WordPress e para por aí. Este começa mais cedo, com a parte que de fato decide se as fotos funcionam: fotografar pares combinados, organizá-los, escolher como exibi-los, e deixá-los rápidos e encontráveis. Quer você use um plugin, um criador, ou uma ferramenta feita para você, os fundamentos abaixo são os mesmos.

Por que fotos de antes e depois convertem tão bem

As pessoas confiam no que conseguem verificar. Uma afirmação escrita como "entregamos um trabalho de qualidade" pede ao leitor para acreditar na sua palavra. Uma imagem lado a lado deixa ele julgar por si mesmo em cerca de um segundo. Essa virada, de pedir confiança a deixar alguém verificar, é o motivo todo de essas fotos puxarem o próprio peso.

Elas também fazem um trabalho mais silencioso. Um par forte ajusta expectativas. Alguém que vê o padrão do seu trabalho pronto antes de ligar é um contato mais quente e mais qualificado. Ele não está mais comprando só por preço. Ele está imaginando aquele resultado na própria casa.

Passo 1: fotografe fotos que de fato possam ser comparadas

O maior erro isolado é tratar o "antes" como uma reflexão tardia. Você lembra de fotografar o trabalho pronto, mas o único "antes" que você tem é uma foto de celular borrada tirada em má luz de um ângulo diferente. O par não bate, e a comparação desmorona.

A consistência é o que torna um antes e depois crível. Mire nestas coisas toda vez:

Mesmo ângulo e distância. Fique no mesmo ponto para as duas fotos. Anote um ponto de referência, como um canto da garagem ou uma placa do piso, para você conseguir voltar a ele. Um tripé de celular com um pequeno marcador no chão torna isso repetível.
Mesmo enquadramento. Mantenha a mesma quantidade da cena em vista. Se o "antes" mostra o telhado inteiro e o "depois" mostra um canto, o olho não consegue conectá-los.
Mesma iluminação. Fotografe num horário parecido do dia, ou use a mesma luz de trabalho. Sombras duras de meio-dia numa foto e luz suave de fim de tarde na outra fazem um resultado honesto parecer forjado.
Mesma orientação. As duas fotos na horizontal, ou as duas na vertical. Misturá-las força uma imagem a ser cortada e estraga o alinhamento.
Firme e em foco. Limpe a lente, toque para focar, e fique parado. Um antes nítido contra um depois nítido passa a impressão de trabalho cuidadoso.

Um hábito prático: tire o "antes" no momento em que você chega no local, antes de tocar em qualquer coisa. Faça disso parte da sua rotina de preparo, igual a colocar as lonas de proteção. Você nunca mais vai perder um ótimo estudo de caso porque esqueceu o ponto de partida.

O par de fotos não é decoração. É prova. Fotografe o "antes" como se importasse, porque no seu site importa.

Passo 2: não edite demais

Um pouco de brilho e endireitamento é ok. Filtros pesados, aumentos de saturação, ou qualquer coisa que muda o resultado de verdade cruza uma linha. Os compradores já viram transformações falsas o bastante para desconfiarem, e uma foto que parece boa demais para ser verdade os faz duvidar de todas as outras.

Mantenha as duas imagens editadas do mesmo jeito. Se você clareia o depois, clareie o antes na mesma medida. O objetivo é uma comparação precisa, não um concurso de beleza. Honesto e claro bate dramático e duvidoso toda vez.

Passo 3: peça permissão antes de qualquer coisa ir para o público

Este passo é pulado e não deveria. Se o trabalho está na propriedade de alguém, ou a foto mostra o interior de uma casa, um corpo, um rosto, ou qualquer coisa identificável, pergunte antes de publicar. Para serviços residenciais, uma linha rápida na sua ordem de serviço ou uma mensagem de acompanhamento basta: podemos usar fotos do trabalho pronto no nosso site e nas redes sociais. Para bem-estar, saúde, ou qualquer coisa pessoal, obtenha por escrito, e trate um sim verbal como não suficiente.

O enquadramento ajuda. A maioria dos clientes fica feliz de ser exibida quando você apresenta como orgulho no resultado em vez de um favor que você está pedindo. Mantenha um registro simples de quem disse sim para você nunca ter que adivinhar depois.

Passo 4: escolha como as fotos vão aparecer

Há três formas comuns de mostrar um par, e a certa depende do trabalho e do dispositivo.

Controle deslizante interativo. Uma única imagem com uma alça no meio que o visitante arrasta para a esquerda e para a direita para revelar entre o antes e o depois. É envolvente e funciona lindamente quando as duas fotos batem quase perfeitamente, como a mesma parede ou a mesma linha do telhado. Exige pares bem combinados, ou o efeito fica torto.
Par lado a lado. Duas imagens uma ao lado da outra com rótulos claros. Mais simples, mais rápido de carregar, e tolerante quando os ângulos não batem perfeitamente. Num celular as duas imagens normalmente empilham, então garanta que cada uma ainda funcione numa tela pequena.
Grade ou galeria. Um conjunto de pares numa página de resultados ou galeria dedicada. É aqui que você constrói um corpo de prova ao longo do tempo. Agrupe por tipo de trabalho para um contato de telhados ver telhados e um contato de ar-condicionado ver ar-condicionado.

Se você está só começando, pares lado a lado são a escolha segura. São fáceis de acertar, carregam rápido, e nunca deixam um visitante confuso sobre qual imagem é qual. Adicione um controle deslizante depois para os seus melhores pares combinados.

Passo 5: rotule cada par

Uma comparação sem rótulo faz o visitante trabalhar, e visitantes confusos saem. Marque qual imagem é o antes e qual é o depois, e adicione uma linha de contexto.

Rótulos específicos batem os genéricos. "Antes" e "depois" é o mínimo. "Dano de tempestade, reparado em um dia" ou "Extração de água e recuperação completa, três dias" conta uma história e responde a pergunta se formando na cabeça do leitor: quanto tempo, quanta bagunça, o que exatamente mudou. Uma legenda curta muitas vezes é a diferença entre uma foto bacana e uma foto que fecha uma ligação.

Passo 6: otimize as imagens para a página se manter rápida

Arquivos de imagem grandes são o assassino silencioso dessas páginas. Uma galeria cheia de fotos direto do celular pode ter dezenas de megabytes, e numa conexão de celular essa página pode levar vários segundos para aparecer. Muitos visitantes saem antes de sequer ver o seu trabalho. A velocidade importa para o posicionamento na busca também.

Faça isto antes de subir:

Redimensione. Você raramente precisa de uma imagem mais larga do que cerca de 2000 pixels para a web. Encolha as dimensões primeiro.
Comprima. Passe as fotos por um compressor gratuito, ou exporte como um formato moderno como WebP. Você normalmente pode cortar o tamanho do arquivo pela metade ou mais sem queda visível de qualidade.
Mire baixo. Uma única foto web abaixo de mais ou menos 300 kilobytes é uma boa meta. Mais leve é melhor, desde que ainda pareça nítida.
Carregamento tardio (lazy load). A maioria dos sites e criadores modernos carrega as imagens só conforme o visitante rola até elas. Se o seu oferece isso, ligue para o topo da página aparecer em menos de 3 segundos.

Passo 7: escreva texto alternativo para cada imagem

O texto alternativo é a curta descrição escrita anexada a uma imagem. Ele importa por dois motivos. É o que um leitor de tela anuncia a um visitante que não consegue ver a foto, então é um requisito básico de acessibilidade. E é uma das formas pelas quais os buscadores entendem as suas imagens, o que pode te trazer tráfego da busca por imagens.

Escreva com simplicidade e descreva o que é mostrado. Algo como "antes e depois de um telhado asfáltico coberto de musgo limpo até a telha nua" já cumpre a função. Pule o encher de palavras-chave. Uma frase honesta por imagem basta. Faça isso tanto para o antes quanto para o depois.

Passo 8: coloque os pares onde as decisões acontecem

Uma página de galeria é boa, mas os pontos de maior valor são as páginas em que alguém está perto de ligar. Solte um par relevante na sua página inicial perto da sua chamada para ação principal, e em cada página individual de serviço. Um visitante lendo a sua página de troca de telhado deveria ver um resultado de troca de telhado ali mesmo, não ter que caçar uma galeria separada.

Atualize o conjunto conforme você termina novos trabalhos. Uma seção de resultados que visivelmente cresce diz aos visitantes que você está ativo e consistente, o que é a sua própria prova silenciosa.

Erros comuns a evitar

Só ter um "depois" e nenhum "antes" combinando.
Ângulo, zoom ou iluminação diferentes entre as duas fotos.
Publicar a casa ou o rosto de um cliente sem perguntar.
Arquivos enormes que fazem a página se arrastar num celular.
Sem rótulos, para o visitante não conseguir dizer qual é qual.
Um par dramático e nada mais, o que passa a impressão de sorte em vez de padrão.

Se você prefere só descrever e ter tudo feito

Tudo acima presume que você é quem posiciona as imagens, ajusta o controle deslizante, redimensiona os arquivos, e escreve o texto alternativo. Isso é bem possível, e para muitos donos um plugin ou criador dá conta. Mas também é uma noite que você pode não ter.

Esta é a parte que a Saynovo foi construída para remover. Em vez de brigar com um plugin, você diz ao seu site o que quer em linguagem simples, algo tão simples quanto "adicione uma seção de antes e depois na minha página de telhados com estas duas fotos", e a mudança acontece. O seu site é gerado a partir das suas informações de negócio existentes, e as edições são feitas conversando com ele em vez de aprender um editor. Se cuidar das imagens, dos rótulos e do layout você mesmo soa como uma tarefa a mais, ter o site fazendo isso a pedido vale uma olhada em saynovo.com.

Como adicionar fotos de antes e depois ao seu site: a versão curta

A mecânica de como adicionar fotos de antes e depois ao seu site é fácil uma vez que a base está sólida. Fotografe pares combinados com o mesmo ângulo e luz, mantenha a edição honesta, peça permissão, rotule cada par com contexto de verdade, comprima os arquivos, escreva texto alternativo, e coloque os resultados nas páginas em que as pessoas decidem ligar. Acerte isso e o método de exibição, seja um controle deslizante, um lado a lado, ou uma galeria, é a parte simples. O seu trabalho pronto vai fazer a venda, que é exatamente o que ele deveria estar fazendo.