1. Uso de imágenes muy pesadas
A todos nos gusta mirar una bella imagen, sobre todo si está bien definida. Sin embargo siempre debemos tener en cuenta el medio en el que la utilizamos.
Supongamos que el cliente de correo electrónico no desactiva la visualización de las imágenes: podríamos decir que, en general, las imágenes se descargarán cuando abrimos el mensaje a menos que se envíen como archivos adjuntos al mensaje.
Cuando el mensaje se abre en el cliente de correo o en el navegador, se envía un pedido al servidor donde se guardan las imágenes para así descargarlas y poder visualizarlas. Obviamente, esto implica que parte de la banda de la conexión será usada por el intercambio de datos entre el cliente y el servidor.
Ahora bien, dado que el ancho de banda no es ilimitado, es muy importante no usar imágenes que sean muy pesadas.
En el área de dispositivos móviles, una sola imagen de 1 MB se descargara en 0,3 segundos. Piensa cuánto tiempo estarías dispuesto normalmente a esperar para que se abra una página web en cualquiera de ambos casos. Según Kinsta, el 74 % de los usuarios abandona las páginas que no se abren en un plazo de 5 segundos .
Con estos pocos datos, resulta claro que para no prolongar excesivamente el tiempo de carga es sumamente importante procesar las imágenes correctamente para que sean lo suficientemente livianas y se descarguen rápidamente, manteniendo al mismo tiempo una buena resolución que evite los efectos de imágenes granuladas.
Éstas son nuestras recomendaciones para asegurar el equilibrio correcto entre el peso de la imagen y la buena resolución.
- Mantener un peso máximo de aproximadamente 50 KB
- Asegurarse de que la imagen tenga una resolución de 72 ppp (puntos por pulgada)
- Guardar la imagen en formato JPG, GIF o PNG.
2. Dimensiones exageradas
Con frecuencia se incluyen en el correo electrónico imágenes que fueron creadas para otro fin —tal vez para una campaña publicitaria o para un sitio web. Sin los ajustes necesarios, las dimensiones (alto y ancho) de estas imágenes no son ni óptimas ni funcionales para el mensaje.
Entremos en detalle: la etiqueta HTML img permite definir el alto y ancho de una imagen. Por ejemplo, la siguiente línea de código especifica que la imagen tendrá una altura de 123 píxeles y un ancho de 456 píxeles.
Una vez establecidos uno o ambos parámetros, independientemente de las dimensiones reales, el navegador mostrará una imagen de la altura y ancho indicados. Esto significa que si las imágenes en el servidor tienen dimensiones inferiores a las indicadas en la etiqueta, la imagen se ampliará, y si la imagen en el servidor es más grande, la imagen se reducirá.
Por lo tanto, si se utiliza una imagen que no ha sido optimizada para el correo electrónico, en ambos casos (imagen ampliada o reducida) los resultados serán pésimos.
- Imágenes más grandes de lo necesario: mayor peso y un consumo innecesario de ancho de banda, lo cual nos lleva otra vez al punto 1
- Imágenes más pequeñas de lo necesario: ampliación forzada, perdida de calidad y efecto granulado
Las pantallas Retina introducidas por Apple en 2010 son un tema aparte. La tecnología Retina se basa en una mayor densidad de píxeles por unidad de superficie, gracias a la cual el ojo humano no debería percibir los píxeles individuales, según la empresa de Cupertino, Por ende, las imágenes serían más homogéneas, más atractivas y causarían menos fatiga visual.
En la actualidad, la densidad de los píxeles en una pantalla Retina es de aproximadamente el doble que en una pantalla común y para evitar el efecto de granulación es necesario duplicar las dimensiones de las imágenes. Por ejemplo, si las dimensiones de la imagen del correo son 250×145 px (p.ej.,
Éstas son nuestras recomendaciones para asegurar que las imágenes se visualicen a la perfección:
- Ajustar las imágenes a la medida para correo electrónico
- Guardar todas las imágenes en la misma carpeta. De este modo, todas estarán en un mismo sitio de origen, lo que permite un mejor control en caso de tener que hacer cambios
- No fijar las dimensiones de las imágenes, sino dejar que fluyan dentro del marco en el que se utilizan. De esta manera, permitimos que la estructura de la comunicación “modele” las imágenes
3. Uso de GIF animados sin optimizar
El uso de animaciones (como un GIF) en la comunicación permite destacar el mensaje: se trata de un medio muy eficaz para atraer la atención del usuario, especialmente si la realización gráfica está bien concebida y es original. Colocar un GIF animado en un mensaje es algo fácil, pero este tipo de gráficos requieren un poco más de atención que las imágenes estáticas magyargenerikus.com.
Un poco de historia: el formato GIF, sigla de Graphics Interchange Format (formato de intercambio gráfico), surgió en 1987. La idea fundamental era establecer un conjunto predefinido de colores para incluir junto con los datos que componen la imagen a fin de evitar que ésta perdiera calidad durante la compresión. En 1989 se añaden al formato dos novedades importantes: la transparencia y sobre todo las imágenes múltiples que abrirán el camino para las animaciones.
Desde entonces, los diseñadores gráficos de todo el mundo han dado rienda suelta a su creatividad creando GIF inolvidables (como aquellos inolvidables del “estamos trabajando” o “en progreso”) que poco a poco han invadido la web. En la actualidad, el formato GIF goza de una excelente salud: pensemos no solo en las varias formas en que se incluyen en los mensajes electrónicos a diario, sino también en el éxito de sitios como giphy.com.
Como todas las cosas, incluso en este caso tenemos que prestar atención al medio en que será utilizado. En primer lugar, consideremos que el peso en KB de un GIF animado aumenta rápidamente ya sea en función de la cantidad de cuadros de la animación o en función de las dimensiones. Por lo tanto, debemos reflexionar atentamente al tipo de animación que se utilizará en primer lugar.
En segundo lugar, debemos considerar que algunos clientes de correo electrónico no visualizan las animaciones. Uno de los principales clientes (la serie Outlook 2007-2013) visualiza solamente el primer cuadro.
Éstas son nuestras recomendaciones para asegurar un rendimiento óptimo de los GIF animados:
- Prestar atención al peso total de las imágenes (¡recordar lo que explicamos en el punto 1!)
- No utilizar más de una animación por mensaje
- No utilizar muchos cuadros: ¡un GIF no es un video!
- Evitar el uso de animaciones muy complejas que pueden comprometer todo el conjunto
- Asegurarse de que el primer cuadro dé una idea completa de la comunicación, y siempre verificar que no esté vacío
- Aprovechar, por ejemplo, la técnica de las cinemagrafías para reducir el peso de las animaciones
4. Olvidarse de las etiquetas Alt Text de las imágenes
Los mensajes electrónicos sin imágenes son cada vez más raros. No obstante, debemos tener en cuenta que algunos clientes de correo electrónico, de forma predeterminada, no muestran las imágenes y que, por razones diversas, algunos usuarios prefieren desactivar su visualización: en estos casos, si el correo no tiene medios alternativos para comunicar el mensaje, la comunicación en sí misma queda automáticamente comprometida.
Veamos cómo resolver eficazmente este punto débil aprovechando el código HTML mediante las propiedades alt y title de la etiqueta
En particular:
- title permite la visualización de su contenido cuando el cursor del ratón se coloca sobre el área de la imagen
- alt define el texto alternativo que se visualizará en caso de que no se descargue la imagen (Alt Text)
Es por ende muy importante siempre usar estas dos propiedades en las imágenes que consideramos estratégicas (como el logotipo de la marca, el elemento visual, el producto, etc.), valorizándolas con una descripción del contenido de la imagen.
Atributo title
Veamos como funciona el atributo title: se puede ver en la figura que debajo del cursor aparece una pequeña ventana emergente con el texto que colocamos en el código. Podemos utilizar así esta etiqueta para agregar información adjunta que complementará la ofrecida por la imagen.
Atributo alt
Pasemos a analizar el comportamiento del atributo alt sobre el que seguramente podemos tener un margen de acción más amplio.
La captura de pantalla muestra como se visualizaría el boletín en un cliente de correo que no incluye la carga de imágenes. Podemos ver los clásicos enlaces azules y violetas subrayados que respectivamente indican que hay un enlace sin visitar y otro ya visitado.
Obviamente, para quienes hacen mercadeo por correo electrónico esto no es suficiente: es fantástico que en lugar de las imágenes haya un texto con un enlace, pero desde el punto de vista estético, esta visualización tiene el mismo efecto que un puñetazo en en la cara además de que no es fácil leerlo.
¿Podemos mejorar la situación? Las CSS nos vienen a socorrer.
Si aplicamos un estilo en línea a la imagen, tal como si se tratara de un texto, podemos definir no solo el color (observar el bloque de redes sociales), sino también las dimensiones, el tipo de fuente y el estilo del subrayado.
Veamos el código en detalle. Observemos que además de los atributos alt y title, en la imagen se incluyó el estilo en línea que define las dimensiones (16px), el tipo de fuente (Helvetica, Arial…) y el color del texto (#ffffff) que se visualizará cuando la imagen no se carga.
De esta manera, aunque las imágenes no se visualizarán, al menos no se perderá toda la información. Al aplicar esta técnica también brindamos información mediante un texto correctamente formateado y además resaltamos la presencia de un enlace sobre el que se puede hacer clic.
Nuestras recomendaciones:
- Asegurarse de que las imágenes más importantes lleven siempre los atributos ALT y TITLE valorizados;
- No excederse con el texto. Si es demasiado largo, puede descompaginar la comunicación (en el caso de ALT) o resultar poco eficaz (en el caso de TITLE);
- Asegurarse de que el tamaño y el color del texto alternativo permitan que se lea fácilmente, especialmente si usamos un color de fondo;
- Conviene mantener el subrayado del texto alternativo de un enlace para que su función se pueda reconocer fácilmente en una comunicación.