電子メールでのアニメーションPNG：GIFの代替？

公開: 2019-11-19

アニメーション画像は、2019年のメールデザインのトップトレンドの1つです。あらゆる場所のメールマーケティング担当者は、キャンペーンに動きを加えることを目指しています。そのための最も一般的な方法は、アニメーションGIFの機能を使用することです。

ただし、画像に動きを加えることができるファイルの種類は、アニメーションGIFだけではありません。アニメーション化されたポータブルネットワークグラフィックス（またはAPNG）も、探索したいオプションです。

電子メールでAPNGを使用する理由

アニメーション化されたPNGは、まさにその名前が示すとおりです。動きを導入するために組み合わされたPNGのコレクションです。したがって、APNGが特別な理由を理解するには、単純なPNGの特性を理解することが重要です。

PNG形式には、PNG-8とPNG-24の2種類があります。 PNG-8形式は、最大256色で保存されるという点でGIFに似ています。 PNG-24形式は、数百万色を表示できます。そのため、アニメーションに低品質の外観を与えることが多いGIFの限られた色と比較して、APNGでは色深度の全範囲を使用できます。これにより、特に幅広い色の写真を使用している場合に、画像がより鮮明になりますが、高品質には常にコストがかかります。ファイルサイズを注意深く監視しないと、PNGが非常に大きくなる可能性があります。それらの多くを使用してAPNGを作成している場合、ファイルサイズが大きいと、電子メールの読み込み時間に悪影響を与える可能性があります。

さらに、GIFとは対照的に、APNGを使用すると透明度を操作できます。 GIFは透過的に処理が不十分で、透明な背景に設定すると要素の周囲に粗い白いエッジが適用されます。

透明な背景の上でアニメーションを使用したいのはなぜですか？

電子メールの透明性とアニメーション：リトマスの10月のニュースレターのAPNG

今年のハロウィーンをテーマにした10月のニュースレターでは、読者に「ライトをオフにする」機会を提供し、メールを明るいデザインから暗くて不気味なデザインに変更したいと考えました。さらに、不気味さを増すために、暗闇の中で怖い目をまばたきさせたり、幽霊がホバリングしたり、グーがにじみ出たりするアニメーションを含めることにしました。ただし、ライトがオフになっている場合のみです。

メールの明るいバージョンでアニメーションを非表示にするために、明るいバージョンで配置された背景とまったく同じ色でアニメーションをデザインしました。サブスクライバーが「ライトをオフにした」と、それらの背景色が変化し、驚いたことに、不気味なアニメーションが表示されました。

このトリックを機能させるには、アニメーションを透明な背景に配置する必要がありました。そのため、GIFを使用することはできませんでした。私たちは、あなたが乱雑に見えたし、ランプが点灯したとき、私たちの隠されたグラフィックスを公開しているだろう私たちのイラスト、周りの人々白いエッジを参照してくださいね、GIFを使用していました。一方、アニメーションPNGは、透明性の課題を完全に処理します。

CSSアニメーションキーフレーミングを使用してPNGのスプライトシートをアニメーション化することにより、この問題に対処するための代替戦術を検討しました。しかし、このプロジェクトのコンテキストでは、各グラフィックに含まれるCSSの量によって、コードが多すぎる電子メールが作成されていました。さらに重要なことに、アニメーション化されたPNGの電子メールクライアントのサポートは、近年、CSSアニメーションのサポートを実際に上回っています。

APNGの電子メールクライアントサポート

多くの人気のある電子メールクライアントは、APNGを完全にサポートしています。最も厄介な例外は、Gmail（Webメールクライアントとモバイルアプリの両方）、Outlook.com、およびWindows上のOutlookです。これらの電子メールクライアントは、アニメーションの最初のフレームのみを表示します。

アニメーションPNGは、次の場所で完全にサポートされています。

アップルメール
iOS
サムスンメール
Outlook（MacOS）
Outlook.com
Outlook.comアプリ
AOL
AOLアプリ
Yahoo
Yahooアプリ

最初のフレームのみが表示されます：

Gmail
Gmailアプリ
Outlook（Windows）

メールキャンペーン用のアニメーションPNGを作成する方法

現在、AdobePhotoshopやAdobeAnimateなどのソフトウェアからアニメーションをAPNGとして保存することはできないため、アニメーションを作成するには追加のツールが必要になります。ニュースレター用にアニメーションPNGを作成した方法は次のとおりです。

1. Adobe CCでアニメーションを作成し、各フレームをPNGとして保存します

GIFまたはAPNGのどちらであっても、AdobeAnimateを使用してアニメーションを作成します。ただし、違いは、AdobeAnimateがAPNGファイルをエクスポートするためのネイティブオプションを提供していないことです。代わりに、各フレームを単一のPNGとしてエクスポートする必要があります。アニメーションを作成したら、[エクスポート]> [ムービーのエクスポート]に移動し、ドロップダウンメニューから[ PNGシーケンス]を選択します。

Photoshopでのプロセスは非常に似ています。 [ファイル]> [エクスポート]> [ビデオのレンダリング]に移動します。 [ビデオのレンダリング]ペインで、ドロップダウンから[ Photoshop Image Sequence ]を選択し、形式として[ PNG ]を選択します。 pngが透明であることを確認するには、もう1つの手順を実行する必要があります。[レンダリングオプション]ボックスで、[アルファチャネル]ドロップダウンから[ストレート–マットなし]を選択します。画像を保存する場所を選択したら、[レンダリング]ボタンを押します。

2.個々のPNGをAPNGに結合します

次に、個々の画像ファイルをAPNGにアセンブルします。

PNGアニメーターは、OSユーザーの場合、Apple AppStoreから低価格で購入できる優れたソフトウェアです。無料の代替手段は、同様の機能を提供するezgif.comのAnimatedPNGメーカーです。

オンラインツールを使用してファイルを完成させることにしました。ここでは、最終ファイルで不要なフレームを除外し、各フレームに必要な時間を設定することができました。

3.電子メールで使用するためのAPNGファイルサイズの最適化

GIFと同様に、APNGはすぐにかなり重くなる可能性があります。色と使用するフレーム数を減らすと、ファイルサイズを低く抑えることができます。標準のzlib圧縮は、私たちのファイルで機能する唯一のオプションのようでした。MakeAPNG！ ボタンをクリックすると、ダウンロードする前にアニメーションの例とそのファイルサイズを確認できます。これは、ダウンロードする前に、速度の変更やフレームの削除など、さらに変更を加える絶好の機会です。

電子メールで使用するために画像ファイルをアップロードする前に、それらをもう少し圧縮することができました。透明性とアニメーションを維持しながら、すべての私たちは、単に、メタデータを除去し、色を減らすことによって、ファイルサイズを減少させるTinyPNGを通じて私たちのAPNGsを走りました。それは大きな違いを生み、画像ファイルの合計サイズを943kbから243kbに減らし、ファイルサイズを74％以上節約しました！ただし、すべてのPNG圧縮ツールがアニメーションを保持するわけではないため、画像の処理後に作業内容を再確認してください。

以上です！これで、他の画像タイプで作業するのと同じように、APNGを電子メールに追加する準備が整いました。ニュースレター全体の動作を確認したい場合は、ここで表示するか、 LitmusBuilderのコードを確認してください。

電子メールでAPNGを使用することについてどう思いますか？

メールキャンペーンでアニメーションPNGを使用したことがありますか？それらを作成し、ファイルサイズを低く抑えるために信頼しているツールは何ですか？私たちはあなたの経験について聞いてみたいです。以下のコメントであなたの学んだことを共有してください。