Blog de Fidelizador.com

Tips y artículos para optimizar tu Email Marketing.

Cómo elegir el formato y tamaño de imagen para un email

Cómo elegir el formato y tamaño de imagen para un email

Antes de insertar una imagen en un email, hay algunos temas de tamaño y formato que debes tener en consideración. Repasamos las sugerencias respecto a los requisitos de medidas, peso y tipo de imágenes para los envíos masivos de correo electrónico.

Formatos de imágenes: ¿Cómo escoger entre JPG, GIF o PNG para los correos electrónicos?

Las plataformas de email marketing profesional permiten subir distintos formatos de imágenes al diseño de un mailing: JPG, PNG o GIF. Ninguno es mejor o peor que otro. Cada formato tiene sus propias características de uso.

JPG: formato universal y liviano, pero que disminuye su calidad al ser comprimido.

Por una parte, encontramos el formato JPEG o también JPG (Join Photographic Experts Group), que es el más común. Las cámaras y celulares trabajan las fotografías en este formato, pues es más liviano que otros. Si bien mantiene toda la información sobre los colores, comprime el tamaño del archivo eliminando cierta información.

Es preferible que utilices este formato, si las imágenes de tu mailing son sólo fotografías y no contienen texto ni gráficas. Es liviano y permite una amplia visualización de colores.

¿JPG o PNG?

¿JPG o PNG?

Fuente imagen: https://goo.gl/5eDzjv

PNG: Excelente para logos y gráficas, pero no es soportado por todos los browsers

Por otro lado, están las imágenes en PNG (Portable Network Graphics). Este formato es ideal para imágenes más elaboradas, por ejemplo, aquellas que tienen textos, ya que conserva los colores y calidad original. Esto, debido a que tiene una muy buena compresión, lo que se traduce en que no pierde calidad (como sí sucede con los jpeg).

Si bien este formato también sirve para las fotografías, es ideal para las gráficas por el uso de transparencias. Un punto en contra es que los archivos en formato PNG suelen ser más pesados que los JPEG.

Existe la idea de que los archivos PNG no son soportados por todos los gestores de correos. Es cierto, pero el Lotus Notes es un gestor poco usado en América Latina, (Fuente: Litmus).

GIF: Formato animado pero sólo en 256 colores

Por último, los GIF (Graphics Interchange Format). Este formato, además de permitir transparencias como los PNG, destaca porque puede ser animado. Debido a que el GIF sólo aguanta 256 colores, es recomendable su uso en gráficas pequeñas, como botones o animaciones de iconos.

¿JPG o GIF?

¿JPG o GIF?

Fuente imagen: https://goo.gl/As8xZY

Recomendaciones para elegir el formato de imagen entre JPEG, PNG o GIF

En conclusión, si necesitas insertar en tu mailing una fotografía sin texto, es recomendable el formato JPEG, que es mucho más liviano. Si lo que quieres es usar una imagen gráfica con texto o transparencia, como un logo, es preferible que sea en formato PNG, que conservará los colores y calidad original del archivo. Y si lo que quieres es una animación, el formato GIF es la alternativa correcta.

Otro dato importante es la gestión de color. Las imágenes que serán visualizadas en pantalla, deben ser RGB. Gracias a la combinación del rojo, verde y azul, este espacio logra reproducir en pantalla hasta 16,7 millones de colores.

Tamaño y resolución de imagen: Cuando el tamaño sí importa

Mejorar y optimizar el tamaño de las imágenes que serán utilizadas en las campañas de email marketing, es fundamental para que lleguen al destinatario. El tamaño, resolución y peso son factores a considerar para evitar ser clasificados como spam o inducir a muchas desuscripciones.

Medidas de imágenes para email

A veces las imágenes se cargan demasiado lento en las bandejas de entrada, debido a que son muy grandes. Ten cuidado con la resolución. No es necesario que utilices imágenes con 300 dpi (resolución óptima para impresión). Como se trata de una campaña de correo, que será visualizada en pantalla, la resolución de imagen de 72 dpi es suficiente.

Dpi para pantalla e impresión

Dpi para pantalla e impresión

Fuente imagen: https://goo.gl/fsMxM6

Por otra parte, para asegurar la nitidez de las imágenes, estas deben ser subidas a la plataforma de email marketing en el tamaño en que será usada realmente en el mailing. Si bien es posible manipular las dimensiones de la imagen en la mayoría de las plataformas, lo que hacen finalmente es comprimirla, restándole calidad.

Calidad de la imagen, optimiza el tamaño de la imagen

Recuerda pensar en un mail como un todo: Se recomienda que el peso de todas las imágenes no superen los 300 kb debido a los filtros antispam y también para asegurar una experiencia optimizada en mobile. Lee más acá nuestras 10 reglas del diseño HTML de email marketing.

Te recomendamos cambiar el tamaño de la imagen en tu programa de edición preferido (como Photoshop), antes de subirla al administrador de contenido de la plataforma de mailing.

En el caso de que necesites enviar una imagen de gran formato, lo que te recomendamos es dividirla en varias piezas pequeñas e insertarlas de tal manera que parezcan una sola imagen (como un puzzle). Esto ayudará a que tu campaña se cargue más rápido.

Finalmente, si de último momento necesitas cambiar una imagen de formato, existen diferentes herramientas gratuitas online como Zamzar para convertir un archivo adobe illustrator en JPG u otro formato.

Bloqueo de imágenes: Outlook y otros clientes de correo

El diseño es muy importante a la hora de hacer un envío de mailing, tal como los recalcamos en los 6 elementos de una plantilla de email. Sin embargo, ¿Se ven iguales las imágenes en todos los clientes de correo? La respuesta es no. Outlook, por ejemplo, bloquea las imágenes por defecto.

Whitelist: Solicita a tus contactos que te agreguen a su libreta de direcciones

Como algunos clientes de correo bloquean las imágenes, es necesario que el contacto de la indicación de “mostrar imágenes”. En caso contrario, en vez de visualizar la gráfica en la que tanto trabajaste, sólo verá un cuadrado con una “x”, en su lugar.

Ninguna plataforma de Email Marketing profesional puede saltarse o influir en esta característica de seguridad. Solicita a tus suscriptores que añadan tu dirección de correo electrónico a su libreta de direcciones o lista de remitentes seguros para aumentar la posibilidad de que su cliente de correo muestre tus imágenes.

Newsletter Canal 13

Newsletter Canal 13

Fuente imagen: Newsletter Canal 13, enviado por Fidelizador

También, tus destinatarios pueden desactivar la opción directamente desde Outlook, que no permite descargar las imágenes. Revisa cómo hacerlo, aquí.

Outlook

Outlook

Fuente imagen: https://goo.gl/nu4sKw

Aprovecha los atributos alt como elemento profesional

Para asegurar que el mensaje de tu correo se entienda, con o sin imágenes, es fundamental que estas tengan un atributo alt que las describa. De esta manera, si la imagen no es visualizada, el contacto sabrá de qué se trataba de todas formas.

Además, recuerda que le puedes dar estilo al atributo alt como un elemento de Growth Hacking, tal como lo explica Litmus en el “Ultimate guide to styled Alt text in Email”.

Por último, te recomendamos evitar el uso de imágenes de fondo en las campañas, pues no serán visualizadas por todos los gestores de correo, especialmente en Outlook. Descubre en este artículo qué clientes de correo electrónico admiten las imágenes de fondo y consulta Cómo crear código HTML de un Email: elementos de una plantilla responsive.

Proporción HTML: Imagen v/s texto

El usar sólo imágenes perjudicará tu envío al aumentar las posibilidades de que sea clasificado como spam por los clientes de correo. Incluso, podría ser jamás visto por los contactos que tienen la descarga automática bloqueada, tal como explicamos antes.

Regla del contenido: Relación texto-imagen de 60/40

