Como en la mayoría de las aplicaciones publicitarias, que un newsletter sea atractivo puede depender mucho de las imágenes que acompañan al contenido.

Actualmente, por cuestiones de seguridad, muchos de los clientes de correo cuentan con múltiples restricciones para la correcta visualización de imágenes dentro de los emails, muchas veces el usuario tiene que permitir que se vean, o indicar que desea verlos, pero para usuarios de email menos familiarizados con la opción podrían pasarla por alto, por lo que hay que tratar de que, independientemente de la configuración del usuario, podamos hacerles llegar la información de manera adecuada, siguiendo los tips que te presentaremos a continuación.

Al finalizar ésta guía podrás optimizar la visualización de las imágenes en los diferentes servidores de correo y tener opciones para las diferentes restricciones que éstos tienen para las imágenes.Esta guía es para usuarios de nivel: básico e intermedio

• Animaciones

Para enviar imágenes animadas el único formato soportado por los servidores de correos es el “.gif”, (aunque en Outlook desde la versión 2007 no se verá la animación, sino que se mostrará el primer frame de esta), ya que Outlook detiene los archivos con formato “.gif”, por seguridad, así que al insertar una imagen animada en ese formato, trata de que el primer cuadro o frame de la animación tenga el contenido suficiente para que el usuario sepa de que se trata, por si alguno de tus usuarios utiliza Outlook.
Ejemplo de animación en newsletters

• Imágenes para Retina

La optimización de las imágenes para monitores high DPI o retina es algo relativamente nuevo, estos monitores tienen el doble de pixeles que su contraparte, por ello, para evitar que nuestras imágenes se vean borrosas en estos dispositivos necesitamos crear nuestras imágenes al doble de tamaño del que las necesitamos pero en el código de inserción de imagen indicar el tamaño correcto, ejem:

Para un boletín necesitamos un cabezal con el logo de 600x150px; pero para solucionar la cuestión del monitor Retina y evitar que se vea borroso, lo exportaremos a 1200x300px pero colocaremos las dimensiones necesarias en la etiqueta IMG:

<img alt="Logo" src="logo@2x.png" width="600" height="150" style="display: block; border: 0px;" border="0">
Esto puede hacer que tus imágenes y boletín en general incremente su peso, por lo que tienes 2 opciones para optimizar tus imágenes:
  1. Para la primera opción, necesitas crear tus imágenes cuatro veces el tamaño que las necesites, luego en Photoshop exporta para web y selecciona la calidad más baja al momento de guardar.
  2. La segunda manera es mantener tus imágenes al doble de tamaño del que las necesitas y usar alguna aplicación para darles compresión como JPEGMini, Tinypng, Compressor.

• Optimizar las imágenes

La recomendación siempre es que tus imágenes sean lo más ligeras posibles, entre menos kilobytes (Kb) mejor. Para esto, si utilizas Photoshop o Fireworks al optimizar una imagen selecciona máximo una calidad del 75% para imágenes de tamaño regular (de 600px * 600px por ejemplo) o hasta el 65% en imágenes muy grandes.

Cuando la imagen es algo muy importante para tu comunicado, podrías utilizar menos optimización, así su calidad mejorará, pero ten en cuenta que no es recomendable enviar imágenes con un peso superior a 250kb, si usas muchas imágenes en tu comunicado, el peso combinado de todas ellas no debe exceder los 300kb.

Si no utilizas Photoshop, puedes usar herramientas en linea como tinypng o webresizer para reducir el tamaño de tus imágenes.

• Atributos “alt” y “title”

Son muy útiles para cuando los usuarios reciben los newsletters y no muestran las imágenes a la primera, sino que es necesario descargarlas, pero si alguien no quiere/puede descargarlas, utilizando los atributos “alt” y “title” podremos darle una referencia de lo que se trata la imagen.
También puedes combinar los estilos CSS con el contenido del atributo “alt” de la imagen, creando un texto alternativo con un poco más de estilo, para lograrlo, únicamente añade el atributo “style” dentro de la etiqueta <img> con el formato que deseas.
new-netflix-mailing

• Etiquetas para poner imágenes de fondo

Muchas veces, para hacer más rico el contenido o añadir textura y profundidad, queremos utilizar un pattern o una imagen de fondo en alguna de las celdas, o en todo el comunicado, pero cuando hacemos las pruebas únicamente se ve en algunos servidores de correo, o por ejemplo un software instalado en nuestro equipo (Outlook o Mail en sus versiones más antiguas) no los muestra correctamente.
Ejemplo de imágenes de fondo en newslettersPara solucionarlo, en la etiqueta <td> o <table> que necesitamos que tenga el fondo vamos a utilizar el atributo de “background”, donde insertaremos la imagen de fondo y, con el afán de prevenir, también utilizaremos la propiedad de css “background” dentro del atributo style que pondremos dentro de <td>, <table> o incluso aplica para ponerlo en el fondo general del archivo, en la etiqueta <body>. En ambas opciones pon lo que sea necesario para que se repita o no, quede fijo etc… con las propiedades css de posición, y siempre utiliza un color de fondo (para prevenir que no se vea blanco u otro color si el servidor de correo no está mostrando la imagen).

Ejemplo:

<td style=”background:url(http://www.dominio.com/fondo.jpg) top center repeat #f9fdfa;” background=” http://www.dominio.com/fondo.jpg” bgcolor=”#f9fdfa” valign=”top” width=”105“> Correcto

• Rutas absolutas de imágenes

Incorrecto:

<img src=”miimagen.jpg” width=”100” height=”100” style=”display:block;” /> Incorrecto

Correcto:

<img src=”http://www.dominio.com/ubicacion/miimagen.jpg” width=”100” height=”100” style=”display:block;” />Correcto

• Imágenes sin espacios en blanco

Para las imágenes, es muy importante siempre utilizar, dentro del atributo “style” , la propiedad “display” con el parámetro “block” . Ya que Gmail y Hotmail siempre añaden un margen alrededor de las imágenes, también es importante definir los márgenes y el padding en ceros. Así podremos utilizar imágenes una junto a otra y que no se vea una separación:

• Crear carpetas para las imágenes

Es importante crear carpetas para almacenar las imágenes de cada newsletter, a fin de no crear conflictos con los nombres de las imágenes, por ejemplo si subimos el newsletter A, que tiene una imagen que se llama “top.jpg” con cierto diseño, y después subimos el newsletter B, con una imagen del mismo nombre “top.jpg” pero con otro diseño y en la misma ubicación, la imagen del newsletter A, será reemplazada con la del último y se perderá.

• Newsletters hechos solo con imágenes

Para envíos de promoción o novedades, normalmente se utilizan newsletters basados casi en su totalidad en imágenes.
Las empresas que desarrollan campañas muy gráficas prefieren utilizar este tipo de envíos, el inconveniente es que cuando el usuario tiene desactivadas las imágenes, el newsletter se verá en secciones o cajas vacías, por lo que es muy importante añadir una liga al newsletter en línea.

Newsletter de imágenes

Sin embargo la proporción ideal es un 80% texto y un 20% imágenes, para tener un tamaño máximo recomendado de 80kb en tu boletín.


Una de las claves en Email Marketing, es no centrar el diseño de la pieza en las imágenes, ya que muchos agentes no permiten la visualización de ellas por default. A esto hay que sumarle que si estas son demasiado pesadas, tardarán más tiempo en descargarse y, ¿sabes qué? solo tienes 4 segundos para impactar a tu usuario antes de que abandone tu Email.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.

A continuación algunos links que seguramente te servirán para mejorar el uso de los estilos CSS de tus newsletters: