Imágenes en boletines de correo electrónico: guía práctica

Da a cada imagen una función clara

Una foto de producto puede presentar un artículo nuevo. Una foto de un evento ayuda a imaginar el lugar o la actividad. Un diagrama puede explicar un cambio con más claridad que un párrafo. Elige la imagen según lo que ayude al lector a entender en este correo concreto.

Pregúntate qué se perdería si la quitaras. Si solo decora, una imagen más pequeña o ninguna imagen puede dejar más espacio al mensaje. Si muestra un detalle importante del producto, elige una vista en la que ese detalle se distinga también en un móvil.

Esta guía trata las imágenes que aparecen en el contenido de un boletín. Para fotos enviadas como archivos adjuntos descargables, consulta nuestra guía para comprimir imágenes para correo electrónico.

Escribe lo esencial también fuera de la imagen

Escribe el título, los datos importantes y el enlace principal como texto en el editor del boletín, por ejemplo en Moosend. En una oferta, incluye el descuento, las condiciones y la fecha de fin; en un evento, la fecha, el lugar y el enlace de reserva. Una imagen promocional puede apoyar esa información, pero no debería ser el único lugar donde aparezca.

Elige el texto alternativo según la función de la imagen:

• Una foto que aporta información útil: describe el detalle que necesita el lector, como la forma visible del producto o una característica.
• Una imagen puramente decorativa: deja vacío el texto alternativo si no añade información y no es un enlace. La guía del W3C sobre imágenes decorativas explica por qué las descripciones innecesarias pueden distraer a quienes usan lectores de pantalla.
• Una imagen que es el único contenido de un enlace: indica el destino o la acción, por ejemplo «Ver la taza azul», en lugar de describir solo su aspecto. Consulta la guía del W3C sobre imágenes funcionales.

El texto alternativo no sustituye al texto principal del correo: algunas aplicaciones no lo muestran en todas las situaciones. Mailchimp explica estas limitaciones. Encontrarás más ejemplos en nuestra guía de textos alternativos.

Adapta la imagen a la plantilla del correo

Empieza por las dimensiones recomendadas para el bloque de imagen de tu plantilla. Una foto que ocupa todo el ancho de la columna y una pequeña ficha de producto necesitan archivos distintos. Recorta una copia para ajustarla al espacio sin estirar el motivo, con la herramienta de recorte si hace falta.

Distingue el ancho que se muestra en el correo de las dimensiones en píxeles del archivo. Si la foto se muestra a 600 píxeles de ancho, puedes comparar archivos de 600 y 1200 píxeles, mostrando ambos a 600. El archivo más ancho aporta más píxeles para una pantalla de alta resolución; no debería ensanchar el correo. También necesita un original suficientemente grande y puede suponer una descarga mayor. Son medidas de ejemplo: sigue las indicaciones de tu plantilla y compara los mensajes recibidos. Las recomendaciones de Mailchimp varían según la plantilla y el bloque de contenido.

Comprueba tanto si el servicio del boletín acepta el archivo como si el correo recibido lo muestra en las aplicaciones que pruebas. Subirlo correctamente no demuestra que los destinatarios vayan a verlo bien. JPEG es un punto de partida práctico para fotografías; PNG resulta útil para transparencias y gráficos. Mailchimp recomienda JPG, PNG o GIF en su guía de imágenes para plantillas. Consulta tu propio servicio antes de reutilizar un archivo exportado para una web.

Si usas un GIF animado, procura que el primer fotograma se entienda por sí solo. Algunos destinatarios pueden ver únicamente ese fotograma; la guía de animaciones de Microsoft explica cómo los ajustes de animación pueden causar esto en Outlook. No coloques un paso necesario o una oferta solo en los fotogramas posteriores.

Valora el tamaño total de los archivos de imagen, además de sus detalles. Varias imágenes grandes pueden ralentizar la carga del correo. Nuestra guía para reducir el tamaño de archivos explica cómo preparar copias más pequeñas.

Ejemplo: anunciar un producto nuevo

Imagina una tienda de artículos para el hogar que anuncia una nueva taza azul de cerámica. Las siguientes versiones usan la misma foto del producto:

En la segunda versión, recorta la foto para que la taza y el asa sigan visibles en un móvil. Si la foto es un enlace independiente al producto, añade un texto alternativo adecuado y comprueba su destino además del enlace de texto.

