Beatriz Redondo Tejedor

// Head of Content

El email ha avanzado a pasos de gigante desde que naciera como sistema para enviar unas simples líneas de texto. Con las bandejas de entrada cada vez más llenas, la batalla por la atención de los usuarios es cada vez más intensa.

Los emails de solo texto han pasado a la historia (excepto igual cuando alguno de tus colegas te envía por correo el último cotilleo de la oficina), dejando paso a componentes más visuales e interactivos. Ya no vale con escribir párrafos y párrafos, porque la gente no va a pararse a leeros. Por ello, las imágenes en el email se han convertido en un elemento vital.

En esta guía aprenderás todo lo que necesitas saber sobre las imágenes en el email: cuáles son los errores más comunes y cómo evitarlos, los diferentes formatos de imagen y las ventajas de cada uno y, por supuesto, cómo encontrar las imágenes perfectas para tus campañas.

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

Las imágenes no sólo nos ayudan a romper grandes cachos de texto, sino que también suponen una forma mucho más rápida de comunicar una idea o un mensaje, captando la atención de nuestros destinatarios de forma instantánea.

Ya conoces el dicho: “una imagen vale más que mil palabras”. En la saturada bandeja de entrada de nuestros contactos tan sólo tenemos unos segundos para transmitir nuestro mensaje y las imágenes en los emails son la manera perfecta para conseguirlo.

Sin embargo, el uso de las imágenes en el email puedes ser un arma de doble filo: si no se muestran de manera responsive, tus emails pueden perder toda su eficacia y resultar de mala calidad, afectando significativamente tu tasa de interacción.

ejemplo imágenes en email privalia

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

Como hemos visto, las imágenes son una forma fantástica de evitar que el lector se sature con tanto texto y que su vista se canse, o que el contenido principal de nuestro mensaje se pierda entre tanto texto, sin embargo hay cinco errores muy habituales que pueden ser muy contraproducentes y hacer que tu newsletter sea mal recibida por tus contactos.

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 nuestros suscriptores, sino que también puede afectar negativamente a tu entregabilidad.

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, para que no pueda ser leída por los ISPs (proveedores de servicios de internet).

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

Banner a la guía de entregabilidad

2. Imágenes demasiado grandes

Uno de los problemas principales que surgen al usar imágenes demasiado grandes es que, cuando son demasiado pesadas corremos el riesgo de que el emails no se muestre correctamente o que tarde mucho tiempo en cargarse.

Además, las imágenes muy pesadas son un verdadero dolor de cabeza para aquellos que usan una tarifa de datos en vez de una red wifi para ver sus correos electrónicos: ¡el consumo de datos no deja a nadie indiferente!

imagen en email demasiado grande

¿Nuestro consejo? Limita el ancho de tus imágenes a 600px e intenta que su tamaño no supere 1 MB. Con herramientas gratuitas como Tinypng puedes reducir fácilmente el tamaño de las imágenes sin perder la calidad del archivo.

3. Imágenes demasiado pequeñas

Si ahora te estás planteando reducir considerablemente el tamaño de todas las imágenes en tus emails para no afectar ni a tu entregabilidad ni a la experiencia de tus destinatarios, ¡alto ahí! Esa tampoco es la solución.

Uno de los errores más comunes en 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 pueden aparecer distorsionadas o pixeladas y 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 pueden ajustarse al tamaño de tu newsletter: puedes recortarlas en el tamaño exacto antes de subirla a tu plantilla de email, o, aún mejor, usar una plataforma de emailing como Mailjet que te permita editar las imágenes directamente dentro de la plantilla. 😉

editar imagenes en Passport

4. Imágenes que no se visualizan

Otro de los mayores problemas es el de las imágenes bloqueadas. De nada sirve optimizar los elementos visuales si, una vez que tu email llega a la bandeja de entrada, estos no se visualizan.

