Como Inserir uma Imagem em um E-mail HTML

Porpiclinkadmin

Há três formas de incluir imagens em um e-mail HTML. Para a maioria das pessoas, o link de uma imagem hospedada é o mais confiável.

1. Imagem hospedada (recomendado)

Envie a imagem e use o link direto dela:

<img src="https://your-image-link.jpg" width="600" alt="Spring sale banner" style="display:block;border:0">
  • Funciona no Gmail, Outlook, Apple Mail e outros
  • Mantém o e-mail leve
  • As imagens podem ficar ocultas até o leitor clicar em “mostrar imagens”, então sempre adicione texto alternativo

Gere um link em segundos com Converter imagem em link.

2. CID (anexada e referenciada)

A imagem é anexada ao e-mail e referenciada como cid:logo123. A maioria dos clientes de desktop a exibe, mas alguns webmails também a mostram como anexo, e ela aumenta o tamanho do e-mail.

3. Base64 (dados embutidos)

A imagem é codificada no HTML como data:image/png;base64,…. Vários clientes importantes, incluindo o Gmail, bloqueiam ou ignoram esse formato, então é melhor evitá-lo para imagens importantes.

Dicas

  • Defina os atributos width e height para o layout não pular.
  • Mantenha cada imagem abaixo de uns 200 KB.
  • Use JPG para fotos e PNG para logotipos com transparência.
  • Não coloque textos importantes só dentro de imagens.
  • Garanta que o link da imagem não vai expirar antes de as pessoas abrirem o e-mail.

Posts parecidos