El 102 del código de correo electrónico: trabajar con imágenes

Ver el código que se derrama frente a usted puede resultar increíblemente intimidante y, a veces, frustrante. Le prometo, de vendedor a vendedor, que es mucho más fácil de lo que parece. Además, ser capaz de navegar por el HTML del correo electrónico es una habilidad increíblemente valiosa. En nuestra serie de conceptos básicos del código de correo electrónico, le enseñaremos los conceptos básicos de HTML del correo electrónico que necesita saber para sentirse más cómodo con el código de correo electrónico.

En nuestra última publicación, cubrimos cómo puede navegar por su código de correo electrónico para ponerse al día sobre cómo actualizar enlaces o hacer cambios rápidos de copia. Pero ¿qué pasa con las imágenes?

Las imágenes son la columna vertebral de muchos correos electrónicos de alto rendimiento. Pero, con una complejidad cada vez mayor y varios tipos de archivos, tamaños, accesibilidad y tiempo de carga a considerar, puede abrumar incluso al especialista en marketing más hábil.

En este artículo, abordaremos algunas de las formas más comunes de agregar imágenes a su correo electrónico y repasaremos los conceptos básicos para asegurarnos de que sus suscriptores tengan una gran experiencia. Si está buscando profundizar en las imágenes, consulte estas guías:

• Guía definitiva para imágenes de fondo en correo electrónico
• Una guía para los GIF animados en el correo electrónico
• Uso de imágenes en correo electrónico HTML

Puede seguir fácilmente los temas cubiertos en esta guía, así que continúe y abra un correo electrónico en Litmus Builder y ¡comenzaremos!

Prepara tu imagen

Antes de que pueda agregar su imagen a su correo electrónico, asegúrese de que esté configurado para el éxito. Primero, asegúrese de que la imagen que está utilizando sea de un buen tipo y tamaño de archivo para correo electrónico . Los archivos de gran tamaño ralentizarán el tiempo de carga, lo que reducirá las conversiones y el compromiso generales, así que asegúrese de utilizar una imagen liviana que se cargue rápidamente.

Inserta tu imagen

Encuentre dónde desea agregar la imagen en su código; si está usando Litmus Builder, gire la Vista de cuadrícula para hacer clic donde desea que aparezca una imagen y luego haga clic en la vista de código. Cuando haya encontrado el lugar perfecto, use la etiqueta <img> para agregar su imagen, pero reemplace la URL aquí con un enlace directo a su imagen.

Si no está seguro de qué es un enlace directo, busque el final del nombre del archivo, debe terminar con un tipo de archivo de imagen como ".png", ".jpg" o ".gif". Los enlaces a carpetas o HTML no funcionarán aquí, debe apuntar directamente a la imagen que está agregando a su correo electrónico.

 <img src="img-url.jpg" />

¡Eso es todo! Una vez que agregue su etiqueta, su imagen se mostrará en el panel de vista previa si está en Litmus Builder.

¿Tienes curiosidad por saber dónde puedes alojar tus imágenes? La mayoría de los ESP tienen un sistema de alojamiento de archivos donde puede cargar sus imágenes y usar esas URL públicas para la fuente de la imagen en su correo electrónico, así que asegúrese de verificar su ESP primero. Si su ESP no proporciona alojamiento de archivos de imágenes, considere usar AWS de Amazon o el servidor FTP de su propio sitio web para el alojamiento de imágenes.

Encuentra las dimensiones adecuadas

Es mejor usar una imagen que tenga el doble del tamaño del espacio en el que le gustaría insertar su imagen para que se vea bien en todos los monitores y no haya pixelación ni borrosidad. Ajuste el ancho y el alto de sus imágenes agregando un modificador a su etiqueta <img> que creó en el paso anterior. Se verá algo como esto:

 <img src="img-url.jpg" width="400" height="100" />

Ajuste los valores de ancho y alto dependiendo de lo que tenga sentido para su correo electrónico. Puede jugar con estos valores y ver cómo se ven haciendo cambios, luego haciendo clic en el panel de vista previa en Builder para verlos actualizar.

Agregar texto ALT

El texto ALT describe una imagen para que aquellos que tienen imágenes deshabilitadas en su cliente de correo electrónico o dependen de un lector de pantalla puedan leer fácilmente su correo electrónico. Por ejemplo, si tenemos una imagen de una promoción que ofrece un 20% de descuento, agregar un texto ALT que describa la oferta hace que su lector sea consciente de la oferta, incluso si no puede ver las imágenes por algún motivo.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

El mejor texto ALT es descriptivo, conciso y tiene la misma intención que tu imagen. Si pasa su correo electrónico a través de la lista de verificación de Litmus antes de enviarlo, marcaremos el texto ALT que falta para que pueda ingresar y actualizarlo fácilmente. ¡Ahora ni siquiera tiene que consultar con un desarrollador!

Intercambiar imágenes

¿Cambiaste de opinión sobre esa imagen? Tienes dos opciones:

1. Al igual que cuando crea una nueva imagen, puede reemplazar la URL que apunta a su imagen por una nueva. Esto mantendrá todas sus dimensiones, su texto ALT o cualquier otra cosa que pueda ayudar a diseñar su imagen y simplemente actualizar el contenido de la imagen.

Tome la etiqueta de imagen actual y busque la ruta del archivo:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Reemplace la ruta con su nueva ruta de imagen:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. Dependiendo de dónde esté alojada su imagen, también puede cargar una nueva imagen con el mismo nombre exacto en la misma ubicación. De esa manera, no es necesario que toque el código para actualizar la imagen de su correo electrónico.

Correo electrónico perfecto

Ahora que tiene el poder de actualizar y modificar imágenes, ¡use ese poder sabiamente! Las imágenes en el correo electrónico pueden fallar rápidamente. Los archivos pesados ​​que tardan mucho en cargarse, el uso de imágenes para todo su correo electrónico o la accesibilidad anterior para el diseño pueden crear experiencias desordenadas para los suscriptores.

A continuación, se muestran algunas prácticas recomendadas rápidas que debe tener en cuenta al crear su biblioteca de imágenes:

• Mantenga los archivos ligeros y atractivos , menos de 1 MB es lo mejor y cuanto más pequeños, mejor (la lista de verificación de Litmus verifica su tiempo de carga, así que no se preocupe si no conoce el tamaño de cada imagen).
• Agregue texto alternativo para que su correo electrónico sea legible y accesible incluso si las imágenes no son visibles.
• No envíe correos electrónicos de solo imágenes y asegúrese de que su correo electrónico tenga texto en vivo. Puede ser tentador diseñar un correo electrónico completo usando una imagen, pero eso puede dañar el compromiso y las conversiones con tiempos de carga prolongados y malas experiencias para aquellos que tienen imágenes deshabilitadas.

¿Necesita ayuda con una pregunta específica sobre el código para novatos? Háganos saber qué le gustaría ver a continuación en esta serie. ¡Ninguna pregunta es demasiado básica!

_________________________________

Obtenga más información sobre las imágenes en el correo electrónico:

• Por qué no debería enviar correos electrónicos con solo imágenes
• Una guía para los GIF animados en el correo electrónico  
• Comprensión de las imágenes Retina en el correo electrónico HTML
• PNG, GIF o JPEG? ¿Cuál es el mejor formato de imagen para correo electrónico?  
• GIF animados en el correo electrónico: 10 consejos para mantener pequeños los tamaños de archivo  
• La guía definitiva para las imágenes de fondo en el correo electrónico
• PNG animados en el correo electrónico: ¿una alternativa a los GIF?