Acerca de las prácticas recomendadas para imágenes de correo electrónico

Conoce las mejores prácticas al usar imágenes en Klaviyo Email, incluidas las recomendaciones de tamaño y cómo agregar imágenes.

Mejores prácticas para usar imágenes en correos electrónicos

Considera lo siguiente al crear imágenes para usar en correos electrónicos:

• Klaviyo es compatible con archivos de imagen JPEG, PNG y GIF. También puedes subir un archivo WebP y elegir que Klaviyo lo convierta automáticamente en un archivo PNG. En general, los archivos PNG se mostrarán mejor en todos los dispositivos, en especial las imágenes que contienen texto. 
• El tamaño máximo de archivo de imagen compatible con Klaviyo es de 10 MB. Sin embargo, recomendamos usar imágenes de 1 MB o menos, ya que las imágenes más grandes pueden cargarse lentamente, lo que provoca una mala experiencia para el destinatario. La herramienta integrada de compresión de imágenes de Klaviyo puede ayudar a reducir el tamaño de archivo de las imágenes cargadas sin afectar significativamente la calidad.
• Elige las dimensiones de la imagen en pixeles según el tamaño en el que quieras mostrarla en el correo electrónico. Intenta mantener las imágenes entre 600 y 1000 px de ancho y con menos de 2000px de alto para imágenes de ancho completo, para equilibrar la calidad de imagen y la velocidad de carga. Las imágenes que tengan un ancho menor al ancho completo del correo electrónico pueden ser más pequeñas que 600px.
• Reducir demasiado las dimensiones en píxeles de una imagen puede hacer que se vea borrosa o de baja calidad. Al elegir imágenes para usar en tus mensajes, considera el equilibrio entre la calidad de la imagen y el tiempo de carga: es posible que las imágenes grandes no se muestren de inmediato cuando alguien abra tu correo electrónico, especialmente si tiene una conexión a internet lenta.
• Siempre agrega texto alternativo a tus imágenes. Algunas bandejas de entrada, incluidas Outlook y Apple Mail, pueden bloquear imágenes según la configuración del destinatario. Incluir texto alternativo ayuda a los destinatarios que usan estas bandejas de entrada a entender lo que una imagen busca comunicar y también mejora la accesibilidad.

Insertar un bloque de imagen

Para agregar una imagen a una plantilla:

1. Arrastra un bloque de imagen al lienzo de vista previa.

2. Una vez que coloques el bloque de imagen, se te pedirá que agregues la imagen de estas maneras:

• Soltar una o más imágenes en el bloque para cargarlas
• Explorar la computadora para buscar y subir una o más imágenes
• Importación desde una URL
• Elegir una imagen de la biblioteca de imágenes
• Elegir una imagen de tu catálogo de productos (si estás integrado con una plataforma de ecommerce o has sincronizado un catálogo personalizado)
• Insertar una URL o variable de imagen dinámica a partir de datos de perfil en una campaña o flujo, o a partir del evento que activa el flujo activado por una métrica

Si vas a cargar una imagen, el tamaño máximo de imagen que puedes cargar es de 10 MB.

Compresión automática de archivos de imagen

Klaviyo incluye una herramienta de compresión automática de imágenes como parte del proceso de carga de imágenes para ayudarte a equilibrar la claridad de la imagen con tiempos de carga rápidos. Ten en cuenta que esta función no es compatible con los GIF.

Con Comparar seleccionado en Configuración de carga, al cargar una imagen se abre Seleccionar versión de carga, donde puedes comparar el archivo original con una versión comprimida. Cada vista previa muestra el tamaño del archivo, junto con la diferencia porcentual entre ambos. Selecciona Original o Comprimido encima de cada vista previa para elegir qué versión cargar. Klaviyo agrega una insignia de Recomendado a la opción sugerida. Sin embargo, puedes cambiar esto si notas una pérdida de claridad en la versión comprimida, lo cual puede suceder con archivos originales más pequeños.

El primer panel de comparación de imágenes está abierto de forma predeterminada. En el caso de las imágenes adicionales, el panel está cerrado de forma predeterminada cuando se recomienda el original. Si subiste varias imágenes al mismo tiempo, revisa y elige la opción que prefieras para cada imagen de forma individual.

Haz clic en Subir para 1 imagen o en Subir todo para varias imágenes para terminar de subir tus selecciones.

