PNG animati nelle e-mail: un'alternativa alle GIF?

Le immagini animate sono una delle principali tendenze del design delle email per il 2019 . Gli e-mail marketer di tutto il mondo stanno cercando di aggiungere movimento alle loro campagne e il modo più popolare per farlo è utilizzare la potenza delle GIF animate.

Ma le GIF animate non sono l'unico tipo di file che ti consente di aggiungere movimento alle immagini. Animated Portable Network Graphics, o APNG, sono un'opzione che potresti voler esplorare.

Motivi per utilizzare APNG nelle e-mail

Un PNG animato è esattamente ciò che suggerisce il nome: una raccolta di PNG che vengono combinati per introdurre movimento. Quindi, per capire cosa rende speciale un APNG, è fondamentale comprendere le caratteristiche di un semplice PNG.

Esistono due tipi di formati PNG: PNG-8 e PNG-24. Il formato PNG-8 è simile alle GIF in quanto vengono salvate con un massimo di 256 colori. Il formato PNG-24 è in grado di visualizzare milioni di colori. Quindi, rispetto ai colori limitati di una GIF che spesso conferiscono alle animazioni un aspetto di bassa qualità, gli APNG ti consentono di utilizzare l'intera gamma di profondità di colore . Ciò conferisce alle tue immagini un aspetto più nitido, specialmente quando utilizzi la fotografia con un'ampia gamma di colori, ma una qualità superiore ha sempre un costo. Se non osservi attentamente le dimensioni dei file, i PNG possono diventare piuttosto grandi. Se ne stai utilizzando molti per creare un APNG, le dimensioni dei file di grandi dimensioni possono influire negativamente sui tempi di caricamento delle email.

Inoltre, a differenza delle GIF, gli APNG ti consentono di lavorare con la trasparenza . Le GIF vengono gestite in modo poco trasparente, applicando un bordo bianco ruvido attorno agli elementi se impostate su uno sfondo trasparente:

Perché vorresti usare un'animazione su uno sfondo trasparente, chiedi?

Trasparenza e animazioni in Email: APNGs nella newsletter di ottobre di Litmus

Per la nostra newsletter di ottobre a tema Halloween di quest'anno, volevamo dare ai nostri lettori l'opportunità di "spegnere le luci", cambiando l'e-mail da un design luminoso a uno scuro e spettrale. Inoltre, per una maggiore inquietudine, abbiamo deciso di includere alcune animazioni per far lampeggiare gli occhi spaventosi al buio, i fantasmi si librano e trasudano, ma solo quando le luci sono spente.

Per nascondere le animazioni nella versione brillante dell'e-mail, le abbiamo progettate nello stesso colore dello sfondo su cui erano posizionate nella versione brillante. Quando un abbonato "spegneva le luci", quei colori di sfondo cambiavano e, sorpresa, rendevano visibili le nostre animazioni spettrali!

Perché questo trucco funzionasse, le animazioni dovevano vivere su uno sfondo trasparente, ed è proprio per questo che l'uso delle GIF non era un'opzione per noi. Se avessimo usato una GIF, avresti visto quei bordi bianchi attorno alle nostre illustrazioni, che sarebbero apparsi disordinati e avrebbero esposto la nostra grafica nascosta quando le luci erano accese. I PNG animati, d'altra parte, gestiscono perfettamente la sfida della trasparenza.

Abbiamo preso in considerazione una tattica alternativa per risolvere questo problema animando uno sprite-sheet di PNG utilizzando il keyframing di animazione CSS . Ma nel contesto di questo progetto, la quantità di CSS coinvolti per ogni elemento grafico avrebbe comportato un'e-mail con un codice troppo pesante. E ancora più significativamente, il supporto del client di posta elettronica per i PNG animati ha effettivamente superato il supporto per l'animazione CSS negli ultimi anni.

Supporto client di posta elettronica per APNG

Molti client di posta elettronica popolari offrono pieno supporto per gli APNG. Le eccezioni più fastidiose sono Gmail (sia il client webmail che le app mobili), Outlook.com e Outlook su Windows. Questi client di posta mostrano solo il primo fotogramma dell'animazione.

I PNG animati sono completamente supportati in:

