La guía definitiva para el texto ALT con estilo en el correo electrónico

Una práctica recomendada comúnmente aceptada en el mundo del correo electrónico es la inclusión de atributos ALT para las imágenes. Abreviatura de texto alternativo, el texto ALT en el correo electrónico es ahora la práctica estándar para los aficionados al correo electrónico.

Hay algunas razones por las que:

• La mayoría de los clientes de correo electrónico bloquean las imágenes de forma predeterminada. En algunos casos, en lugar de mostrar la imagen, el cliente de correo electrónico mostrará el texto ALT. Esto es definitivamente útil, especialmente en los casos en los que el diseño de un correo electrónico se compone predominantemente de imágenes. El texto ALT puede ayudar a comunicar el mensaje incluso si las imágenes no pueden.
• En una situación en la que las imágenes no se pueden cargar o no se cargan debido a una mala conexión, un enlace roto, etc., aparecerá el texto ALT en lugar de la imagen.
• Los especialistas en marketing y diseñadores sensibles a las necesidades de los lectores con discapacidad visual comprenden que los lectores de pantalla utilizan el texto ALT. Dado que estos usuarios no pueden ver texto o imágenes, el texto ALT sirve para describir la imagen a través del lector de pantalla.

Verifica que tus imágenes tengan texto ALT Con la lista de verificación de Litmus, obtendrá vistas previas de sus correos electrónicos con imágenes desactivadas y se le notificará si a alguna de sus imágenes le falta el texto ALT. Envíe con confianza en todo momento. Prueba Litmus gratis →

Configurar texto ALT para imágenes en un correo electrónico HTML es simple. Conocido como atributo , es una parte estándar de la sintaxis de HTML y se incluye en la etiqueta de la imagen:

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

Es importante incluir valores de alto y ancho, ya que esto crea un cuadro de marcador de posición para que el texto ALT resida cuando las imágenes están deshabilitadas.

Visualización de texto ALT estándar

Así es como se ven las imágenes deshabilitadas en un correo electrónico sin texto ALT enviado a Gmail:

En comparación con las imágenes deshabilitadas en un correo electrónico con texto ALT :

¿Cuál preferirías recibir?

Agregar estilo al texto ALT

También puede ser elegante con su texto ALT, agregando un poco de CSS en línea para cambiar la fuente, el color, el tamaño, el estilo y el peso del texto ALT:

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

Este es el mismo ejemplo anterior, pero con los estilos de texto ALT aplicados:

Compatibilidad con texto ALT con estilo en clientes de correo electrónico

Si bien es una técnica ingeniosa, todavía estamos hablando de correo electrónico, por lo que, naturalmente, el soporte está un poco disperso entre los diferentes programas de correo electrónico. Tomé prestados algunos elementos del impresionante correo electrónico Dreamforce de Salesforce para probar el texto ALT con estilo para los siguientes ejemplos.

Compatibilidad con texto ALT con estilo Webmail

Los clientes de correo web como Gmail son los más diversos, ya que se puede acceder a estos programas de correo en diferentes navegadores. En todos los clientes de correo web, la compatibilidad con el texto ALT con estilo depende del navegador que se utilice. El texto ALT con estilo es compatible con las versiones actuales de Firefox, Chrome y Safari.

Por ejemplo, el texto ALT con estilo será visible para un suscriptor que vea su Gmail en Firefox, pero solo funciona en Internet Explorer. En ese caso, se admite el color, pero no la fuente ni otros atributos. Internet Explorer parece ser un navegador hostil para el texto ALT con estilo en general. Descubrimos que, si bien se admitía el color, a menudo la fuente no lo era:

• Gmail y G-Suite en Internet Explorer
• GMX.de en Internet Explorer
• Office 365 en Internet Explorer
• Outlook.com en Internet Explorer
• Web.de en Internet Explorer
• Yahoo! Correo en Internet Explorer

Texto ALT con estilo en Gmail / Firefox:

Texto ALT con estilo en Gmail / IE:

Texto ALT en imágenes vinculadas

El texto ALT de las imágenes vinculadas puede estar subrayado o en azul en algunos clientes de correo web. Yahoo! subraya el texto ALT en las imágenes vinculadas, mientras que Gmail subraya e ignora los colores especificados, en lugar de ello, adopta un azul vibrante de forma predeterminada:

Outlook.com

En lugar de bloquear todas las imágenes, Outlook.com afirma "bloquear el contenido de remitentes de apariencia sospechosa", aunque no estoy seguro de cómo determinan quién parece sospechoso. Al azar, algunos remitentes son "de confianza" y muestran imágenes automáticamente, mientras que otros lanzan una advertencia de contenido bloqueado:

Los usuarios tienen la capacidad de bloquear imágenes para cualquier persona que no esté en su lista de remitentes seguros en su configuración de Outlook.com. Outlook.