Configuración de la carga

Si quieres omitir el paso de revisión al subir imágenes, ajusta la Configuración de carga. Cuando subas una imagen, verás el botón Configuración de carga.

Esta opción se guardará para cargas futuras. Puedes seleccionar:

• Comparar (predeterminado): revisa y elige entre las versiones original y comprimida.
• Usar originales: Siempre carga tus archivos originales; sin paso de revisión.
• Usar comprimidas: Siempre sube la versión comprimida automáticamente de Klaviyo; no hay un paso de revisión.

Selecciona tu preferencia y luego haz clic en Atrás para volver a la ventana de carga.

Recortar una imagen

Las imágenes en bloques de imagen, bloques de divisiones y bloques de tabla se pueden recortar fácilmente. Las imágenes dinámicas no se pueden recortar en el editor.

1. Haz clic en el bloque de imagen.
2. Haz clic en Recortar debajo del ícono de imagen a la izquierda.
   
   Puedes elegir recortar una imagen en un círculo, un cuadrado o un rectángulo con un ancho y una altura personalizados. Cuando recortas una imagen dentro del editor, se conserva la imagen completa, lo que significa que puedes ajustar o quitar el recorte en cualquier momento.

3. Cuando termines de recortar, haz clic en la flecha hacia atrás para aplicar los cambios.
   

Cambiar el tamaño de una imagen

Para cambiar el tamaño de una imagen, usa los controles deslizantes de tamaño en el lienzo.

Imágenes en plantillas HTML cargadas

Para las plantillas HTML que hacen referencia a archivos de imagen locales, carga un archivo ZIP que contenga esas imágenes durante el proceso de importación. Haz que los nombres de archivo y las rutas de carpeta en el ZIP coincidan con las referencias en el HTML. Las imágenes a las que se hace referencia con una URL pública no necesitan incluirse en el ZIP.

Para las plantillas de Mailchimp importadas, Klaviyo copia automáticamente las imágenes alojadas en gallery.mailchimp.com. Las imágenes alojadas en otras URL permanecen vinculadas a su ubicación original, así que mantén esas imágenes disponibles públicamente o súbelas a Klaviyo y actualiza las URL en la plantilla.

En el editor de HTML, coloca el cursor donde debe ir la URL de la imagen en una etiqueta <img> (dentro de las comillas src) y luego haz clic en Insertar imagen para subir o elegir una imagen. Seleccionar una imagen inserta su URL en el cursor; no inserta una etiqueta de imagen completa.

Calidad de la imagen

Si te preocupa que las imágenes no se estén mostrando con la nitidez o claridad que quisieras en las plantillas, puedes tomar medidas para mejorar la calidad de la imagen.

Uno de los estándares predominantes para mejorar la nitidez de una imagen renderizada en un correo electrónico es insertar una imagen al doble del tamaño deseado y luego reducir el tamaño de la imagen en la plantilla. Hay dos formas de abordar esto:

1. Inserta una versión grande y nítida de la imagen en la plantilla y luego selecciona su bloque de imagen. En Diseño de imagen, establece Ancho en la mitad del ancho en píxeles de la imagen cargada (p. ej., 300 px para una imagen de 600 px de ancho).
2. Inserta una imagen nativamente más grande (es decir, de 600 px de ancho) y muéstrala en un tamaño más pequeño (es decir, 300 px de ancho) con CSS; para usar este enfoque, tendrás que insertar la imagen en un bloque de HTML dedicado y ajustar el CSS directamente

Tipos de imagen

Klaviyo admite los siguientes tipos de imágenes: JPEG, PNG y GIF.

Puedes subir archivos WebP y usar el convertidor integrado de Klaviyo para convertirlos en archivos PNG. Sin embargo, la conversión no es compatible con archivos WebP animados.

Si tienes otros formatos de archivo como PSD o SVG, tendrás que convertirlos a un tipo de imagen compatible antes de subirlos.

Obtén más información sobre qué tipos de imagen son los mejores para tu correo electrónico.

La biblioteca de imágenes

Las imágenes que subes a Klaviyo se almacenan en Contenido > Multimedia y marca > Imágenes. Eliminar una imagen de la biblioteca de imágenes no eliminará la imagen de ninguna de las plantillas donde se use actualmente.

Recursos adicionales