Esto es debido a que los distintos clientes de email, navegadores y aplicaciones gestionan de forma diferente las imágenes en los emails y en algunos caso las bloquean. Por si no fuera bastante, a veces nuestros queridos suscriptores se ponen en nuestra contra y cambian la configuración de sus bandejas de entrada para que los elementos visuales no se muestren por defecto. En estos caso, en vez de la imagen, lo que aparece en un recuadro blanco con un icono de “imagen rota” en la esquina superior izquierda.

imagen bloqueada en email

Por todo esto, es más importante que nunca asegurarnos de que nuestros emails sean legibles y procesables incluso cuando las imágenes no se pueden visualizar.

Afortunadamente, hay algunas estrategias que nos pueden ayudar en estos casos. Antes de nada, utiliza siempre las etiquetas ALT (que veremos más en detalle más adelante) para describir brevemente tus elementos visuales, y evita poner información relevante o CTAs directamente en las imágenes: es mucho más recomendable añadir enlaces en el texto o utilizar botones.

Otra opción es la de dar a las imágenes un color de fondo (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.

Y por último, pero no menos importante, pide a tus destinatarios que modifiquen su configuración para que las imágenes en tus emails se muestren siempre.

5. 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. A día de hoy, casi el 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 probable que se elimine en menos de tres segundos.

Sí, como lo lees: ¡tres segundos! 😱 A nosotros nos parece una razón más que suficiente para prestar particular atención al diseño y a las imágenes de un email.

Además de tener en cuenta los factores que hemos visto hasta ahora (es decir, reducir la cantidad y el peso de las imágenes y utilizar el tamaño adecuado), asegúrate de usar un diseño de email responsive.

Todas nuestras plantillas de email, 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 hacer scroll hasta el infinito para ver qué se esconde al final.

imagen responsive en email

En definitiva, siempre ten en cuenta desde qué dispositivo abrirán el email tus usuarios, para decidir si hace falta modificar elementos del diseño de tu campaña y así ofrecerles una experiencia de navegación positiva.

Dónde encontrar imágenes para tus emails

Ahora que ya sabes qué trampas evitar para no penalizar tus emails con el uso de material visual, no te queda más que empezar la búsqueda de las imágenes perfectas para tu próxima newsletter.

Lo ideal cuando necesitas fotografías profesionales, pero no tienes los recursos para invertir en un fotógrafo, es recurrir a un banco de imágenes.

Los bancos de imágenes son sitios web donde puedes encontrar imágenes, ilustraciones, dibujos y fotografías que puedes descargar gratuitamente o comprar para luego utilizarlas dentro de tu página web, artículos de blog, redes sociales y, por supuesto, emails.

Existen dos tipos de bancos de imágenes:

  • Gratuitos
  • De pago

 

Los primeros nos permiten descargar contenido de alta calidad de forma ilimitada, sin tener que gastar ni un céntimo; eso sí, a veces piden que nos creemos una cuenta en su web. Además, son extremadamente fáciles de usar, ya que por lo general las imágenes se descargan en un solo clic.

Por otro lado, los bancos de imágenes de pago te permiten descargar un limitado número de imágenes dependiendo de la tarifa o plan que hayas comprado. El precio de estas fotografías se compensa con una calidad excelente y, en ocasiones, la “exclusividad” del contenido que te ofrece. En efecto, 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 para tus campañas‘.

Los formatos de imágenes para email

Ya sabes donde encontrar fotografías estupendas y de gran calidad para tus emails, pero hay otro factor importante que debes considerar: su formato.

En efecto, existen varios formatos de imágenes que puedes utilizar en tus emails y es importante recordar que cada uno tiene unas características específicas (como la calidad de la imagen, el tamaño del archivo, la compresibilidad) y que los clientes de email tratan estos formatos de manera distinta. Así que la gran pregunta es: ¿qué formato de imagen es mejor para mis correos electrónicos?

Antes de poder contestarte, vamos a analizar los cuatro formatos de imagen más utilizados en el email: JPG, PNG, GIF y SVG.

Formato JPG para email

El formato de archivo JPEG, desarrollado por el Joint Photographic Experts Group (JPEG), es el más común en Internet. Este formato permite una mezcla ilimitada de colores primarios (rojo, azul y amarillo) dando vida a hasta 16 millones de combinaciones de colores.

Su popularidad se debe al hecho de que puede comprimirse muy fácilmente y reducir su tamaño 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 nos permite tener imágenes con poco peso, que no afectarán al tiempo de carga de nuestro email.

Pero su punto fuerte puede convertirse también en su talón de Aquiles: la compresión puede llevar una pérdida de calidad de la imagen, sobre todo con fotografías que contienen zonas amplias de color, mientras que es en fotografías con patrones más complejos la pérdida de calidad es casi inapreciable.

diferencia compresión png vs jpg

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

Por otro lado, no es la mejor opción 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 las 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 conocido. 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 png vs jpg

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

Pero hasta las cosas más bonitas tienen sus pegas: su gran desventaja es el tamaño de archivo, que puede ser significativamente mayor que con el formato JPG. Esto comporta un grave problema de carga cuando los email se visualizan en dispositivos móviles utilizando una tarifa de datos en vez de una red wifi.

Otro aspecto a tener en cuenta (y que puede crearnos bastantes problemas) es su compatibilidad: algunos navegadores más anticuados (como Internet Explorer hasta la versión 6.0) no consiguen mostrar este formato de imagen correctamente, así que es importante saber desde dónde nos leen nuestro suscriptores para decidir si este es el mejor formato de imagen para nuestros emails.

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 es básicamente un documento de texto plano que describe las líneas, formas y colores que componen la imagen.

La ventaja del formato SVG es que puede ser fácilmente editado en la web con JavaScript, CSS y HTML. Además, las imágenes SVG no tienen problemas de resolución: se ven nítidas en cualquier pantalla, a la vez que mantienen un tamaño de archivo pequeño.

Para los correos electrónicos, sin embargo, las imágenes SVG se recomiendan sólo hasta cierto punto, puesto que solo unos pocos clientes de email admiten este formato. Los dispositivos iOS y Apple Mail no tienen problemas para mostrar SVG, sin embargo otros clientes como Gmail, Outlook y Yahoo aún no lo soportan.

Formato GIF para email

El formato GIF (Formato de Intercambio de Gráficos o Graphics Interchange Format en inglés) es el único formato de esta lista que soporta animaciones. En efecto, el GIF 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.

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

La gran ventaja de los GIFs es que tienen un tamaño significativamente más pequeño que otros formatos similares, lo que los convierte en el formato de imagen animado perfecto para añadir movimiento a tus emails sin interferir con el diseño. Y además soporta fondos transparentes, que nunca viene mal. 😉

Otro factor muy importante es que, dado que el GIF es la forma más antigua de animación en Internet, es compatible con casi todos los clientes de correo electrónico, con excepciones de Outlook 2007, 2010 y 2013. Pero no te asustes: en el caso de que el GIF no se reproduzca correctamente, simplemente se muestra la primera imagen y el destinatario ni sabrá 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 también su calidad.

Bancos para GIFS: GIPHY

No podemos cerrar esta sección sin incluir un banco de imágenes para GIFs. El rey indiscutible en este sector es GIPHY, que además de descargar imágenes animadas de todo tipo, te permite también crearlas. Es tan popular que se ha metido hasta en las aplicaciones más usadas hoy en día, como Facebook Messenger y recientemente 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 nuestro objetivo es tener óptimos resultados en dispositivos móviles o si utilizamos 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 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.

Herramientas online para crear imágenes para tus emails

Para esas ocasiones en las que no consigues encontrar el match visual perfecto para tu contenido o quieres aventurarte a diseñar tus propias imágenes, hemos recopilado algunas herramientas de diseño online que pueden hacer al caso tuyo.

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. Es muy sencilla de usar, ya que viene con infinitas plantillas listas de varios tipos entre las que elegir, como encabezados, infografías, collages o logos.

Además, contiene una galería muy completa de iconos, fotografías, ilustraciones (muchas de las cuales gratuitas) que puedes incluir en tus diseños.

ejemplo encabezado para email canva

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 te facilitará la vida.

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?

copiar código color colorzilla

Web Gradient

Después del cambio de look de Instagram, todos nos hemos vuelto un poco fans de los colores degradados. WebGradients es precisamente una herramienta para crear estos efectos de color tan de moda. Este sitio ofrece una gran colección de degradados que puedes descargar gratuitamente en formato png y que puede utilizar, por ejemplo, como fondo para tus emails.

degradado de color

MJML

¿Te apetece añadir un elemento interactivo a tus emails? Gracias a MJML, el lenguaje de plantilla de código abierto de Mailjet, puedes dar rienda suelta a tu imaginación y añadir a tus newsletter elementos como carruseles de imágenes. Este es solo un ejemplo: visita nuestra página para descubrir todo lo que puedes hacer con MJML.

Cómo añadir una imagen en un email correctamente

Hay dos formas principales de añadir imágenes a tus correos electrónicos: 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.

1. Imagen incrustada

En este primer caso, las imágenes se encuentran en el propio email. Técnicamente, la imagen se adjunta en el email (un poco como cuando adjuntamos un archivo en un correo personal), pero nuestro destinatario la verá como parte integrante de la newsletter.

La ventaja de esta primera opción es que, de una forma u otra, estamos seguros de que el usuario recibirá la imagen, ya que viene adjunta en la newsletter, y podrá visualizarla en modo offline (por ejemplo, después de descargar el email).

Sin embargo, esto comporta también ciertas desventajas: los emails con imágenes muy grandes pueden ser señalados por los filtros de spam y, en algunos casos, como ya vimos al principio del post, hay clientes de email que las bloquean por defecto.

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.

cargar imagen en Mailjet

2. Imagen enlazada

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

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

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

enlazar imagen en Mailjet

Por cierto, con Mailjet tiene la opción de añadir a tus email tanto imágenes incrustadas como imágenes enlazadas.

Cómo etiquetar una imagen en un email correctamente

Para evitar que cualquier tipo de información importante pueda perderse si hay algún problema con la visualización de las imágenes, es indispensable hacer uso del Alt Text, o texto alternativo que acompaña a la imagen y que se muestra cuando éstas no aparecen.

Qué es el Alt Text o texto alternativo

El Alt Text es un breve texto que utilizamos 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 nuestro destinatario tiene deshabilitada su descarga.

Además, este texto sirve también a los lectores de pantalla para describir una imagen a usuarios con discapacidades visuales, así que ¡no lo omitas!

ejemplo etiquetas alt

Por qué deberías usar el Alt Text en tus emails

Este texto es especialmente importante por dos motivos. Para empezar, informa a los usuarios que no ven las imágenes de la información que se están perdiendo.

En segundo lugar, los emails que contienen imágenes con Alt Text, tienen una mejor reputación de cara a los clientes de email, ya que los spammers no se suelen tomar las molestias de componer este texto.

En sitios web, el Alt Text es también una forma fantástica de mejorar el posicionamiento SEO de una página, puesto que es un lugar idóneo en el que insertar palabras clave. Pero recuerda, para sacarle el máximo partido al Alt Text, lo ideal es tratar de aportar la máxima información posible, de la forma más breve posible.

Ahora te toca a ti

Las imágenes son una parte indispensable del diseño de correos electrónicos y bien utilizadas pueden ayudarte a captar la atención del resto de tus lectores.

Ahora que conoces todo lo que necesitas saber sobre cómo usar las imágenes en el email y los mejores sitios dónde encontrarlas, no te queda que ponerte manos a la obra y empezar a crear emails que dejen tus destinatarios boquiabiertos.

Pásate por 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.

Diseña emails increíbles con Mailjet
Crea fácilmente campañas increíbles con nuestro potente editor de emails y envía mensajes que lleguen a la bandeja de entrada.

Crea tu cuenta ahora

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 el 8 de agosto de 2018.