¿Qué tenemos que saber para armar una pieza HTML de forma correcta? Parte III: Imágenes

En las notas anteriores desarrollamos cuáles son los lineamientos generales para el armado de la pieza HTML y los textos. Ahora profundizaremos en las IMÁGENES.

Todas estas recomendaciones son fundamentales ya que un correcto armado de la pieza HTML implica tener más posibilidades de que nuestro mensaje llegue a bandeja de entrada y no a correo no deseado. Por otro lado generaremos mayor confianza a nuestro destinatario en cuanto a lo que le enviamos y también en lo que respecta a la credibilidad de la empresa o institución. 

Código:

Parte 3

Peso y tamaño

Es importante optimizar el peso de las imágenes a utilizar. Es recomendable que no superen más de 250 kb. En cuanto al tamaño del ancho, las imágenes deben tener como máximo recomendable 600 px.

No se recomienda utilizar imágenes de fondo ya que los clientes de correo como Outlook no lo soportan. Lo ideal es utilizar colores de fondo en las celdas o tablas a partir del atributo BGCOLOR (para las tablas) o el estilo background para las celdas.

Bloqueo de imágenes

Como muchos clientes de correo deshabilitan las imágenes del HTML por default, existen varias recomendaciones para optimizar la pieza a partir de reemplazarlas por textos. De esta forma, los destinatarios comprenderán de qué se trata el mensaje y son más las chances de que desbloquee las imágenes si la información es de su interés.

Texto ALT

El texto alternativo es una de las mejores maneras de suplir las imágenes. Se trata del texto que se muestra antes de que una imagen se descargue. Esta vía proporcionará un contexto útil para los destinatarios.

Para insertar texto ALT debemos agregar el siguiente atributo a la imagen:

04 alt

Es importante incluir el tamaño de alto y ancho (width – height), de esta forma estaríamos creando una “caja contenedora” para circunscribir el texto ALT cuando las imágenes están deshabilitadas.

Debemos elegir una frase que represente la imagen. Por ejemplo, si enviamos un mail promocional y la imagen es de un hotel, la frase podría ser: “Hotel X, Bariloche. A 5 cuadras del centro comercial”.

Texto sin Alt

05 sin alt

Texto con Alt

04 altimagen

 Texto ALT con estilo

Podemos agregar mayor valor a esta táctica si cambiamos la fuente, color, tamaño, estilo y el peso.

Para insertar texto ALT con estilo debemos agregar el siguiente atributo a la imagen:

05 alt con estilos

Texto Alt con estilo:

05 alt con estilosb

Las próximas publicaciones del tutorial sobre el correcto armado de una pieza HTML serán los jueves

10/7: “Links y Call to actions”
17/7: “Responsive Design”

Tutoriales anteriores:

“Aspectos generales” de una pieza HTML.
Textos“.

 

María Kocsis

Marketing 360º

Post Relacionados