Cómo usar imágenes en tus emails

¿Por qué usar imágenes en los emails?

La gente comprueba su bandeja de entrada más de 10 veces al día, pero solo pasa alrededor de cuatro segundos mirando cada correo electrónico. Por suerte, las imágenes pueden comunicar una idea o un mensaje de inmediato, por lo que cuatro segundos son suficientes para captar la atención de tus destinatarios.

Por ello, si utilizas imágenes, las posibilidades de que tus destinatarios “relean” o hagan clic en algún enlace de tu correo son mayores. Y puesto que ese el objetivo de tus campañas de email marketing, estamos casi seguros de que quieres utilizar imágenes en tus correos electrónicos.

Sin embargo, el uso de imágenes en un email puede ser un arma de doble filo: si no se muestran de manera responsive, tus imágenes pueden provocar que las personas pongan el mensaje de correo electrónico en la papelera. Pero no te preocupes: hemos escrito esta guía para que tus usuarios puedan admirar las imágenes de tus correos.

Las medidas de las imágenes para tu email

Una de las preguntas más comunes es: ¿Qué tamaño debe tener una imagen para tus correos? La respuesta es que no debe ser demasiado grande ni demasiado pequeña; aconsejamos que limites el ancho de tus imágenes a 600 píxeles e intentes que su tamaño no supere 1 MB.

A continuación, te contamos más detalles sobre la importancia de elegir el tamaño adecuado de tus imágenes.

Imágenes demasiado grandes

Uno de los principales problemas asociados con el uso de imágenes demasiado grandes es que no se muestren correctamente o tarden demasiado tiempo en cargarse. Las imágenes muy pesadas son particularmente problemáticas cuando se quiere abrir un correo desde el teléfono móvil, porque los datos móviles no descargan las imágenes con la misma rapidez que la red Wifi, y ya sabes que, en el email marketing, cada segundo cuenta.

Nuestro Editor de emails te recuerda que las imágenes no deberían superar 1 MB, porque eso afectaría a tu entregabilidad y queremos que saques el mayor rendimiento de tus campañas de email marketing.

¿Cómo puedes reducir el tamaño de una imagen en PNG o JPEG? Con herramientas gratuitas, como Tinypng, puedes reducir fácilmente el tamaño de las imágenes sin perder la calidad del archivo.

Imágenes demasiado pequeñas

Si ahora estás pensando en reducir considerablemente el tamaño de todas las imágenes de tus emails para ofrecer la mejor experiencia posible a tus destinatarios, ¡alto ahí! Esa tampoco es la solución.

Uno de los errores más comunes en el email marketing es alargar la imagen para que se ajuste al ancho o al alto de tu newsletter. Si haces eso con imágenes demasiado pequeñas, se mostrarán distorsionadas o pixeladas.

Además, no olvides que cuanto más reduzcas el tamaño, menos visibles serán los detalles de los productos o servicios que quieres enseñar a tus contactos. Para evitarlo, elige imágenes que puedan ajustarse al tamaño de tu newsletter; puedes recortarlas hasta alcanzar el tamaño exacto antes de subirlas a tu plantilla de email, o, aún mejor, usar una plataforma de emailing como Sinch Mailjet que te permita editar las imágenes directamente dentro de la plantilla.

Los formatos de las imágenes para email

Otro de los factores que debes tener en cuenta al elegir imágenes para tus correos es su formato. Seguramente sepas que existen diversos formatos de imágenes, cada uno de ellos con características específicas (que afectan a la calidad o al tamaño del archivo), y que las plataformas de email marketing profesional permiten utilizar varios de estos formatos.

Así que la gran pregunta es: ¿Qué formato de imagen es mejor para mis correos electrónicos? Antes de contestarte, vamos a analizar los cuatro formatos de imagen más utilizados en los emails: JPG, PNG, GIF y SVG.

Formato JPG/JPEG para email

El formato de archivo JPG, también conocido como JPEG, desarrollado por el Joint Photographic Experts Group (JPEG), es probablemente el más popular en internet. Este formato permite una mezcla ilimitada de colores primarios (rojo, azul y amarillo) para crear hasta 16 millones de tonalidades.

Uno de sus atractivos más importantes es que se puede comprimir muy fácilmente y su tamaño se puede reducir hasta 100 veces sin perder la información de color. Gracias a su gran capacidad de compresión, es el más indicado para compartir fotografías, ya que te permite tener imágenes con poco peso, que no afectarán al tiempo de carga de tu email.

Pero su punto fuerte puede convertirse también en una debilidad: la compresión de la imagen puede provocar una pérdida de calidad de la imagen, que es más evidente en fotografías con zonas amplias de color (en fotografías con patrones más complejos la pérdida de calidad es casi inapreciable).

Ejemplo de fotografía comprimida en PNG (1) y JPG (2).

Tampoco es la opción más recomendable cuando se trata de ilustraciones, dibujos o imágenes con textos, ya que la pérdida de calidad será muy visible y lo más probable es que el archivo se vea pixelado. Además, el formato JPG no soporta transparencias, por lo que todas las imágenes con fondo transparente en JPG se mostrarán con un fondo blanco por defecto.

Formato PNG para email

El formato PNG (Gráficos de Red Portátiles o Portable Network Graphics en inglés) es otro de los formatos de imágenes más populares. A diferencia del JPG, las imágenes en PNG no pierden su calidad cuando se comprimen y pueden soportar imágenes con fondos transparentes.

Fondo transparente en archivo PNG (1) y archivo JPG (2).

Pero, como casi todas las cosas, también tiene una pega: el tamaño del archivo puede ser notablemente mayor que una imagen en formato JPG. Esto puede suponer un problema para cargar las imágenes cuando los correos electrónicos se visualizan en dispositivos móviles utilizando una tarifa de datos.

Otro aspecto a tener en cuenta es que el formato PNG puede no ser compatible con navegadores anticuados (como las versiones previas de Internet Explorer 6.0). Aunque puede que esto no sea un inconveniente para los suscriptores de tu lista de correo, merece la pena saber qué dispositivos y tecnología utilizan tus usuarios.

Formato SVG para email

El SVG, (Gráficos Vectoriales Escalables o Scalable Vector Graphics en inglés), es un formato de imagen especialmente diseñado para gráficos vectoriales. A diferencia de las imágenes JPG, PNG y GIF, este formato es básicamente un documento de texto plano que describe las líneas, formas y colores que componen la imagen.

La mayor ventaja del formato SVG es que se puede editar fácilmente en la web con JavaScript, CSS y HTML. Además, las imágenes SVG tienen una excelente resolución y su tamaño es pequeño.

Sin embargo, las imágenes SVG no se recomiendan para los correos electrónicos. ¿Por qué? Solo algunos clientes de email admiten este formato. Los dispositivos iOS y Apple Mail no tienen problemas para mostrar este tipo de imágenes, pero otros clientes como Gmail, Outlook y Yahoo aún no soportan el formato SVG.

Formato GIF para email

¿Qué es el formato de imagen GIF? El formato GIF (Formato de Intercambio de Gráficos o Graphics Interchange Format en inglés) no es nada más que una serie de imágenes que se muestran en rápida sucesión para crear la ilusión de movimiento, es decir, animaciones.

GIF para enseñar la función de Mailjet de Sesiones guardadas.

La gran ventaja del formato GIF es que su tamaño es mucho más pequeño que otros formatos utilizados para crear animaciones, lo que lo convierte en la mejor opción para añadir animaciones a tus emails. También soporta fondos transparentes, que nunca viene mal.

Además, el GIF es la forma más antigua de animación en internet, por lo que es compatible con casi todos los clientes de correo electrónico, con la excepción de Outlook 2007, 2010, 2013, 2016 y 2019 (para Windows). Pero no te preocupes: si los destinatarios de tus correos utilizan estas versiones de la edad de piedra, los archivos GIF muestran la primera imagen, de modo que no sabrán lo que se está perdiendo.

Su gran limitación es que soporta solo 256 colores, a diferencia de los millones soportados por JPG o PNG. Por ese motivo, cuando una imagen tiene más de 256 colores, debe adaptarse para reducir sus colores, lo que compromete su calidad.

¿Dónde puedes encontrar GIF?

No podemos cerrar esta sección sin incluir un banco de imágenes para GIF. El rey indiscutible en este sector es GIPHY, no solo puedes descargar imágenes animadas de todo tipo, ¡sino que también puedes crearlas! Es tan popular que lo podemos encontrar en apps como Facebook Messenger o WhatsApp.

¿Cuál es el mejor formato de imagen para los emails?

Así que, volviendo a nuestra pregunta inicial: ¿cuál de estos formatos es el mejor para los emails? La respuesta es… Depende.

Las imágenes JPG son la primera opción para los emails, especialmente si tu objetivo es tener óptimos resultados en dispositivos móviles o si utilizas varias fotos en color.

Las imágenes PNG son preferibles cuando la calidad de la imagen es más importante que el tamaño del archivo, o cuando se utilizan imágenes de contenido no fotográfico (como ilustraciones o dibujos) o de texto.

Las imágenes en formato SVG se recomiendan para emails que se abren exclusivamente en dispositivos de Apple.

Y, por último, los emails con imágenes GIF son perfectos para enseñar a tus suscriptores un nuevo producto y sus funcionalidades y, en general, dinamizar el contenido de tu newsletter.

Dónde encontrar imágenes para tus emails

Bueno, ahora que ya conoces los pros y los contras de cada formato y cuál es el tamaño ideal de las imágenes para tus correos, es el momento perfecto para comenzar la búsqueda de imágenes para tu próxima newsletter.

A la hora de elegir fotografías profesionales, puedes invertir en un fotógrafo profesional o, si no tienes los recursos suficientes, puedes recurrir a un banco de imágenes.

¿Qué es un banco de imágenes? Un banco de imágenes es un sitio web donde puedes encontrar imágenes, ilustraciones, dibujos y fotografías para descargar, que luego utilizarás en tu página web, tus redes sociales y, por supuesto, tus emails.

Existen dos tipos de bancos de imágenes: gratuitos y de pago. En los bancos de imágenes gratuitos puedes descargar contenido de alta calidad de forma ilimitada, sin tener que gastar ni un céntimo. En los bancos de imágenes de pago (como bien te imaginas) necesitas comprar las imágenes de manera individual o en paquetes. El precio de estas fotografías se justifica por su calidad excelente y, en ocasiones, por la “exclusividad” del contenido que te ofrece; y es que, a diferencia de los bancos gratuitos, es menos probable que te encuentres la misma fotografía en otras webs o blogs.

Para ayudarte a encontrar las mejores fotografías para tus emails, hemos seleccionado diez bancos de imágenes (cinco gratuitos y cinco de pago) entre los más populares del momento. Si quieres conocer cuáles son los mejores, lee nuestro post Bancos de imágenes: Cómo encontrar imágenes para tus campañas.

Herramientas online para crear imágenes para tus emails

Para esas ocasiones en las que las imágenes que encuentras no son el match visual perfecto para tu contenido, o si simplemente quieres mejorar una imagen, hemos recopilado algunas herramientas de diseño online que puedes comenzar a utilizar.

Canva

Canva es la herramienta de diseño más reconocida entre los profesionales del marketing. Gracias a ella, hasta los más inexpertos pueden diseñar contenido de gran calidad.

Sus infinitas plantillas, encabezados, infografías o logos hacen que sea realmente sencilla. Además, contiene una galería muy completa de iconos, fotografías e ilustraciones (muchas de las cuales son gratuitas) que puedes incluir en tus diseños.

ColorZilla

Si nunca te acuerdas del código de tu color corporativo o has encontrado una tonalidad de verde perfecta que te gustaría incluir en tu email, la extensión para Chrome ColorZilla es la herramienta que necesitas.

Solo tienes que hacer clic en el color que quieres copiar y ColorZilla te dará el código HEXA para que puedas usarlo en tus diseños. Genial, ¿verdad?

WebGradients

Los degradados tienen adeptos y detractores. Si eres un fan de los colores degradados, WebGradients es una excelente herramienta para crear estos efectos. Este sitio ofrece una gran colección de degradados que puedes descargar gratuitamente en formato PNG para utilizarlos, por ejemplo, como fondo en tus emails.

MJML

¿Te gustaría añadir tu primer elemento interactivo a un email? Gracias a MJML, el lenguaje de plantilla de código abierto de Mailjet, puedes dar rienda suelta a tu imaginación y añadir elementos como carruseles de imágenes a tu newsletter.

¿Te gusta? Este es solo un ejemplo. Visita nuestro sitio web para descubrir todo lo que puedes hacer con MJML.

Cómo incrustar o insertar una imagen en un correo

El siguiente paso es añadir la imagen que has elegido a tu correo electrónico, ¡por fin! Hay dos formas principales de hacerlo: subiendo una imagen a tu galería o copiando el enlace de una imagen alojada online. Echemos un vistazo a las ventajas y desventajas de cada una de estas opciones.

1. Imagen incrustada

Las imágenes incrustadas se encuentran en el propio email, es decir, técnicamente, la imagen se adjunta al email (un poco como cuando añadimos un archivo adjunto en un correo personal), pero nuestro destinatario la verá como parte integrante de la newsletter.

La ventaja de esta primera opción es que tendrás la tranquilidad de saber que todos tus contactos recibirán la imagen (ya que viene adjunta en la newsletter) y podrán visualizarla en modo offline (por ejemplo, después de descargar el email).

Sin embargo, las imágenes incrustadas tienen algunas desventajas. El mayor inconveniente es que los filtros de spam pueden señalar los emails con imágenes muy grandes como correo no deseado. Además, las imágenes incrustadas aumentan el tamaño del email y pueden incluso hacer que tu mensaje sea demasiado grande para los parámetros de algunos proveedores de correo electrónico.

2. Imagen enlazada

La otra opción es enlazar las imágenes de una fuente externa, habitualmente desde un servidor online como Imgur o DropBox, o una web. Esto permite copiar el enlace de la imagen y pegarlo en tu newsletter.

La ventaja de este método es que el tamaño de tu correo electrónico se reduce significativamente con respecto al uso de imágenes incrustadas. También disminuye el tiempo de carga y el riesgo de que nuestros correos sean marcados como spam.

Una desventaja, sin embargo, es que existen mayores probabilidades de que haya errores. Si el espacio web en el que están alojadas las imágenes sufre problemas, tus fotos no se mostrarán correctamente. Además, por razones de seguridad, algunos clientes de email suprimen por defecto muchas imágenes enlazadas.

Por cierto, con el editor de Mailjet puedes añadir tanto imágenes incrustadas como imágenes enlazadas a tus correos. Y ya que viene al caso, aprovechamos la ocasión para recordarte que puedes probar nuestro editor de emails gratuitamente.

Cómo etiquetar una imagen en un email correctamente

Ya estamos llegando al final de esta guía, pero necesitamos decirte por qué no puedes olvidarte de la etiqueta ALT. Si envías una newsletter o un correo y hay algún problema con la visualización de las imágenes (lo que nunca pasa hasta que pasa), la etiqueta ALT o texto alternativo se mostrará en lugar de tu imagen, de modo que los destinatarios puedan al menos saber de qué trata.

Qué es la etiqueta ALT o texto alternativo

La etiqueta ALT o texto alternativo es un breve texto que puedes utilizar para describir el contenido de una imagen y que se muestra en caso de que la imagen no se visualice correctamente, ya sea a causa de un problema técnico o porque tu destinatario tiene deshabilitada su descarga.

Además, los lectores de pantalla utilizan la etiqueta ALT para describir una imagen a usuarios con discapacidades visuales, así que ¡no lo omitas!

Por qué deberías usar la etiqueta ALT en tus emails

Este texto es especialmente importante por dos motivos. Primero, informa a los usuarios que no pueden ver las imágenes sobre el contenido de éstas. En segundo lugar, los emails que contienen imágenes con una etiqueta ALT tienen una mejor reputación de cara a los clientes de email, ya que los spammers no se suelen tomar las molestias de escribir este texto.

En sitios web, la etiqueta ALT también ayuda a mejorar el posicionamiento SEO de una página, puesto que es el lugar idóneo en el que insertar palabras clave. Pero recuerda: el objetivo de una etiqueta ALT es aportar tanta información como sea posible sobre la imagen de forma breve (no dejes que las palabras clave te confundan).

¿Quieres saber más sobre cómo mejorar el diseño de tus emails? Echa un vistazo a nuestro Centro de estrategias de email, una base de datos con más de 60 tácticas para ayudarte a mejorar el rendimiento de tus campañas de email.

Imágenes en el email: los errores más comunes

Para terminar, vamos a compartir tres de los errores más comunes que se cometen al incluir imágenes en un correo. Toma nota porque ya no tendrás excusa para cometer estos errores, que sin duda alguna pueden tener un efecto negativo en las métricas de tus campañas de email marketing.

1. Demasiadas imágenes

Un exceso de imágenes no solo puede hacer que el email parezca demasiado comercial o dispersar la atención de tus suscriptores, sino que también puede afectar negativamente a la tasa de entrega de tus correos.

Los emails que solo contienen imágenes, o donde predominan los elementos visuales con respecto al texto, pueden asociarse a actividades de spammers, puesto que se trata de una de las técnicas más usadas por este tipo de remitentes para esconder información (de modo que no pueda ser leída por los ISP o proveedores de servicios de internet).

Por eso, siempre recomendamos seguir una proporción 60/40 de texto e imágenes, respectivamente, para proteger la entregabilidad y aumentar tus oportunidades de llegar a la bandeja de entrada de tus suscriptores.

2. Imágenes que no se visualizan

De nada sirve optimizar los elementos visuales de un correo si, una vez que tu email llega a la bandeja de entrada, estos no se visualizan. ¿Por qué ocurre? Los distintos clientes de email, navegadores y aplicaciones gestionan de forma diferente las imágenes en los emails y, en algunos casos, las bloquean.

Por si no fuera bastante, a veces tus queridos suscriptores se ponen en tu contra y cambian la configuración de sus bandejas de entrada para que los elementos visuales no se muestren por defecto. En estos casos, en vez de la imagen, lo que aparece es un recuadro blanco con un icono de “imagen rota” en la esquina superior izquierda.

Por todo ello, es muy importante que tus emails se puedan leer y procesar, incluso cuando las imágenes no se pueden visualizar. Afortunadamente, hay algunas estrategias que te pueden ayudar en estos casos:

• Utiliza las etiquetas ALT, como explicamos anteriormente.

• Evita poner información relevante o CTA directamente en las imágenes: es mucho más recomendable añadir enlaces en el texto o utilizar botones.

• Añade un color de fondo a las imágenes (por ejemplo, tu color corporativo); de este modo, aunque estas no se visualicen, tu email tendrá algún elemento de diseño y una jerarquía más clara.

• Pide a tus destinatarios que modifiquen la configuración de sus clientes de email para que puedan ver las imágenes de tus emails.

3. Imágenes no optimizadas para móviles

Seguramente esto no te sorprenda, pero la filosofía del mobile first (en español, filosofía de “dispositivos móviles primero”) también vale para los emails. En la actualidad más del 50% de los emails se abren en dispositivos móviles y si un email no se muestra bien, sin importar lo bueno que sea el contenido, es muy probable que se elimine en menos de tres segundos. Sí, ¡en tres segundos! A nosotros nos parece una razón más que suficiente para prestar atención al diseño y a las imágenes de un email.

Como hemos señalado en esta guía, asegúrate de que el tamaño y el formato de tus imágenes son adecuados, y utiliza un diseño de email responsive. Todas nuestras plantillas de correo electrónico, creadas con lenguaje MJML, son responsive por defecto, por lo que puedes elegir cualquiera de ellas o crear una desde cero, sin tener que preocuparte de cómo se visualizará en los dispositivos de tus destinatarios.

En cuanto al contenido, piensa siempre en cómo quedará en una pantalla de móvil o tablet. Si, por ejemplo, acabas de sacar una infografía chulísima y llena de detalles, tal vez tu newsletter no sea el sitio ideal para compartirla con tus contactos: a nadie le apetece bajar con el dedo hasta el infinito para ver qué se esconde al final.

En resumen, conoce cuál es el dispositivo que utilizan tus usuarios y diseña tus campañas para ofrecerles una experiencia de navegación positiva.

Ahora te toca a ti

Ahora que ya sabes todo lo que necesitas para utilizar las imágenes en tus correos del mejor modo, es el momento de ponerte manos a la obra y crear un email que no deje indiferentes a tus suscriptores.

Visita nuestra galería de plantillas de email y prueba la demo de nuestro Editor de emails para dejar fluir tu creatividad y empezar diseñar emails con imágenes increíbles, que sean la estrella de cualquier bandeja de entrada.

***

Este post es una versión actualizada del artículo "Como usar imágenes en el email" escrito por Enisa Korance y publicado en el blog de Mailjet en agosto de 2018.