Prueba el correo tal como lo ve el destinatario

La vista previa del editor ayuda a organizar el contenido, pero las aplicaciones de correo pueden mostrar el mismo mensaje de formas distintas. Envía una prueba desde tu servicio de boletines y abre el correo recibido en un ordenador y un móvil. Incluye, si es posible, las aplicaciones que utiliza tu público, como Gmail, Outlook o Apple Mail. La guía de Mailchimp sobre vistas previas y pruebas explica por qué hacen falta ambas.

• Comprueba el motivo principal y el recorte. ¿Se ven las caras, los productos y los detalles importantes sin deformaciones ni un diseño más ancho?
• Examina la imagen al tamaño mostrado. ¿Se entiende la foto sin ampliar? Incluye también en el texto del correo las etiquetas necesarias o las explicaciones de diagramas.
• Prueba el modo claro y el oscuro cuando estén disponibles. Un logotipo oscuro con fondo transparente puede resultar difícil de ver sobre un fondo oscuro. Prueba una versión con un contorno que contraste o un fondo uniforme adecuado dentro de la imagen y comprueba ambos modos. La guía de Mailchimp sobre el modo oscuro trata el contraste de los logotipos y las diferencias entre aplicaciones.
• Mira el mensaje con las imágenes bloqueadas si la aplicación lo permite. Lee el contenido restante, comprueba los textos alternativos y asegúrate de que el enlace principal esté disponible.
• Abre los enlaces. Comprueba las imágenes enlazadas y los botones por separado: pueden tener destinos distintos.

Si falta una imagen, averigua la causa

Haz estas comprobaciones en orden. Outlook clásico puede bloquear las imágenes externas, como explica la guía de descarga de Microsoft. Gmail puede ocultar las imágenes de mensajes que considera sospechosos; consulta los ajustes de imágenes de Gmail.

1. Comprueba la carga de imágenes en la prueba recibida. Si la aplicación ofrece mostrar o descargar imágenes, permítelo para tu propio mensaje de prueba. Si aparecen, era la aplicación la que las bloqueaba. Comprimir la imagen no permite saltarse ese ajuste.
2. Localiza la imagen problemática en el editor. Abre su bloque y comprueba que esté seleccionado el archivo correcto de la biblioteca. Si falta, vuelve a subir una copia guardada y selecciona el nuevo archivo. Si la imagen está alojada fuera del servicio, revisa la dirección que usa el bloque.
3. Comprueba el acceso a un archivo externo. Abre la dirección directa de la imagen en una ventana privada del navegador sin iniciar sesión. Una pantalla de acceso o una página para compartir no es el archivo de imagen. Usa la biblioteca del servicio o una dirección pública adecuada en su lugar. Que esta prueba funcione solo confirma el acceso desde el navegador sin iniciar sesión, no la visualización en todas las aplicaciones de correo.
4. Investiga las diferencias entre aplicaciones. Si el archivo es accesible pero falla en una aplicación, comprueba primero los ajustes de carga de imágenes de esa aplicación. Después compara el formato con las indicaciones de tu servicio. Prueba una copia JPEG para una foto o PNG cuando necesites transparencia, insertada mediante un bloque de imagen normal. Si una plantilla personalizada sigue fallando, pide a su responsable que revise el código HTML de la imagen.
5. Envía una nueva prueba después de corregirlo. Ábrela en la aplicación donde fallaba. Comprueba la imagen, su texto alternativo actual y tanto el enlace de la imagen como el enlace de texto separado, si los hay.

La guía de solución de problemas de Mailchimp explica los problemas de direcciones de imagen, acceso restringido y visualización. Sigue las instrucciones de tu servicio para seleccionar o sustituir archivos de la biblioteca.

Última comprobación antes de enviar

• El recorte, los detalles y el tamaño del archivo se ajustan a la plantilla.
• El mensaje principal y el enlace funcionan sin imágenes.
• El texto alternativo corresponde a la función de cada imagen.
• El primer fotograma de cualquier GIF funciona por sí solo y los logotipos se ven en los modos claro y oscuro.
• La prueba final recibida se ha revisado en las aplicaciones pertinentes, incluidos los archivos de origen y los destinos de los enlaces.