PNG animados en el correo electrónico: ¿una alternativa a los GIF?

Las imágenes animadas son una de las principales tendencias de diseño de correo electrónico para 2019 . Los especialistas en marketing por correo electrónico de todo el mundo buscan agregar movimiento a sus campañas, y la forma más popular de hacerlo es utilizando el poder de los GIF animados.

Pero los GIF animados no son el único tipo de archivo que le permite agregar movimiento a las imágenes. Los gráficos de red portátiles animados, o APNG, son una opción que quizás también desee explorar.

Razones para usar APNG en el correo electrónico

Un PNG animado es exactamente lo que sugiere el nombre: una colección de PNG que se combinan para introducir movimiento. Entonces, para comprender qué hace que un APNG sea especial, es clave comprender las características de un PNG simple.

Hay dos tipos de formatos PNG: PNG-8 y PNG-24. El formato PNG-8 es similar a los GIF en que se guardan con 256 colores como máximo. El formato PNG-24 puede mostrar millones de colores. Entonces, en comparación con los colores limitados de un GIF que a menudo dan a las animaciones un aspecto de baja calidad, los APNG le permiten usar la gama completa de profundidades de color . Eso le da a sus imágenes un aspecto más nítido, especialmente cuando utiliza fotografías con una amplia gama de colores, pero una mayor calidad siempre tiene un costo. Si no observa cuidadosamente el tamaño de sus archivos, los PNG pueden volverse bastante grandes. Si está utilizando muchos de ellos para crear un APNG, los tamaños de archivo grandes pueden afectar negativamente los tiempos de carga de su correo electrónico.

Además, a diferencia de los GIF, los APNG le permiten trabajar con transparencia . Los GIF se manejan de manera transparente de manera deficiente, aplicando un borde blanco rugoso alrededor de los elementos cuando se colocan en un fondo transparente:

¿Por qué querrías usar una animación sobre un fondo transparente, preguntas?

Transparencia y animaciones en el correo electrónico: APNG en el boletín de octubre de Litmus

Para nuestro boletín informativo de octubre con temática de Halloween de este año, queríamos darles a nuestros lectores la oportunidad de "apagar las luces", cambiando el correo electrónico de un diseño brillante a uno oscuro y espeluznante. Además, para darle más miedo, decidimos incluir algo de animación para hacer que los ojos atemorizantes parpadeen en la oscuridad, los fantasmas se ciernen y la sustancia pegajosa rezuma, pero solo cuando las luces están apagadas.

Para ocultar las animaciones en la versión brillante del correo electrónico, las diseñamos en el mismo color que el fondo en el que se colocaron en la versión brillante. Cuando un suscriptor "apagó las luces", esos colores de fondo cambiaron y, sorpresa, ¡hicieron visibles nuestras espeluznantes animaciones!

Para que este truco funcionara, las animaciones tenían que vivir en un fondo transparente, y esa es exactamente la razón por la que usar GIF no era una opción para nosotros. Si hubiéramos usado un GIF, verías esos bordes blancos alrededor de nuestras ilustraciones, que se habrían visto desordenados y expuesto nuestros gráficos ocultos cuando las luces estaban encendidas. Los PNG animados, por otro lado, manejan perfectamente el desafío de la transparencia.

Consideramos una táctica alternativa para abordar este problema animando una hoja de sprites de PNG utilizando fotogramas clave de animación CSS . Pero en el contexto de este proyecto, la cantidad de CSS involucrada para cada gráfico habría dado como resultado un correo electrónico con demasiado código. Y lo que es aún más significativo, el soporte del cliente de correo electrónico para PNG animados ha superado al soporte para la animación CSS en los últimos años.

Soporte de cliente de correo electrónico para APNG

Muchos clientes de correo electrónico populares ofrecen soporte completo para APNG. Las excepciones más problemáticas son Gmail (tanto el cliente de correo web como las aplicaciones móviles), Outlook.com y Outlook en Windows. Estos clientes de correo electrónico solo muestran el primer fotograma de la animación.

Los PNG animados son totalmente compatibles con:

• Correo de Apple
• iOS
• Correo Samsung
• Outlook (MacOS)
• Outlook.com
• Aplicación Outlook.com
• AOL
• Aplicación AOL
• Yahoo
• Aplicación de Yahoo

Solo el primer cuadro se muestra en:

• Gmail
• Aplicación de Gmail
• Outlook (Windows)

Cómo crear PNG animados para sus campañas de correo electrónico

Actualmente, no es posible guardar animaciones como APNG desde software como Adobe Photoshop o Adobe Animate, por lo que necesitará herramientas adicionales para crear sus animaciones. Así es como creamos los PNG animados para nuestro boletín:

1. Cree su animación en Adobe CC y guarde cada fotograma como PNG

Usamos Adobe Animate para crear nuestras animaciones, sin importar si es un GIF o un APNG. Sin embargo, la diferencia es que Adobe Animate no ofrece una opción nativa para exportar un archivo APNG. En su lugar, tendrá que exportar cada fotograma como un solo PNG. Después de crear su animación, vaya a Exportar> Exportar película y seleccione "Secuencia PNG" en el menú desplegable.

El proceso en Photoshop es muy similar. Vaya a Archivo> Exportar> Renderizar video . En el panel Renderizar video , seleccione "Secuencia de imágenes de Photoshop" en el menú desplegable y elija PNG como formato. Debe dar un paso más para asegurarse de que sus pngs sean transparentes: en el cuadro de Opciones de renderizado , seleccione "Recto - Sin mate" en el menú desplegable "Canal alfa" . Una vez que haya seleccionado dónde le gustaría guardar sus imágenes, presione el botón Renderizar .

2. Combine sus PNG individuales en un APNG

¡Ahora es el momento de ensamblar sus archivos de imagen individuales en un APNG!

El animador PNG es una gran pieza de software que puede comprar por un pequeño precio en la App Store de Apple si es usuario de un sistema operativo. Una alternativa gratuita es el creador de PNG animados de ezgif.com, que ofrece una funcionalidad similar.

Elegimos utilizar la herramienta en línea para completar nuestros archivos. Aquí pudimos excluir los fotogramas que no eran necesarios en el archivo final y establecer la cantidad de tiempo que cada fotograma requería.

3. Optimización del tamaño del archivo APNG para su uso en correos electrónicos

Al igual que los GIF, los APNG pueden volverse bastante pesados ​​rápidamente. Reducir los colores y la cantidad de marcos utilizados ayudará a mantener bajos los tamaños de archivo. La compresión estándar de zlib parecía ser la única opción que funcionaba para nuestros archivos, y una vez que presionamos el botón Make APNG! , podríamos ver un ejemplo de nuestra animación y su tamaño de archivo antes de descargarla. Esta es una gran oportunidad para realizar más cambios, como alterar la velocidad o eliminar algunos fotogramas más, antes de descargar.

Antes de cargar nuestros archivos de imagen para usarlos en nuestro correo electrónico, pudimos comprimirlos un poco más. Simplemente ejecutamos nuestros APNG a través de TinyPNG , que disminuye el tamaño de los archivos al eliminar los metadatos y reducir los colores, todo mientras conserva la transparencia y la animación. Hizo una gran diferencia, reduciendo el tamaño total de nuestro archivo de imagen de 943 kb a 243 kb, ¡ahorrando más del 74% en el tamaño del archivo! Sin embargo, no todas las herramientas de compresión PNG conservarán la animación, así que asegúrese de verificar su trabajo después de procesar sus imágenes.

¡Y eso es! Ahora está listo para agregar un APNG a su correo electrónico, tal como lo haría con cualquier otro tipo de imagen. Si desea ver nuestro boletín completo en acción, puede verlo aquí o consultar el código en Litmus Builder .

¿Cuál es su opinión sobre el uso de APNG en el correo electrónico?

¿Alguna vez ha utilizado PNG animados en sus campañas de correo electrónico? ¿Cuáles son las herramientas en las que confía para crearlos y mantener un tamaño de archivo bajo? Nos encantaría conocer tu experiencia. Comparta sus aprendizajes en los comentarios a continuación.