PNG-uri animate în e-mail: o alternativă la GIF-uri?

Imaginile animate sunt una dintre cele mai importante tendințe de design de e-mail pentru 2019 . Agenții de marketing prin e-mail de pretutindeni caută să adauge mișcare campaniilor lor – iar cel mai popular mod de a face acest lucru este folosind puterea GIF-urilor animate.

Dar GIF-urile animate nu sunt singurul tip de fișier care vă permite să adăugați mișcare imaginilor. Grafica de rețea portabilă animată – sau APNG – este o opțiune pe care ați putea dori să o explorați.

Motive pentru a utiliza APNG-urile în e-mail

Un PNG animat este exact ceea ce sugerează numele: o colecție de PNG-uri care sunt combinate pentru a introduce mișcare. Deci, pentru a înțelege ce face un APNG special, este esențial să înțelegeți caracteristicile unui simplu PNG.

Există două tipuri de formate PNG: PNG-8 și PNG-24. Formatul PNG-8 este similar cu GIF-urile prin faptul că sunt salvate cu maximum 256 de culori. Formatul PNG-24 poate afișa milioane de culori. Prin urmare, în comparație cu culorile limitate ale unui GIF, care oferă adesea animațiilor un aspect de calitate scăzută, APNG-urile vă permit să utilizați întreaga gamă de adâncimi de culoare . Acest lucru oferă imaginilor tale un aspect mai clar, mai ales atunci când folosești fotografii cu o gamă largă de culori, dar o calitate mai bună are întotdeauna un cost. Dacă nu urmăriți cu atenție dimensiunile fișierelor, PNG-urile pot deveni destul de mari. Dacă folosiți multe dintre ele pentru a crea un APNG, dimensiunile mari ale fișierelor pot avea un impact negativ asupra timpilor de încărcare a e-mailului.

În plus, spre deosebire de GIF-urile, APNG-urile vă permit să lucrați cu transparență . GIF-urile se descurcă prost în mod transparent, aplicând o margine albă aspră în jurul elementelor atunci când sunt stabilite pe un fundal transparent:

De ce ai vrea să folosești o animație pe un fundal transparent, te întrebi?

Transparență și animații în e-mail: APNG-uri în buletinul informativ Litmus din octombrie

Pentru buletinul nostru informativ pe tema Halloween-ului din octombrie din acest an, am vrut să le oferim cititorilor noștri oportunitatea de a „stinge luminile”, schimbând e-mailul dintr-un design luminos în unul întunecat și înfricoșător. În plus, pentru un plus de înfricoșare, am decis să includem niște animații pentru a face ochii înfricoșători să clipească în întuneric, fantomele să plutească și să se scurgă - dar numai când luminile sunt stinse.

Pentru a ascunde animațiile în versiunea luminoasă a e-mailului, le-am proiectat în aceeași culoare ca fundalul pe care au fost plasate în versiunea luminoasă. Când un abonat „a stins luminile”, acele culori de fundal s-au schimbat și, surpriză, au făcut vizibile animațiile noastre înfricoșătoare!

Pentru ca acest truc să funcționeze, animațiile trebuiau să trăiască pe un fundal transparent - și tocmai de aceea folosirea GIF-urilor nu era o opțiune pentru noi. Dacă am fi folosit un GIF, ați vedea acele margini albe din jurul ilustrațiilor noastre, care ar fi părut dezordonate și ar fi expus grafica noastră ascunsă când luminile erau aprinse. Pe de altă parte, PNG-urile animate abordează perfect provocarea transparenței.

Am luat în considerare o tactică alternativă pentru a rezolva această problemă prin animarea unei foi de sprite de PNG-uri folosind cadre cheie de animație CSS . Dar, în contextul acestui proiect, cantitatea de CSS implicată pentru fiecare grafic ar fi dus la un e-mail care a fost prea greu de cod. Și și mai semnificativ, suportul clientului de e-mail pentru PNG-urile animate a depășit suportul pentru animația CSS în ultimii ani.

Asistență client de e-mail pentru APNG-uri

Mulți clienți de e-mail populari oferă suport complet pentru APNG-uri. Cele mai supărătoare excepții sunt Gmail (atât clientul webmail, cât și aplicațiile mobile), Outlook.com și Outlook pe Windows. Acești clienți de e-mail arată doar primul cadru al animației.

