Añadir una imagen de fondo es, sin duda, la forma más sencilla de hacer que los mensajes de correo electrónico sean impactantes y más funcionales. Pero, ¿todos los clientes de correo electrónico admiten esta función?
Soporte para imágenes de fondo
El principal problema de añadir imágenes de fondo en los correos electrónicos es que no todos los clientes de correo las admiten por motivos de seguridad o de otro tipo.
Correo web: Sin complicaciones
Hacer que las imágenes de fondo se muestren en los clientes de correo web es la tarea menos problemática: todas las plataformas principales admiten esta funcionalidad. La única excepción es Yahoo! Mail, que elimina los valores de sintaxis de barra oblicua y hace que el valor no sea válido.
Bolsa móvil mixta
Aproximadamente la mitad de las aplicaciones de correo electrónico más populares pueden mostrar imágenes de fondo, y el resto de ellas proporcionan al menos un soporte parcial. El problema más común es la falta de compatibilidad con la propiedad CSS background-attachment: fixed.
El escritorio trae problemas
Los clientes de correo electrónico de escritorio son los que más problemas tienen con las imágenes de fondo. Actualmente, solo Apple Mail 10, Outlook para Mac y Thunderbird son totalmente compatibles, mientras que el resto de clientes de escritorio ofrecen compatibilidad parcial o nula.
Consulte la tabla siguiente para obtener una descripción más detallada de la compatibilidad con el fondo en los distintos clientes de correo electrónico.
Ventajas de la imagen de fondo
Una gran ventaja de las imágenes de fondo es que puedes colocar contenido HTML adicional sobre ellas. Esto se debe a que, a diferencia de las imágenes normales, las imágenes de fondo pueden tener capas adicionales de información. Por ejemplo, puede tener imágenes adicionales, texto o llamadas a la acción dentro del mismo espacio.
Eche un vistazo al correo electrónico promocional de Salesforce para ver la estratificación en acción:
Otra ventaja de utilizar imágenes de fondo en lugar de poner texto en la propia imagen es que cualquier contenido HTML colocado encima de la imagen sigue siendo legible aunque el cliente de correo electrónico desactive las imágenes. En otras palabras, las imágenes de fondo son una forma estupenda de hacer más accesibles tus correos electrónicos.
Codificación de imágenes de fondo en el correo electrónico
Existen dos métodos principales para insertar una imagen de fondo en el contenido de un correo electrónico:
- Definición de atributos HTML para una tabla o una celda de tabla (elementos table y td, respectivamente)
- Añadir estilos CSS a elementos de tabla o celda
Uso de atributos de tabla HTML
Utilizar el atributo background en una tabla o celda de tabla es la forma más antigua de implementar la funcionalidad de imagen de fondo. Aunque los desarrolladores consideran este método anticuado y obsoleto, sigue funcionando gracias a la compatibilidad con versiones anteriores de HTML. Básicamente, se especifica al cliente de correo electrónico que muestre una imagen de fondo almacenada en la URL especificada. He aquí un ejemplo de código:
Uno de los atributos de fondo más útiles es background-size, que permite establecer el tamaño de la imagen en relación con el espacio disponible. Esto es muy útil en dispositivos móviles con espacio limitado. En lugar de dejar que el dispositivo reduzca el tamaño de la imagen (que suele ser el comportamiento por defecto), puedes utilizar valores como cover o contain para mostrar la imagen de forma más elegante.
Añadir propiedades CSS
Un método más actual y flexible es utilizar la propiedad CSS background-image inline en un contenedor div o td. La propiedad background-image utiliza de nuevo una URL como fuente de la imagen de fondo.
Es importante saber que, independientemente del método elegido (atributos HTML o propiedades CSS), no podrá editar las dimensiones ni cambiar la posición de la imagen de fondo. Además, si la dimensión de la
es mayor que la propia imagen, entonces la imagen se repetiría. Sin embargo, puede evitar estas situaciones:
- evitar que la imagen de fondo se repita (propiedad background-repeat:no-repeat),
- especificar la posición del fondo (propiedad background-position)
Codificar el contenido del correo electrónico en HTML, por supuesto, no es del gusto de todo el mundo. Por eso hemos incluido la configuración de la imagen de fondo directamente en JungleMail interfaz. Sólo tienes que seleccionar una sección de contenido, activar la sección Imagen de fondo a la derecha, seleccionar una imagen, marcar algunas casillas para mejorar el diseño y listo.
Para llevar
- En la codificación del correo electrónico, se suele aconsejar utilizar propiedades que lleven mucho tiempo en uso. Cuanto más antigua sea la regla HTML o CSS, más probable es que funcione. Teniendo en cuenta esta directriz, no es de extrañar que el atributo background de una tabla sea el más compatible con todos los clientes de correo electrónico.
- Para mayor seguridad, siempre es bueno incluir un texto ALT para las imágenes. Incluya también la anchura y el tamaño de la imagen: de este modo, el texto ALT dispondrá de un contenedor de visualización cuando las imágenes estén desactivadas. Si no especifica las dimensiones, algunos clientes de correo electrónico colapsan esa zona junto con el texto ALT.
- También le recomendamos que especifique un color alternativo mediante el atributo bgcolor. Esto asegurará que, incluso si la imagen de fondo no se muestra, el contenido de su correo electrónico sea legible con el color de reserva.
Lleve sus comunicaciones internas a un nuevo nivel
Pruebe gratis la herramienta de boletín de JungleMail
Empezar gratis