O 102 do Código de Email: Trabalhando com Imagens

Publicados: 2020-05-01

Ver o código se espalhando na sua frente pode ser incrivelmente intimidante e, às vezes, frustrante. Prometo a você, de profissional de marketing a profissional, que é muito mais fácil do que parece. Além disso, ser capaz de navegar em HTML de e-mail é uma habilidade incrivelmente valiosa. Em nossa série de noções básicas de código de e-mail, ensinaremos os fundamentos de HTML de e-mail que você precisa saber para se familiarizar com o código de e-mail.

Em nossa última postagem, falamos sobre como você pode navegar no código de seu e-mail para obter mais informações sobre como atualizar links ou fazer alterações de cópia rápidas. Mas e as imagens?

As imagens são a espinha dorsal de muitos e-mails de alto desempenho. Porém, com a complexidade cada vez maior e vários tipos, tamanhos, acessibilidade e tempo de carregamento de arquivo a serem considerados, isso pode sobrecarregar até mesmo o profissional de marketing mais habilidoso.

Neste artigo, abordaremos algumas das maneiras mais comuns de adicionar imagens a seu e-mail e abordaremos o básico para garantir que seus assinantes tenham uma ótima experiência. Se você está procurando um mergulho profundo nas imagens, confira estes guias:

  • Guia definitivo para imagens de fundo em e-mail
  • Um guia para GIFs animados em e-mail
  • Usando imagens em e-mail HTML

Você pode acompanhar facilmente os tópicos abordados neste guia, então vá em frente e abra um e-mail no Litmus Builder e começaremos!

Prepare a sua imagem

Antes de adicionar sua imagem ao e-mail, verifique se ela está configurada para o sucesso. Primeiro, certifique-se de que a imagem que você está usando seja de um bom tipo e tamanho de arquivo para e-mail . Arquivos grandes retardarão seu tempo de carregamento, diminuindo suas conversões e engajamento gerais, então certifique-se de usar uma imagem leve que carregue rapidamente.

Insira sua imagem

Encontre onde deseja adicionar a imagem ao seu código - se estiver usando o Litmus Builder, ative a Visualização de grade para clicar onde deseja que a imagem apareça e clique na visualização do código. Quando você encontrar o local perfeito, use a tag <img> para adicionar em sua imagem, mas substitua o URL aqui por um link direto para sua imagem.

Se você não tiver certeza do que é um link direto, procure o final do nome do arquivo, ele deve terminar com um tipo de arquivo de imagem como “.png,” “.jpg,” ou “.gif.” Links para pastas ou HTML não funcionam aqui, ele precisa apontar diretamente para a imagem que você está adicionando ao seu e-mail.

 <img src="img-url.jpg" />

É isso! Depois de adicionar sua tag, sua imagem será exibida no painel de visualização se você estiver no Litmus Builder.

Curioso para saber onde você pode hospedar suas imagens? A maioria dos ESPs tem um sistema de hospedagem de arquivos onde você pode fazer upload de suas imagens e usar esses URLs públicos para a fonte da imagem em seu e-mail, portanto, certifique-se de verificar seu ESP primeiro. Se o seu ESP não fornece hospedagem de arquivo de imagem, considere usar o AWS da Amazon ou o servidor FTP do seu próprio site para hospedagem de imagem.

Encontre as dimensões certas

É melhor usar uma imagem com o dobro do tamanho do espaço que você gostaria de inserir, para que tenha uma ótima aparência em todos os monitores e não haja pixelização ou borrão. Ajuste a largura e a altura de suas imagens adicionando um modificador à sua tag <img> que você construiu na etapa anterior. Vai parecer algo assim:

 <img src="img-url.jpg" width="400" height="100" />

Ajuste os valores de largura e altura dependendo do que fizer sentido para o seu e-mail. Você pode brincar com esses valores e ver sua aparência fazendo alterações e, em seguida, clicando no painel de visualização no Builder para vê-los atualizados.

Adicionar texto ALT

O texto ALT descreve uma imagem para que aqueles que as desativaram em seu cliente de e-mail ou contam com um leitor de tela possam ler seu e-mail com facilidade. Por exemplo, se tivermos uma imagem de uma promoção oferecendo 20% de desconto, adicionar algum texto ALT descrevendo a oferta informa seu leitor sobre a oferta, mesmo que ele não possa ver as imagens por qualquer motivo.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

O melhor texto ALT é descritivo, sucinto e tem a mesma intenção de sua imagem. Se você passar seu e-mail por meio da Lista de verificação Litmus antes de enviar, sinalizaremos o texto ALT ausente para que você possa acessá-lo e atualizá-lo facilmente. Agora você nem precisa consultar um desenvolvedor!

Trocar imagens

Mudou de ideia sobre aquela imagem? Você tem duas opções:

1. Da mesma forma que criar uma nova imagem, você pode substituir o URL que aponta para sua imagem por um novo. Isso manterá todas as suas dimensões, seu texto ALT ou qualquer outra coisa que possa ajudar a estilizar sua imagem e apenas atualizar o próprio conteúdo da imagem.

Pegue a tag da imagem atual e procure o caminho do arquivo:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Substitua o caminho pelo novo caminho da imagem:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. Dependendo de onde sua imagem está hospedada, você também pode fazer upload de uma nova imagem com exatamente o mesmo nome para o mesmo local. Dessa forma, você não precisa tocar no código para atualizar a imagem do seu e-mail.

E-mail com imagem perfeita

Agora que você tem o poder de atualizar e modificar imagens, use esse poder com sabedoria! As imagens no e-mail podem dar errado rapidamente. Arquivos pesados ​​que demoram muito para carregar, usando imagens para todo o seu e-mail ou dispensando a acessibilidade para design podem criar experiências complicadas para o assinante.

Aqui estão algumas práticas recomendadas rápidas para ter em mente ao criar sua biblioteca de imagens:

  • Mantenha os arquivos leves e simples , com menos de 1 MB é melhor e quanto menor melhor (a Lista de verificação Litmus verifica o tempo de carregamento, então não se preocupe se você não souber todos os tamanhos de imagem).
  • Adicione um texto alternativo para tornar seu e-mail legível e acessível, mesmo se as imagens não estiverem visíveis.
  • Não envie e-mails apenas com imagens e certifique-se de que seu e-mail tenha texto ativo. Pode ser tentador criar um e-mail inteiro usando uma imagem, mas isso pode prejudicar o engajamento e as conversões com longos tempos de carregamento e experiências ruins para aqueles que têm imagens desativadas.

Precisa de ajuda com uma questão específica de código de novato? Diga-nos o que você gostaria de ver a seguir nesta série. Nenhuma pergunta é muito básica!

_________________________________

Saiba mais sobre imagens em e-mail:

  • Por que você não deve enviar e-mails apenas com imagens
  • Um guia para GIFs animados em e-mail  
  • Noções básicas sobre imagens retina em e-mail HTML
  • PNG, GIF ou JPEG? Qual é o melhor formato de imagem para e-mail?  
  • GIFs animados em e-mail: 10 dicas para manter os tamanhos de arquivo pequenos  
  • O guia definitivo para imagens de fundo em e-mail
  • PNGs animados em e-mail: uma alternativa aos GIFs?