Compatibilidad con texto ALT con estilo de escritorio

Los clientes de escritorio son un poco más confiables ya que no hay tantas variables involucradas:

* Outlook agrega un mensaje de seguridad al texto ALT. Más detalles a continuación.

Si bien Apple Mail y Thunderbird no bloquean las imágenes de forma predeterminada, puede optar por hacerlo en las preferencias de cada aplicación. Activé manualmente el bloqueo de imágenes en estos clientes para ver si admitían texto ALT con estilo.

Hubo algunas ligeras variaciones en el soporte de otras variables, particularmente relacionadas con las fuentes web:

• Apple Mail no admitía fuentes con estilo, aunque todavía se incluían el color y otras propiedades.
• En Outlook 2000-2003, aunque podía cambiar el color, no podía ajustar nada más con el texto ALT con estilo.

Mensaje de seguridad de Outlook

Outlook 2003, 2007, 2010, 2013 y 2016 prefacio el texto ALT con un mensaje de seguridad extenso que dice “Haga clic con el botón derecho aquí para descargar imágenes. Para ayudar a proteger su privacidad, Outlook evitó la descarga automática de esta imagen de Internet ". Desafortunadamente, esto hace que el texto ALT en estos clientes de correo electrónico sea casi inútil, ya que solo aparece al final de la advertencia de seguridad de Outlook:

Este mensaje también aparece en Windows 10, bloqueando completamente cualquier texto ALT.

Soporte de texto ALT con estilo móvil

Los clientes de dispositivos móviles tienen una gran compatibilidad con el texto ALT con estilo, lo cual es una gran noticia, especialmente para los especialistas en marketing con una gran audiencia de Android.

Al igual que Apple Mail y Thunderbird, actualicé manualmente mi configuración de iOS para bloquear imágenes con el fin de observar cómo este sistema operativo móvil maneja el texto ALT.

Texto ALT con estilo en Android (Samsung Galaxy Nexus):

El texto ALT con estilo aparece de forma idéntica en las aplicaciones de correo electrónico y Gmail en Android.

Texto ALT con estilo en BlackBerry OS 6 (Torch 9810):

Texto ALT con estilo en iOS (iPhone 5):

Bloqueo de imágenes en Windows Phone 7.5 (Nokia Lumia 900):

Las propiedades, los enlaces y la longitud de las fuentes CSS son variables

Al profundizar en los detalles, la mayoría de las siguientes propiedades de fuente son compatibles con clientes que muestran texto ALT con estilo:

• Familia tipográfica
• tamaño de fuente
• peso de la fuente
• color
• Estilo de fuente

Hubo alguna variación en las pruebas en lo que respecta a las propiedades específicas admitidas. Casi todos los clientes admitían propiedades de color, pero no fuente. Esto también varió entre los navegadores. Por ejemplo, así es como se veía Gmail / G-Suite en Chrome en mi prueba de dos fuentes con estilo, con diferentes colores:

Si bien Gmail / G-Suite en Internet Explorer respetaba el color pero no la fuente:

Tenga en cuenta que es posible que algunos clientes no admitan todas las fuentes o tamaños en su texto ALT con estilo, pero eso no significa que no pueda agregar algo de marca o estilo. Consulte este útil recurso que la especialista en marketing por correo electrónico, Jaina Mistry, escribió para Campaign Monitor para verificar el soporte de fuentes web.

También recomendaría esta lista de fuentes comúnmente instaladas en Windows y Mac.

Otros comportamientos notables de bloqueo de imágenes

En muchos clientes de correo electrónico, el texto ALT desaparecerá una vez que el tamaño o la longitud del texto supere el ancho y / o la altura del contenedor de la imagen. Debido a este comportamiento, probablemente sea mejor ceñirse a descripciones más cortas y tamaños de fuente más pequeños para evitar que el texto ALT se elimine por completo.

Casi todos los clientes de correo electrónico le permiten cambiar su configuración para mostrar u ocultar imágenes automáticamente (aunque la mayoría de las veces, ocultar / bloquear es la configuración predeterminada), y pedirán a los usuarios que activen las imágenes para mensajes individuales. Algunos también permiten a los usuarios agregar remitentes específicos a una lista de permitidos o libreta de direcciones, o seleccionar "Mostrar siempre imágenes de ..."

Obtenga una vista previa de su correo electrónico con imágenes apagadas (¡y encendidas!)

¿Cómo se ve su correo electrónico con las imágenes deshabilitadas? ¿Tu texto ALT se está reproduciendo correctamente? Obtenga una vista previa de su correo electrónico en más de 50 clientes de correo electrónico de escritorio, móviles y web, incluidas las vistas sin imágenes, con Litmus.

Empezar a probar →