• Posta Apple
• iOS
• Posta Samsung
• Outlook (Mac OS)
• Outlook.com
• Applicazione Outlook.com
• AOL
• Applicazione AOL
• Yahoo
• Applicazione Yahoo

Solo il primo frame mostra in:

• Gmail
• Applicazione Gmail
• Outlook (Windows)

Come creare PNG animati per le tue campagne e-mail

Al momento non è possibile salvare le animazioni come APNG da software come Adobe Photoshop o Adobe Animate, quindi avrai bisogno di strumenti aggiuntivi per creare le tue animazioni. Ecco come abbiamo creato i PNG animati per la nostra newsletter:

1. Crea la tua animazione in Adobe CC e salva ogni fotogramma come PNG

Usiamo Adobe Animate per creare le nostre animazioni, non importa se si tratta di una GIF o di un APNG. La differenza, tuttavia, è che Adobe Animate non offre un'opzione nativa per esportare un file APNG. Invece, dovrai esportare ogni fotogramma come un singolo PNG. Dopo aver creato la tua animazione, vai su Esporta > Esporta filmato e seleziona "Sequenza PNG" dal menu a discesa.

Il processo in Photoshop è molto simile. Vai su File > Esporta > Rendering video . Nel pannello Render Video , seleziona "Sequenza immagini Photoshop" dal menu a discesa e scegli PNG come formato. Devi fare un altro passo per assicurarti che i tuoi png siano trasparenti: nella casella Opzioni di rendering seleziona "Straight - Unmatted" dal menu a discesa "Alpha Channel" . Dopo aver selezionato dove si desidera salvare le immagini, premere il pulsante Render .

2. Combina i tuoi PNG individuali in un APNG

Ora è il momento di assemblare i tuoi file immagine individuali in un APNG!

PNG animator è un ottimo software che puoi acquistare a un piccolo prezzo dall'App Store di Apple se sei un utente del sistema operativo. Un'alternativa gratuita è il creatore di PNG animati di ezgif.com che offre funzionalità simili.

Abbiamo scelto di utilizzare lo strumento online per completare i nostri file. Qui siamo stati in grado di escludere tutti i frame che non erano necessari nel file finale e di impostare la quantità di tempo richiesta da ciascun frame.

3. Ottimizzazione delle dimensioni del file APNG per l'utilizzo nelle e-mail

Come le GIF, le APNG possono diventare rapidamente piuttosto pesanti. La riduzione dei colori e del numero di fotogrammi utilizzati aiuterà a mantenere basse le dimensioni dei file. La compressione zlib standard sembrava essere l'unica opzione che funzionava per i nostri file, e una volta che abbiamo premuto Make APNG! pulsante, potremmo vedere un esempio della nostra animazione e la sua dimensione del file prima del download. Questa è un'ottima occasione per apportare ulteriori modifiche, come alterare la velocità o rimuovere qualche frame in più, prima del download.

Prima di caricare i nostri file immagine da utilizzare nella nostra e-mail, siamo stati in grado di comprimerli un po' di più. Abbiamo semplicemente eseguito i nostri APNG tramite TinyPNG , che riduce le dimensioni dei file rimuovendo i metadati e riducendo i colori, il tutto preservando la trasparenza e l'animazione. Ha fatto un'enorme differenza, riducendo la dimensione totale del nostro file immagine da 943kb a 243kb, risparmiando oltre il 74% nella dimensione del file! Tuttavia, non tutti gli strumenti di compressione PNG conserveranno l'animazione, quindi assicurati di ricontrollare il tuo lavoro dopo l'elaborazione delle immagini.

E questo è tutto! Ora sei pronto per aggiungere un APNG alla tua email, proprio come faresti con qualsiasi altro tipo di immagine. Se desideri vedere la nostra newsletter completa in azione, puoi visualizzarla qui o controllare il codice in Litmus Builder .

Qual è la tua opinione sull'utilizzo degli APNG nelle e-mail?

Hai mai usato PNG animati nelle tue campagne email? Quali sono gli strumenti su cui ti affidi per crearli e mantenere basse le dimensioni dei file? Ci piacerebbe conoscere la tua esperienza. Condividi le tue conoscenze nei commenti qui sotto.