Cómo insertar una imagen en un correo HTML

Porpiclinkadmin

Hay tres formas de incluir imágenes en un correo HTML. Para la mayoría, el enlace a una imagen alojada es la más fiable.

1. Imagen alojada (recomendado)

Sube la imagen y usa su enlace directo:

<img src="https://your-image-link.jpg" width="600" alt="Spring sale banner" style="display:block;border:0">
  • Funciona en Gmail, Outlook, Apple Mail y otros
  • Mantiene el correo ligero
  • Las imágenes pueden quedar ocultas hasta que el lector pulsa «mostrar imágenes», así que añade siempre texto alternativo

Obtén un enlace en segundos con Convertir imagen a URL.

2. CID (adjunta y referenciada)

La imagen se adjunta al correo y se referencia como cid:logo123. La mayoría de los clientes de escritorio la muestran, pero algunos webmails también la muestran como adjunto, y aumenta el tamaño del correo.

3. Base64 (datos incrustados)

La imagen se codifica dentro del HTML como data:image/png;base64,…. Varios clientes importantes, incluido Gmail, la bloquean o la ignoran, así que es mejor evitarla para imágenes importantes.

Consejos

  • Define los atributos width y height para que el diseño no salte.
  • Mantén cada imagen por debajo de unos 200 KB.
  • Usa JPG para fotos y PNG para logotipos con transparencia.
  • No pongas texto importante solo dentro de imágenes.
  • Asegúrate de que el enlace de la imagen no caduque antes de que la gente abra el correo.

Artículos similares