4 consejos sobre cómo agregar imágenes de fondo en la plantilla de correo electrónico
Publicado: 2020-12-14
Todo el mundo utiliza imágenes de fondo de correo electrónico en los mensajes. Son grandes captadores de atención, y es extremadamente importante usarlos de la manera correcta. Entonces, comencemos nuestra guía sobre el uso de imágenes de fondo en los correos electrónicos. Tu lo descubrirás:
por qué necesita usar imágenes en los boletines;
cómo usar código HTML para insertar una imagen de fondo;
cómo agregar una imagen de fondo usando CSS.
¿Cuáles son los fondos para los correos electrónicos?
El fondo del boletín es la imagen que se aplica como marco de todos los demás elementos en un correo electrónico. En lugar de ser un punto focal principal, como una imagen de héroe, suele ser más sutil y complementario con el resto del contenido de la campaña.
Agregar imágenes de fondo de correos electrónicos en HTML requiere hacer cambios en el código de su boletín. Si no sabe nada acerca de la codificación personalizada, la forma correcta es usar plantillas listas para usar gratuitas que ya están cargadas en su software de correo electrónico, Atomic Email Sender. Elige el que más te guste, añade contenido y envía una campaña.
Si usted es un usuario avanzado familiarizado con HTML y CSS y tiene algunas habilidades para trabajar con estos códigos, nuestro artículo le dará algunos consejos sobre cómo crear una imagen de fondo en HTML.
Por qué utilizar el fondo de correo electrónico
El principal beneficio de la imagen de fondo HTML del correo electrónico es que obtiene posibilidades de capas adicionales y puede colocar el mensaje clave , así como otras imágenes o llamadas a la acción , encima de las imágenes de fondo del correo electrónico .
En un sentido de belleza, siempre es bueno tener un boletín bien diseñado. Además, puede usar GIF animados como imágenes de fondo del boletín.
Fondo de correo electrónico animado
Manténgalo simple: diseño básico de fondo de correo electrónico
Recuerda que las imágenes de fondo deben ser simples y sin patrones llamativos que puedan acaparar la atención. El color de fondo del correo electrónico HTML no debe ser muy brillante para no llamar más la atención que la información principal del boletín de correo electrónico. Recuerde que el fondo del boletín es solo la adición al contenido para que el correo electrónico se vea genial. Las mejores imágenes de fondo de boletines son de estilo tranquilo y pueden incluir elementos gráficos (texturas, degradados, patrones, etc.).
Si no eres un profesional del diseño, te recomendamos que no te arriesgues y te abstengas de fondos artísticos. El minimalismo está de moda ahora, y puedes aplicarlo con éxito en tu campaña de correo electrónico. Una de las imágenes en las mejores prácticas de los correos electrónicos es un fondo degradado para el correo electrónico. Juega con el color y elige un fondo degradado con una transición suave según el contenido del correo electrónico. Se puede hacer usando CSS. Por lo tanto, obtiene un fondo de correo electrónico que será una excelente alternativa al fondo de la imagen PNG, JPG o GIF.
Fondo de correo electrónico degradado
Los mejores tamaños y formatos para imágenes de boletines
Formato de imagen para correo electrónico
Cuando elija o cree una imagen para usar en una campaña de correo electrónico, asegúrese de guardarla en el formato correcto: PNG, JPG o GIF. Cada formato de imagen tiene su propia especificidad, por ejemplo, las imágenes guardadas como PNG conservan la transparencia.
¡El tamaño importa!
Es bueno mantenerse en contacto con su ESP y este es el momento de preguntarle sobre los límites de tamaño y peso de la imagen. Mira, algunos ESP comprimen imágenes que son demasiado grandes o pesan demasiado; todo esto afecta la calidad de la imagen y la impresión total de tu mensaje. Si su imagen es demasiado grande, un cortafuegos o un filtro de correo electrónico pueden bloquear el correo electrónico y su campaña de correo electrónico no llegará a los destinatarios.
Como el tamaño ideal de una plantilla de correo electrónico oscila entre 600 y 650 px, es mejor usar imágenes de fondo del mismo tamaño. Esto se refiere a las imágenes guardadas como archivos PNG y JPG.
¿Difiere el mejor tamaño de la imagen de fondo de Outlook y Gmail? No, no importa qué cliente se utilice para la lectura de boletines por parte de los receptores. El tamaño perfecto de la imagen de fondo del correo electrónico de Gmail y Outlook es de 600-650 px.
Para usar una imagen GIF como imagen de fondo y cubrir toda el área de contenido, mantenga su tamaño en 1280px de ancho. Quiero resaltar que los archivos GIF son compatibles con casi todos los clientes de correo electrónico, excepto Outlook 2007-2013: su usuario verá solo el primer cuadro en el archivo GIF animado. Es por eso que pone el marco más importante primero. Generalmente, la cantidad de fotogramas en un GIF animado no debe exceder las 10 unidades.
Para una gestión conveniente de los correos electrónicos, use el estudio de correo electrónico. También tenemos un excelente administrador de listas de correo electrónico para administrar listas de correo electrónico. Con el extractor de correos electrónicos, puede recopilar direcciones de correo electrónico para enviar cartas.
Haga que su correo electrónico sea compatible con dispositivos móviles
Recuerde que más de la mitad de los mensajes de correo electrónico que las personas abren mediante dispositivos móviles. Debe considerar esto al crear su diseño de correo electrónico. Prepare la versión móvil del boletín con imágenes más pequeñas para evitar problemas con la carga prolongada del correo electrónico, etc. ¿Cómo hacer que el correo electrónico se muestre correctamente en el teléfono inteligente? Use el CSS para ajustar la imagen de fondo para cada pantalla de teléfono inteligente específica. ¡Los destinatarios estarán agradecidos por el diseño de calidad, ahorrando tiempo y tráfico!
¿Cómo tener una imagen de fondo en el correo electrónico? Descubramos cómo trabajar con imágenes de fondo en nuestro software de envío de correo electrónico: Atomic Mail Sender.
Cómo agregar imágenes de fondo - Atomic Mail Sender Rocks
Hay cuatro métodos principales para agregar imágenes de fondo:
- Uso de atributos de tabla para insertar una imagen de fondo en HTML
- Usando CSS en línea
- Usando CSS incrustado
- Usando fondos a prueba de balas
Imaginemos que ya tiene una plantilla de correo electrónico HTML y solo desea agregarle una imagen de fondo. Como los boletines varían según las ramas comerciales y la codificación también varía, tomaremos una de las plantillas listas para usar de Atomic Mail Sender para mostrarle los principios fundamentales de la implementación en segundo plano.
1. Atributos de la tabla como forma de agregar una imagen de fondo en HTML
Si observa la plantilla de correo electrónico diseñada por tablas, verá la primera tabla principal que incluye otros bloques de tablas más pequeños. Esto es lo que necesitamos: esta primera tabla de apertura y el fondo de atributos.
El atributo mencionado se puede aplicar a toda la tabla (etiqueta <tabla>) o a la celda de la tabla (etiqueta <td>).
El atributo de fondo contiene una URL donde se aloja su imagen de fondo.
Por ejemplo:
<td width="100%" align="center" bgcolor="#fcd539" border="0" cellspacing="0" cellpadding="0" background="https://path-to-image/title.png"></td>
Para los clientes que no admiten imágenes de fondo, debe mencionar el color de fondo (bgcolor) y el texto alternativo. Sea escrupuloso al elegir el color para el fondo. Todos los elementos de contenido y el texto del mensaje deben ser claramente legibles en segundo plano. Algunos lectores no encienden las imágenes, por eso es bueno usar textos alternativos. No use solo textos alternativos ordinarios que pueda usar para las necesidades de SEO. Imagina que esta es la única alternativa a la imagen y utiliza tus textos alternativos como llamada a la acción. ¡Haz que suenen bien y pegadizas! Usted se beneficiará de esto. O un lector enciende las imágenes para ver la imagen o simplemente sigue el enlace para ver la oferta.
Antes:
Correo electrónico sin fondo
Después:
Correo electrónico con fondo de patrón
Sin imagen de fondo pero con un color de fondo:
Correo electrónico con fondo liso
Si no posee un sitio web, le recomendamos que guarde las imágenes que usa como fondo en servicios gratuitos o servidores públicos. Escriba siempre la ruta absoluta a su archivo de imagen de fondo.
Entonces, así es como se usa el código HTML para agregar una imagen de fondo. Ahora pasemos a la siguiente forma de su inserción.
2. Cómo usar el código CSS en línea para la imagen de fondo
El principio de funcionamiento es el mismo que se mencionó anteriormente, cambie el código de la primera tabla de apertura o celda de la tabla. La diferencia es que trabajas con el atributo de estilo .
El ejemplo de código HTML:
<td width="100%" align="center" border="0" cellspacing="0" cellpadding="0"></td>
- Agregue la siguiente propiedad: background-repeat: no-repeat; a la mesa para que la imagen de fondo no se repita. Entonces, no será así:
Se mostrará así: 
Imágenes de fondo que no se repiten - tamaño de fondo: portada; - esta importante propiedad permite cubrir todo el espacio disponible del boletín con su imagen. Especialmente útil para campañas de correo electrónico móvil cuando el espacio del boletín informativo es limitado y la imagen debe cambiar de tamaño.
Es bueno tener un enlace que lleve a una versión WEB de su mensaje de correo electrónico. A veces es imposible ver las imágenes, esto puede suceder debido a un error oa un mal cliente de correo electrónico. Es una buena práctica tener un enlace a una versión WEB del correo electrónico. Simplemente haz que suene como "¿Problemas para ver las imágenes? Haz clic aquí para obtener una versión WEB"
3. Tabla CSS integrada para la creación de imágenes de fondo
En primer lugar, debe agregar una etiqueta css <style> en el encabezado de su mensaje de correo electrónico. Asegúrese de que no haya otras propiedades de fondo dentro del código HTML existente, de lo contrario, pueden anular la imagen de fondo.
El ejemplo de código CSS es el siguiente:
<style> .bgImage { background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-size: cover; } </style>
Luego vamos directamente al CSS incrustado en la plantilla de correo electrónico. Use la clase para configurar la correspondencia con el estilo css que ha escrito en el encabezado del correo electrónico.
<td class="bgImage"></td>
4. Imágenes de fondo a prueba de balas en el correo electrónico
El principio a prueba de balas para imágenes de fondo combina el uso de atributos HTML con el lenguaje de marcado vectorial (VML) de Microsoft. Este enfoque ayuda a crear una plantilla de correo electrónico con un fondo que se mostrará en cada cliente de correo electrónico.
Hoy hay un servidor gratuito para generar el código de fondo a prueba de balas automáticamente. Ve a https://backgrounds.cm/ y pruébalo.
Simplemente especifique la URL de la imagen de fondo deseada, especifique el color de respaldo y elija si esta regla debe aplicarse a todo el cuerpo del boletín o solo a una celda de la tabla. Como resultado, obtiene el código HTML listo para insertarlo en su plantilla.
Cómo se muestran las imágenes de fondo en los clientes de correo electrónico
Hay un problema: es posible que algunos clientes de correo electrónico no admitan las imágenes de fondo. Por ejemplo, versiones anteriores de Android. Además, algunas versiones de los clientes de Gmail no mostrarán completamente sus plantillas de correo electrónico con imágenes, sin importar cuánto lo intente. Asegúrese de tener esto en cuenta al crear su boletín informativo. Y para facilitar la comprensión del problema, utilice esta tabla.
Fuente: https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email
Para que su trabajo en campañas de correo electrónico sea aún más efectivo, hemos desarrollado un software para extraer correos electrónicos de texto en su computadora. Luego, utilizando un remitente automático de correo electrónico masivo, puede realizar envíos masivos. Cuando se envíen todos los correos electrónicos, realice un seguimiento conveniente con el software de seguimiento de correo electrónico.
Un poco más de consejos
- Ancho de correo electrónico recomendado: 600 px (máx. 650 px). Es la garantía de que su mensaje de correo electrónico se mostrará correctamente en cada dispositivo y en cada cliente de correo electrónico.
- La altura recomendada del correo electrónico depende de la longitud del contenido, pero no debe exceder los 200 píxeles en el mejor de los casos.
- Tamaño de fuente recomendado: 14 px, con espacio de línea 1,5.
- El color del texto debe contrastar con el color de fondo.
A decir verdad, no existen reglas precisas que determinen el tamaño de los elementos del correo electrónico, por lo que puede experimentar con formas y tamaños, pero no haga que la plantilla sea demasiado inusual y extraña para los usuarios.
¿Cómo tener una imagen de fondo en un correo electrónico usando Atomic Mail Sender?
Bueno, aprendiste sobre los fondos para el boletín y cómo configurarlos. Pero, ¿en qué herramienta es posible probar este conocimiento y obtener un resultado visual? Utilice Atomic Mail Sender para estos fines. Esta herramienta tiene un editor de HTML incorporado. Así, escribe tu código, evalúa visualmente el resultado y envía el boletín desde el mismo programa inmediatamente. Vamos a ver.
Boletín con fondo degradado en Atomic Mail Sender 
Editor HTML en Atomic Mail Sender
Invoque el código y envíe correos electrónicos con cualquier fondo en el programa Atomic Mail Sender.
La imagen de fondo es una buena manera de decorar la plantilla de correo electrónico. Pero no reemplace el contenido del correo electrónico solo con la imagen. No cree correos electrónicos completamente basados en imágenes. Esto sigue siendo un error real de marketing por correo electrónico. En algún momento abres un correo electrónico y todo lo que ves son cuadrados con cruces rojas. Claro que no permito imágenes de todos los remitentes, y esto significa que definitivamente extrañaré este correo electrónico, incluso si no fue una estafa o spam. Asegúrese de que su correo electrónico se vea informativo y útil sin imágenes.
Use las plantillas de correo electrónico gratuitas de Atomic Mail Sender para inspirarse y crear correos electrónicos de su propia marca con imágenes de fondo brillantes. Háganos saber si tiene alguna pregunta en los comentarios a continuación.
En nuestra lista de software también hay extractor de números de teléfono para recopilar números de teléfono, búsqueda de correo electrónico whois para encontrar información sobre el propietario del correo electrónico y un verificador de correo electrónico de correo electrónico para verificar la dirección de correo electrónico, para hacerlo en línea, use el verificador de correo electrónico en línea.
¿Quiere crear correos coloridos y enviarlos usando la misma herramienta? ¡Descargue una versión de prueba de Atomic Mail Sender y deleite a los destinatarios con boletines estéticos!