Recomendaciones para usar imágenes en los newsletters

La utilización de imágenes en cualquier newsletter o boletín electrónico debe hacerse con mucho cuidado y además es necesario cumplir algunos requisitos mínimos que te facilitamos a continuación:

1. Imágenes que contengan un enlace
   Si utilizas imágenes que incluyan un enlace, añade adicionalmente un enlace de texto (en formato html) que acompañe las imágenes. La posibilidad de que las imágenes estén desactivadas en el programa de correo del destinatario es muy alta y perderás la oportunidad de generar clicks.
   
   
2. Utiliza el atributo "alt" para todas las imágenes
   De nuevo, si el destinatario tiene las imágenes desactivadas en su programa de correo, verá de forma automática el texto alt que acompaña una imagen. Así que en la descripción alt, utiliza textos de forma inteligente y de manera que el lector sepa de que va el tema.
   Un ejemplo de como usar el alt sería este:
   <IMG SRC="imagen.gif" ALT="Te ofrecemos un 35% de descuento en tu compra." />
   
   
3. Define el ancho y alto de las imágenes
   De esta forma el diseño de tu newsletter no se deformará.
   Un ejemplo sería:
   

   <IMG SRC="flor.gif" WIDTH=105 HEIGHT=97 ALT="Flores especiales para el día de la madre">
   
   

4. Optimiza tus imágenes
   Consigue que el peso de las imágenes sea el mínimo posible (usa 72 dpi) sin perder la calidad visual y su integridad. Las imágenes muy grandes puedes dividirlas en varias imágenes con la técnica denominada slices. Nadie quiere esperar 10 segundos hasta que cargue un jpg de 1Mb.
   Te recomendamos este tutorial acerca de la Optimización de imágenes
   
   
5. Imágenes de fondo (background images)
   Intenta no utilizarlas ya que muchos clientes de correo no soportan esta característica. Si las utilizas asegúrate de que sea posible leer el contenido del email sin problemas y realiza pruebas en los diferentes clientes.
   
   
6. Espacios blancos entre imágenes
   Si en tu diseño hay imágenes que generan un espacio en blanco entre estas, añade el código style= como en el ejemplo siguiente:
   

   <IMG SRC="image.jpg" alt="Empresa" style="display: block;" />