Imagen de fondo de correo electrónico HTML (Consejos clave + Opciones alternativas)
Si desea añadir algo de interés visual y personalidad a sus mensajes de correo electrónico HTML, una forma de hacerlo es utilizando imágenes de fondo.
En este artículo le explicaremos cómo utilizar imágenes de fondo en sus mensajes de correo electrónico HTML y le daremos algunos consejos para que sus destinatarios las vean con buenos ojos.
Imagen de fondo de correo electrónico HTML (Primeros pasos)
Para añadir una imagen de fondo a su correo electrónico HTML, tendrá que utilizar estilos CSS en línea.
Esto implica añadir el atributo style al elemento HTML correspondiente, como el<body> y <table> , y especificar la propiedad background-image.
He aquí un ejemplo:
<body style=»background-image: url(‘https://example.com/my-background-image.jpg’);»>
Esto establecerá la imagen especificada como fondo para todo el correo electrónico.
Sin embargo, es importante tener en cuenta que no todos los clientes de correo electrónico admiten imágenes de fondo.
Para garantizar que la mayoría de los destinatarios reciben un correo electrónico correcto, deberá utilizar un método alternativo.
Un recurso para los clientes de correo electrónico que no admiten imágenes de fondo
Para ofrecer una alternativa a los clientes de correo electrónico que no admiten imágenes de fondo, puede especificar un color de fondo sólido como copia de seguridad.
Si la imagen de fondo no se carga, el mensaje seguirá teniendo un bonito color de fondo.
He aquí un ejemplo de cómo hacerlo utilizando estilos CSS en línea:
<body style=»background-image: url(‘https://example.com/my-background-image.jpg’); background-color: #ffffff;»>
En este ejemplo, la propiedad de color de fondo se establece en #ffffffque es el código hexadecimal del color blanco. Si la imagen de fondo no se carga, el mensaje tendrá un fondo blanco.
Consejos para imágenes de fondo en correos electrónicos HTML
Estos son algunos consejos que debe tener en cuenta al utilizar imágenes de fondo en sus mensajes de correo electrónico HTML:
- Asegúrese de que la imagen es relevante para su contenido. La imagen de fondo debe contribuir al mensaje que intenta transmitir, en lugar de distraer de él.
- Utilice una imagen de alta resolución. Esto garantizará que la imagen se vea nítida y clara, incluso en pantallas de alta resolución.
- Evite utilizar texto en la imagen de fondo. Algunos clientes de correo electrónico bloquean las imágenes por defecto, lo que significa que cualquier texto en la imagen de fondo no será visible para esos destinatarios.
- Reduzca el tamaño del archivo de imagen. Las imágenes grandes pueden ralentizar el tiempo de carga de su correo electrónico, lo que puede resultar frustrante para los destinatarios.
Background images in Outlook emails
Si utiliza Microsoft Outlook para enviar sus mensajes de correo electrónico HTML, tendrá que tomar algunas medidas adicionales para asegurarse de que su imagen de fondo se muestre correctamente.
Outlook utiliza el motor de renderizado de Microsoft Word para mostrar correos electrónicos HTML, lo que significa que no admite algunas propiedades HTML y CSS, incluida la propiedad background-image.
Para evitar esta limitación, puede utilizar v:background en su código HTML. Este atributo es compatible con Outlook y le permite establecer una imagen de fondo para su correo electrónico. He aquí un ejemplo de cómo hacerlo:
<table v:background=»url(‘https://example.com/my-background-image.jpg’)»>
En este ejemplo, el attributo v:backgroundse aplica a un <tabla> que establece la imagen especificada como fondo de la tabla. Tenga en cuenta que tendrá que proporcionar un color de fondo alternativo para los clientes de correo electrónico que no admitan la opción atributo v:background.
Incluir una imagen de fondo en sus correos electrónicos HTML puede añadir interés visual y personalidad a sus mensajes.
Utilizando estilos CSS en línea y proporcionando una alternativa para los clientes de correo electrónico que no admiten imágenes de fondo, puede asegurarse de que sus mensajes de correo electrónico tengan un aspecto excelente para la mayoría de los destinatarios.
Recuerde utilizar imágenes de alta resolución y evitar el uso de texto en segundo plano.
Si utiliza Microsoft Outlook, asegúrese de utilizar el atributo v:background para definir la imagen de fondo.
Con estos consejos en mente, podrá añadir con confianza imágenes de fondo a sus mensajes de correo electrónico HTML y causar una impresión duradera en sus destinatarios.
DirectIQ está bien equipado para ayudarle a desarrollar boletines electrónicos atractivos para sus suscriptores.
En lugar de preocuparse por el código y tener que diseñar fondos de correo electrónico desde cero, puede dejar todo el trabajo pesado a DirectIQ.
¿Estás listo para empezar? Regístrese gratis en DirectIQ hoy mismo.
Preguntas frecuentes
¿Soportarán todos los clientes de correo electrónico imágenes de fondo?
No, no todos los clientes de correo electrónico admiten imágenes de fondo. Para que la mayoría de los destinatarios vean bien su correo electrónico, tendrá que proporcionar un método alternativo, como un color de fondo sólido.
¿Es buena idea utilizar texto en la imagen de fondo?
Por lo general, no es buena idea utilizar texto en la imagen de fondo. Algunos clientes de correo electrónico bloquean las imágenes por defecto, lo que significa que el texto de la imagen de fondo no será visible para los destinatarios.
¿Cómo puedo asegurarme de que mi imagen de fondo se vea nítida y clara?
Para que tu imagen de fondo se vea nítida y clara, utiliza una imagen de alta resolución. Esto garantizará que la imagen se vea bien en pantallas de alta resolución.
¿Ralentizará mi imagen de fondo el tiempo de carga de mi correo electrónico?
Las imágenes grandes pueden ralentizar el tiempo de carga de su correo electrónico, lo que puede resultar frustrante para los destinatarios. Para evitarlo, asegúrate de que el tamaño del archivo de imagen sea pequeño.
¿Cuál es la mejor manera de establecer una imagen de fondo en un correo electrónico HTML?
Para establecer una imagen de fondo en un correo electrónico HTML, tendrá que utilizar estilos CSS en línea. Esto implica añadir el atributo style al elemento HTML correspondiente y especificar la propiedad background-image.
También tendrá que proporcionar una alternativa para los clientes de correo electrónico que no admitan imágenes de fondo.
¿Cómo se utiliza una imagen de fondo en un correo electrónico de Outlook?
Si utiliza Microsoft Outlook para enviar sus mensajes de correo electrónico HTML, deberá utilizar el atributo v:background para definir la imagen de fondo.
Este atributo es compatible con Outlook y le permite establecer una imagen de fondo para su correo electrónico.
Deberá proporcionar un color de fondo alternativo para los clientes de correo electrónico que no admitan el atributo v:background.