PNG-urile animate sunt complet acceptate în:

• Apple Mail
• iOS
• Samsung Mail
• Outlook (MacOS)
• Outlook.com
• aplicația Outlook.com
• AOL
• aplicația AOL
• Yahoo
• aplicația Yahoo

Doar primul cadru apare în:

• Gmail
• aplicația Gmail
• Outlook (Windows)

Cum să creați PNG-uri animate pentru campaniile dvs. de e-mail

În prezent, nu este posibil să salvați animații ca APNG din software precum Adobe Photoshop sau Adobe Animate, așa că veți avea nevoie de instrumente suplimentare pentru a vă crea animațiile. Iată cum am creat PNG-urile animate pentru buletinul nostru informativ:

1. Creați-vă animația în Adobe CC și salvați fiecare cadru ca PNG

Folosim Adobe Animate pentru a ne crea animațiile, indiferent dacă este un GIF sau un APNG. Totuși, diferența este că Adobe Animate nu oferă o opțiune nativă pentru a exporta un fișier APNG. În schimb, va trebui să exportați fiecare cadru ca un singur PNG. După ce ați creat animația, accesați Export > Export Movie și selectați „PNG Sequence” din meniul drop-down.

Procesul din Photoshop este foarte asemănător. Accesați Fișier > Export > Redați videoclipul . În panoul Render Video , selectați „Photoshop Image Sequence” din meniul drop-down și alege PNG ca format. Trebuie să faceți încă un pas pentru a vă asigura că PNG-urile sunt transparente: în caseta Opțiuni de randare , selectați „Drept – Unmatted” din meniul derulant „Alpha Channel” . După ce ați selectat unde doriți să salvați imaginile, apăsați butonul Render .

2. Combinați PNG-urile individuale într-un APNG

Acum este timpul să asamblați fișierele dvs. de imagine individuale într-un APNG!

Animatorul PNG este un program grozav pe care îl puteți achiziționa la un preț mic din Apple App Store dacă sunteți un utilizator de sistem de operare. O alternativă gratuită este Animated PNG maker de la ezgif.com, care oferă funcționalități similare.

Am ales să folosim instrumentul online pentru a ne completa fișierele. Aici am putut exclude orice cadre care nu au fost necesare în fișierul final și am setat timpul necesar pentru fiecare cadru.

3. Optimizarea dimensiunii fișierului APNG pentru utilizare în e-mailuri

La fel ca GIF-urile, APNG-urile pot deveni rapid destul de grele. Reducerea culorilor și a numărului de cadre utilizate va ajuta la menținerea dimensiunii fișierelor la un nivel scăzut. Compresia standard zlib părea a fi singura opțiune care a funcționat pentru fișierele noastre și, odată ce am apăsat butonul Make APNG! butonul, am putea vedea un exemplu de animație și dimensiunea fișierului său înainte de descărcare. Aceasta este o șansă grozavă de a face modificări ulterioare, cum ar fi modificarea vitezei sau eliminarea altor câteva cadre, înainte de descărcare.

Înainte de a încărca fișierele noastre imagine pentru a fi utilizate în e-mailul nostru, am putut să le comprimăm puțin mai mult. Pur și simplu ne-am rulat APNG-urile prin TinyPNG , care reduce dimensiunile fișierelor prin eliminarea metadatelor și reducerea culorilor, toate păstrând transparența și animația. A făcut o diferență enormă, reducând dimensiunea totală a fișierului de imagine de la 943 kb la 243 kb, economisind peste 74% din dimensiunea fișierului! Totuși, nu orice instrument de compresie PNG va păstra animația, așa că asigurați-vă că vă verificați din nou munca după ce imaginile sunt procesate.

Si asta e! Acum sunteți gata să adăugați un APNG la e-mailul dvs., la fel cum ați lucra cu orice alt tip de imagine. Dacă doriți să vedeți buletinul nostru informativ complet în acțiune, îl puteți vizualiza aici sau puteți verifica codul în Litmus Builder .

Ce părere aveți despre utilizarea APNG-urilor în e-mail?

Ați folosit vreodată PNG-uri animate în campaniile dvs. de e-mail? Care sunt instrumentele pe care vă bazați pentru a le crea și pentru a menține dimensiunea scăzută a fișierului? Ne-ar plăcea să aflăm despre experiența dvs. Împărtășește-ți învățăturile în comentariile de mai jos.