Cada filtro de spam tiene criterios diferentes para clasificar el equilibrio entre imágenes y texto. La regla general del contenido es una relación 60/40 entre imágenes y texto para evitar parecer fraudulento. Además de un peso máximo de 75 kb para el código HTML. Para que no falte ningún elemento, revisa nuestro artículo donde explicamos los 6 elementos de diseño de plantillas de email, aquí.

En caso de querer mandar sólo una imagen

Como recomendación, si lo que necesitas enviar es únicamente una imagen, te sugerimos que agregues texto al área de pie de página (footer), como tu dirección contacto y una breve leyenda que explique por qué le estás mandando este email (origen de la base de datos). Además, no olvides jamás los enlaces de suscripción y reportar abuso.

Footer newsletter Fidelizador

Footer newsletter Fidelizador

Fuente imagen: Footer Newsletter de Fidelizador

En el siguiente artículo, nuestro jefe de operaciones entrega las claves para evitar caer en spam (leer artículo, aquí).

Bancos de imágenes: Un recurso indispensable

Las imágenes son el mejor aliado a la hora de comunicar una idea. Si bien, siempre el ideal es la producción propia de material, muchas veces es imposible debido a los altos costos que conlleva una producción fotográfica.

Sabemos que encontrar una imagen que funcione con tu diseño, puede ser una tarea que conlleve horas. La buena noticia es que en los bancos de imágenes no sólo encontrarás fotografías, sino también vectores que pueden ser editados e ilustraciones.

Banco de imagen Istockphoto

Banco de imagen Istockphoto

Recomendación para escoger una imagen entre fotografías o vector

Para cualquier marca, lo más importante es la identidad. Procura mantener la misma línea visual utilizando los recursos gráficos (ya sean iconos o fotografías) de un mismo autor.

El punto a favor del uso de fotografías, es que logran una imagen más corporativa. El punto en contra, es es su peso. Las imágenes vectorizadas, por su parte, tienen la ventaja de ser mucho más livianas que las fotografías.

Como consejo, es preferible usar imágenes compradas y no descargar las gratuitas, pues es muy fácil que luego la veas en otra publicidad.

Un punto a considerar son los permisos. Lee muy bien las licencias de cada banco de imágenes para entender las limitaciones que puedes tener a la hora de utilizar sus recursos en tu comunicación.

A continuación, compartimos nuestros bancos de imágenes favoritos:

  • www.istockphoto.com: Es el lugar perfecto si andas buscando imágenes, vectores, ilustraciones y videos que hagan destacar tu marca.
  • www.shutterstock.com: Sin duda el mejor banco de imágenes. Muchas agencias lo utilizan porque es muy fácil encontrar lo que se necesita.
  • http://deathtothestockphoto.com: Es una newsletter de imagenes libres de uso. Al suscribirse, todos los meses llega al correo un paquete temático de imágenes. Son más una comunidad que un simple banco. Muy hipster y estético, pero con un número reducido de imágenes a comparación de bancos generalistas.

Además, puedes encontrar los mejores 10 bancos de imágenes gratuitos, aquí y el listado definitivo de los mejores sitios de vectores y fotos gratis y de pago, según Vilma Núñez, aquí.

Por último: Ninguna teoría resiste a la realidad, prueba cada envío

Siempre lo mencionamos, pero no está demás repetirlo. Antes de hacer un envío real, procura haber realizado una prueba (o varias).

Asegúrate que tu campaña de correo se visualice correctamente, enviándola a varios clientes de correo como Gmail, Outlook y Yahoo. Las plataformas de email marketing profesional, permiten hacer pruebas con sólo un par de clics, como es el caso de Fidelizador.

No pierdas la oportunidad de comunicar lo que quieres y cómo lo quieres. Corrobora la visualización de tus correos, haciendo una simple prueba.

 

Suscríbete a nuestro newsletter

Y recibe todos los tips de nuestros expertos para tus campañas de Email Marketing.

Pruébalo gratis durante 15 días utilizando todas sus funcionalidades

[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']