E-postada Hareketli PNG'ler: GIF'lere Bir Alternatif mi?

Animasyonlu görüntüler, 2019'un en iyi e-posta tasarım trendlerinden biridir . Her yerde e-posta pazarlamacıları kampanyalarına hareket katmak istiyor ve bunu yapmanın en popüler yolu, hareketli GIF'lerin gücünü kullanmaktır.

Ancak animasyonlu GIF'ler, görüntülere hareket eklemenize izin veren tek dosya türü değildir . Hareketli Taşınabilir Ağ Grafikleri veya APNG'ler de keşfetmek isteyebileceğiniz bir seçenektir.

APNG'leri e-postada kullanma nedenleri

Hareketli bir PNG, tam olarak adından da anlaşılacağı gibi: hareketi tanıtmak için birleştirilen PNG'lerin bir koleksiyonu. Bir APNG'yi özel yapan şeyin ne olduğunu anlamak için basit bir PNG'nin özelliklerini anlamak çok önemlidir.

İki tür PNG formatı vardır: PNG-8 ve PNG-24. PNG-8 formatı, maksimum 256 renkle kaydedilmeleri bakımından GIF'lere benzer. PNG-24 formatı milyonlarca rengi görüntüleyebilir. Bu nedenle, genellikle animasyonlara düşük kaliteli bir görünüm veren bir GIF'in sınırlı renkleriyle karşılaştırıldığında, APNG'ler tüm renk derinliklerini kullanmanıza izin verir . Bu, özellikle fotoğrafçılığı geniş bir renk yelpazesiyle kullandığınızda, resimlerinize daha net bir görünüm verir, ancak daha yüksek kalitenin her zaman bir bedeli vardır. Dosya boyutlarınızı dikkatli bir şekilde izlemezseniz PNG'ler oldukça büyüyebilir. APNG oluşturmak için bunların birçoğunu kullanıyorsanız, büyük dosya boyutları e-posta yükleme sürelerinizi olumsuz etkileyebilir.

Ayrıca, GIF'lerin aksine APNG'ler şeffaflıkla çalışmanıza olanak tanır . GIF'ler, saydam bir arka plan üzerine ayarlandığında öğelerin etrafına kaba beyaz bir kenar uygulayarak saydam olarak kötü işlenir:

Neden şeffaf bir arka plan üzerinde bir animasyon kullanmak isteyesiniz ki?

E-postada şeffaflık ve animasyonlar: Litmus'un Ekim bülteninde APNG'ler

Bu yılki Cadılar Bayramı temalı Ekim bültenimiz için, okuyucularımıza e-postayı parlak bir tasarımdan karanlık ve ürkütücü bir tasarımla değiştirerek "ışıkları kapatma" fırsatı vermek istedik. Ayrıca, daha fazla ürkütücülük için, karanlıkta korkutucu gözlerin yanıp sönmesini, hayaletlerin havada uçuşmasını ve tüylerin sızmasını sağlamak için bazı animasyonlar eklemeye karar verdik - ancak bu yalnızca ışıklar kapatıldığında.

Animasyonları e-postanın parlak sürümünde gizlemek için, onları parlak sürümde yerleştirildikleri arka planla aynı renkte tasarladık. Bir abone "ışıkları kapattığında" bu arka plan renkleri değişti ve şaşırtıcı bir şekilde ürkütücü animasyonlarımızı görünür hale getirdi!

Bu numaranın işe yaraması için animasyonların şeffaf bir arka planda yaşaması gerekiyordu ve bu yüzden GIF'leri kullanmak bizim için bir seçenek değildi. Bir GIF kullansaydık, resimlerimizin etrafında dağınık görünen ve ışıklar açıkken gizli grafiklerimizi ortaya çıkaran beyaz kenarları görürdünüz . Animasyonlu PNG'ler ise şeffaflık sorununu mükemmel bir şekilde halleder.

CSS animasyon anahtar karesi kullanarak PNG'lerin hareketli grafiğini canlandırarak bu sorunu çözmek için alternatif bir taktik düşündük . Ancak bu proje bağlamında, her bir grafik için dahil edilen CSS miktarı, çok ağır kodlu bir e-postayla sonuçlanacaktı. Ve daha da önemlisi, animasyonlu PNG'ler için e-posta istemcisi desteği , son yıllarda CSS animasyonu desteğini gerçekten geride bıraktı .

APNG'ler için e-posta istemci desteği

Birçok popüler e-posta istemcisi, APNG'ler için tam destek sunar. En zahmetli istisnalar Gmail (hem web posta istemcisi hem de mobil uygulamalar), Outlook.com ve Windows'ta Outlook'tur. Bu e-posta istemcileri, animasyonun yalnızca ilk karesini gösterir.

Animasyonlu PNG'ler şu durumlarda tam olarak desteklenir:

• elma postası
• iOS
• Samsung Posta
• Outlook (MacOS)
• Outlook.com
• Outlook.com uygulaması
• AOL
• AOL uygulaması
• yahoo
• Yahoo uygulaması

Yalnızca ilk kare şurada gösterilir:

• Gmail
• Gmail uygulaması
• Görünüm (Windows)

E-posta kampanyalarınız için animasyonlu PNG'ler nasıl oluşturulur?

Animasyonları Adobe Photoshop veya Adobe Animate gibi yazılımlardan APNG'ler olarak kaydetmek şu anda mümkün değildir, bu nedenle animasyonlarınızı oluşturmak için ek araçlara ihtiyacınız olacaktır. Bültenimiz için animasyonlu PNG'leri şu şekilde oluşturduk:

1. Animasyonunuzu Adobe CC'de oluşturun ve her kareyi PNG olarak kaydedin

İster GIF ister APNG olsun, animasyonlarımızı oluşturmak için Adobe Animate'i kullanıyoruz. Aradaki fark, Adobe Animate'in bir APNG dosyasını dışa aktarmak için yerel bir seçenek sunmamasıdır. Bunun yerine, her kareyi tek bir PNG olarak dışa aktarmanız gerekir. Animasyonunuzu oluşturduktan sonra Dışa Aktar > Filmi Dışa Aktar'a gidin ve açılır menüden “PNG Sırası”nı seçin.

Photoshop'taki süreç çok benzer. Dosya > Dışa Aktar > Video Oluştur seçeneğine gidin . Videoyu Oluştur bölmesinde, açılır menüden “Photoshop Görüntü Sırası”nı seçin ve format olarak PNG'yi seçin. PNG'lerinizin şeffaf olduğundan emin olmak için bir adım daha atmanız gerekiyor: Oluşturma Seçenekleri kutusunda "Alfa Kanalı" açılır menüsünden "Düz - Örtüsüz"ü seçin. Resimlerinizi kaydetmek istediğiniz yeri seçtikten sonra Render düğmesine basın.

2. Bireysel PNG'lerinizi bir APNG'de birleştirin

Şimdi bireysel görüntü dosyalarınızı bir APNG'de birleştirmenin zamanı geldi!

PNG animatör , işletim sistemi kullanıcısıysanız Apple App Store'dan küçük bir fiyata satın alabileceğiniz harika bir yazılımdır. Ücretsiz bir alternatif, benzer işlevsellik sunan ezgif.com'un Animasyonlu PNG oluşturucusudur .

Dosyalarımızı tamamlamak için çevrimiçi aracı kullanmayı seçtik. Burada, son dosyada gerekli olmayan kareleri hariç tutabildik ve her karenin gerekli olduğu süreyi ayarladık.

3. E-postalarda kullanım için APNG dosya boyutunu optimize etme

GIF'ler gibi, APNG'ler de hızla oldukça ağır olabilir. Renkleri ve kullanılan çerçeve sayısını azaltmak dosya boyutlarını düşük tutmaya yardımcı olacaktır. Standart zlib sıkıştırması, dosyalarımız için çalışan tek seçenek gibi görünüyordu ve bir kez APNG Yap! düğmesini tıkladığınızda, indirmeden önce animasyonumuzun bir örneğini ve dosya boyutunu görebiliriz. Bu, indirmeden önce hızı değiştirmek veya birkaç kareyi daha kaldırmak gibi daha fazla değişiklik yapmak için harika bir şans.

Resim dosyalarımızı e-postamızda kullanmak üzere yüklemeden önce, onları biraz daha sıkıştırabildik. APNG'lerimizi , saydamlığı ve animasyonu korurken meta verileri çıkararak ve renkleri azaltarak dosya boyutlarını küçülten TinyPNG aracılığıyla yürüttük . Toplam görüntü dosya boyutumuzu 943 kb'den 243 kb'ye indirerek büyük bir fark yarattı ve dosya boyutunda %74'ün üzerinde tasarruf sağladı! Her PNG sıkıştırma aracı animasyonu korumayacaktır, bu nedenle resimleriniz işlendikten sonra çalışmanızı iki kez kontrol ettiğinizden emin olun.

Ve bu kadar! Artık e-postanıza bir APNG eklemeye hazırsınız, tıpkı diğer herhangi bir resim türüyle çalışacağınız gibi. Bültenimizin tamamını çalışırken görmek isterseniz, onu burada görüntüleyebilir veya Litmus Builder'daki kodu kontrol edebilirsiniz .

APNG'leri e-postada kullanmaya ne dersiniz?

E-posta kampanyalarınızda hiç animasyonlu PNG'ler kullandınız mı? Bunları oluşturmak ve dosya boyutunu düşük tutmak için güvendiğiniz araçlar nelerdir? Deneyiminizi duymayı çok isteriz. Öğrendiklerinizi aşağıdaki yorumlarda paylaşın.