Bloqueo de imágenes

La mayoría de los clientes de correo, webmail o de escritorio, bloquean por defecto las imágenes incluidas en los mensajes HTML (algunos ofrecen la posibilidad de elaborar listas blancas de remitentes de los cuales mostrarlas por defecto).

Esto provoca que al abrir el mensaje el usuario no lo verá completo si se han utilizado imágenes: éste problema será menor cuantas menos imágenes deban utilizarse.

Alojamiento de las imágenes

Las imágenes deberán estar alojadas en un servidor, y referenciadas en el HTML con la ruta completa.

Deben evitarse servidores gratuitos de alojamiento de imágenes, pueden traer problemas de inclusión de scripts no deseados, no servir la imagen correctamente o ser bloqueados por el cliente de correo si considera que las imágenes tienen un origen no confiable.

Referenciar las imágenes

No se deben utilizar rutas relativas:

<img src="images/logo.gif" alt="[...]" />

Sino absolutas:

<img src="http://www.yourserver.com/email/images/logo.gif" alt="[...]" />

Deberán ir siempre en un elemento IMG, debido a las limitaciones expuestas anteriormente acerca de la imposibilidad de incluirlas como fondo.

Y habŕan de llevar las dimensiones en los atributos ‘width’ y ‘height’, así se mantienen los huecos de las mismas en el mensaje cuando no estén cargadas:

<img src="http://www.yourserver.com/email/images/logo.gif" width="128" height="96" alt="[...]" />

Imágenes dentro de enlaces

Siempre debe definirse el atributo ‘border’ en las imágenes dentro de enlace, en caso contrario mostrarán un borde con el color del enlace:

<img src="http://www.yourserver.com/email/images/logo.gif" width="128" height="96" border="0">

Imágenes transparentes

En ocasiones sera necesario utilizar imágenes para generar huecos.

Lo recomendable es utilizar una sola imagen GIF transparente con unas dimensiones de 1×1, a la que se proporcionará el tamaño deseado para cada ocasión en la que se utilice mediante los atributos ‘width’ y ‘height’ del elemento ‘IMG’.