Um guia detalhado para criar as melhores imagens para landing pages

As landing pages temperam a vida. Ou, no mínimo, temperam uma boa conversa online. Além de escrever um ótimo título e ter uma grande oferta, você precisa de grandes imagens para completar sua landing page. Afinal de contas, uma imagem vale mais que mil palavras.

Mas, e se você precisar conseguir uma grande imagem e não tem um designer gráfico disponível para criá-la? Siga essas dicas para obter as melhores imagens de landing page e aumente suas conversas!

1) Encontre imagens gratuitas

Claro, a primeira coisa de que você precisa são algumas imagens. Você pode comprá-las em várias agências de fotos online (veja as nossas dicas aqui). Assim que você encontrar a foto perfeita para sua landing page, será hora de otimizá-la para a web.

2) Efeitos de imagem

Assim que tiver uma imagem, provavelmente será necessário alterá-la um pouco. 

Há muitos sites que permitem que você faça alterações em imagens, além de todos os óbvios produtos da Adobe.

Dependendo do que você quer fazer, a HubSpot pode ter o suficiente para isso em seu editor de imagem, que é possivelmente uma das ferramentas mais subutilizadas da HubSpot. A maioria dos clientes da HubSpot para quem eu mostrei essa ferramenta, nunca havia a utilizado antes.

Ela trata de muitas tarefas simples de imagem de que você precisa, como redimensionar e cortar.

Ao alterar o balanço de vermelho e o foco, você pode obter alguns efeitos muito legais, caso esteja procurando criar uma boa imagem de fundo:

3) Cheque suas imagens e o desempenho da página

Um dos principais fatores que afetam as imagens da landing page é seu tamanho, que pode reduzir bastante a velocidade de carregamento da landing page no navegador do prospect. Quanto mais lento for o carregamento, maior a chance do prospect desistir e nunca ver a oferta e assim nunca converter.

Você pode testar todas as suas landing pages (e todas as imagens nessas páginas) na ferramenta gratuita PageSpeed Insights da Google.

Isso é fácil de ser feito. Basta colocar a URL da sua landing page e pronto:

Para suas novas imagens, você deve sempre considerar o desempenho da página ao criar a imagem.

4) Determine as dimensões da imagem

O maior problema com o desempenho da página são as dimensões da imagem. Muitas pessoas farão o upload de uma imagem muito grande (p.ex., 2.000 x 2.000 pixels) e usarão HTML para "dimensionar" a imagem para 200 x 200 pixels. O problema é que o navegador ainda carregará a imagem de 2.000 x 2.000 pixels, essencialmente carregando 10 vezes mais do que precisa.

Você deve garantir que sua imagem corresponda aproximadamente às dimensões vista na tela, para que não precise redimensioná-la no HTML. 

Lembre-se: a maioria dos websites usa apenas 900-1.200 pixels de largura em um desktop, portanto, você raramente desejará ver imagens com mais de 1.000 pixels em largura. 

5) Redimensione sua imagem da landing page

Há muitas ferramentas para fazer isso online ou offline. Uma de nossas favoritas, quando não estamos usando o editor do HubSpot, é a ferramenta gratuita Online Photo Editor da Pixlr.com

Primeiro, abra um arquivo de imagem ou URL usando o menu "File" (Arquivo) na parte superior da tela. Em seguida, clique em "Image" (Imagem) na parte superior do menu e selecione "Image size" (Tamanho da imagem).

Uma janela será aberta perguntando quais dimensões você deseja usar. Certifique-se de manter a caixa “Constrain proportions” (restringir proporções) marcada para que a imagem não fique espremida.

Assim que tiver o tamanho de imagem que deseja, basta clicar em "Save" (Salvar) no menu "File" (Arquivo) e salvar sua imagem no seu computador.

6) Dimensione sua imagem para redes sociais

Ao dimensionar suas imagens, você deve garantir que sua imagem esteja otimizada para compartilhamento social.

Cada site de rede social tem seus próprios padrões para dimensões de imagem. No nosso guia de produção você consegue ver os tamanhos certos para cada rede social.  

Essas são as imagens que as redes sociais usarão quando alguém compartilhar sua landing page. Você pode ver porque isso é importante. 

Isso pode envolver a criação de várias cópias da sua imagem em diferentes tamanhos, dependendo para quais plataformas sociais você deseja otimizar. 

7) Comprima imagens

Agora que suas imagens estão no tamanho correto e estilizadas, você deve comprimir o arquivo mais um pouco para acelerar o tempo de carregamento da sua página.

Eu prefiro tinypng.com para compressão de imagem. Seus resultados são confiáveis e, apesar do nome, ele comprime arquivos .jpg e .png.

É só arrastar seus arquivos sobre a página e eles serão comprimidos ali mesmo para você.

Após soltar seus arquivos, será exibida uma lista de todos os arquivos recém-comprimidos disponíveis para download. Baixe os arquivos em seu computador e agora você terá imagens otimizadas!

Agora, você pode fazer o upload das imagens em seu site!

8) Configurar seus alt texts

Assim que tiver uma imagem em sua landing page, você precisará definir o tag alt. O tag alt da imagem oferece um texto descritivo sobre sua imagem para pessoas que não conseguem exibir a imagem.

Além disso, tags alt melhoram a SEO. Eles permitem que os mecanismos de pesquisa interpretem melhor o conteúdo de suas imagens lendo palavras-chave de seus tags alt.

A maioria dos sistemas de gerenciamento de conteúdo permite que você defina seus tags alt ao editar ou selecionar uma imagem. NoaHubSpot, por exemplo, você pode alterar o texto alt no módulo de edição de imagem:

Ao escrever seus tags alt, tenha em mente esses pontos:

• Certifique-se de que a descrição está relacionada com a imagem. Não encha o texto alt com palavras-chave irrelevantes.
• Embora não haja um limite oficial de palavras que podem ser adicionadas ao texto alt, é melhor que ele seja breve. Realisticamente, muitas imagens exigem bem menos que 10 palavras para descrição.

Conclusão

Você está pronto! Você deve ter uma imagem de landing page bem projetada e otimizada que ajudará as conversas aumentarem.