Um guia detalhado para criar as melhores imagens para landing pages

Lucia Extrakt
Lucia Extrakt

Atualizado:

Publicado:

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.

melhores imagens para landing pages

Imagens gratuitas e sem royalties

Faça o download desse banco de imagens com mais de 200 imagens grátis

  • Imagens exclusivas
  • Conteúdo gratuito
  • Para todas as ocasiões
  • Imagens prontas para usar

    Baixe agora

    Todos os campos são obrigatórios.

    Está tudo pronto!

    Clique neste link para acessar este recurso a qualquer momento.

    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. 

    Baixe 250 imagens gratuitas  para o seu negócio

    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. 

    Nova chamada à ação
    Tópicos: Landing Pages

    Artigos relacionados

    Guia para fazer uma análise de mercado completa