ملفات PNG المتحركة في البريد الإلكتروني: هل هي بديل لملفات GIF؟

الصور المتحركة هي واحدة من أهم اتجاهات تصميم البريد الإلكتروني لعام 2019 . يبحث مسوقو البريد الإلكتروني في كل مكان عن إضافة حركة إلى حملاتهم - والطريقة الأكثر شيوعًا للقيام بذلك هي استخدام قوة صور GIF المتحركة.

لكن صور GIF المتحركة ليست هي نوع الملف الوحيد الذي يسمح لك بإضافة حركة إلى الصور. رسومات الشبكة المحمولة المتحركة - أو APNGs - هي خيار قد ترغب في استكشافه أيضًا.

أسباب استخدام APNGs في البريد الإلكتروني

إن PNG المتحركة هي بالضبط ما يوحي به الاسم: مجموعة من PNGs مدمجة لتقديم الحركة. لذا لفهم ما الذي يجعل APNG مميزًا ، من الضروري فهم خصائص PNG البسيطة.

هناك نوعان من تنسيقات PNG: PNG-8 و PNG -24. يتشابه تنسيق PNG-8 مع ملفات GIF من حيث أنه يتم حفظها بحد أقصى 256 لونًا. يمكن لصيغة PNG-24 عرض ملايين الألوان. مقارنةً بالألوان المحدودة لصورة GIF التي غالبًا ما تمنح الرسوم المتحركة مظهرًا منخفض الجودة ، تتيح لك APNGs استخدام النطاق الكامل لأعماق الألوان . يمنح ذلك صورك مظهرًا أكثر وضوحًا - لا سيما عند استخدام التصوير بمجموعة كبيرة من الألوان - ولكن الجودة العالية دائمًا ما يكون لها تكلفة. إذا لم تشاهد أحجام ملفاتك بعناية ، فقد تصبح ملفات PNG كبيرة جدًا. إذا كنت تستخدم العديد منها لإنشاء APNG ، فإن أحجام الملفات الكبيرة يمكن أن تؤثر سلبًا على أوقات تحميل بريدك الإلكتروني.

بالإضافة إلى ذلك ، على عكس ملفات GIF ، تتيح لك APNGs العمل بشفافية . تتعامل ملفات GIF بشكل ضعيف مع الشفافية ، مع تطبيق حافة بيضاء خشنة حول العناصر عند تعيينها على خلفية شفافة:

لماذا تريد استخدام الرسوم المتحركة على خلفية شفافة؟

الشفافية والرسوم المتحركة في البريد الإلكتروني: APNGs في رسالة Litmus الإخبارية لشهر أكتوبر

في رسالتنا الإخبارية لشهر أكتوبر التي تحمل عنوان عيد الهالوين هذا العام ، أردنا أن نمنح قراءنا الفرصة "لإطفاء الأنوار" ، وتغيير البريد الإلكتروني من تصميم لامع إلى تصميم مظلم ومخيف. بالإضافة إلى ذلك ، لمزيد من الرعب ، قررنا تضمين بعض الرسوم المتحركة لتجعل العيون المخيفة تومض في الظلام ، وتحوم الأشباح وتتأرجح ، ولكن فقط عند إطفاء الأنوار.

لإخفاء الرسوم المتحركة في النسخة الساطعة من البريد الإلكتروني ، قمنا بتصميمها بنفس لون الخلفية التي تم وضعها عليها في النسخة الساطعة. عندما قام أحد المشتركين "بإطفاء الأنوار" ، تغيرت ألوان الخلفية هذه و- مفاجأة- جعلت الرسوم المتحركة المخيفة الخاصة بنا مرئية!

لكي تنجح هذه الحيلة ، يجب أن تعيش الرسوم المتحركة على خلفية شفافة - وهذا بالضبط هو السبب في أن استخدام صور GIF لم يكن خيارًا بالنسبة لنا. كان علينا استخدام GIF، وكنت أرى تلك حواف بيضاء حول الرسوم التوضيحية لدينا، والتي قد تبدو الفوضى وتتعرض لدينا الرسومات مخبأة عندما كانت الأضواء على. من ناحية أخرى ، تتعامل ملفات PNG المتحركة مع تحدي الشفافية بشكل مثالي.

لقد نظرنا في تكتيك بديل لمعالجة هذه المشكلة عن طريق تحريك ورقة رموز متحركة لملفات PNG باستخدام الإطارات الرئيسية للرسوم المتحركة CSS . ولكن في سياق هذا المشروع ، كان من الممكن أن ينتج عن مقدار CSS المتضمن لكل رسم رسالة بريد إلكتروني ثقيلة جدًا في التعليمات البرمجية. والأهم من ذلك ، أن دعم عميل البريد الإلكتروني لملفات PNG المتحركة قد تجاوز بالفعل دعم الرسوم المتحركة CSS في السنوات الأخيرة.

دعم عملاء البريد الإلكتروني لـ APNGs

يقدم العديد من عملاء البريد الإلكتروني المشهورين دعمًا كاملاً لـ APNGs. الاستثناءات الأكثر إزعاجًا هي Gmail (كل من عميل بريد الويب وتطبيقات الأجهزة المحمولة) و Outlook.com و Outlook على Windows. لا يعرض عملاء البريد الإلكتروني هؤلاء سوى الإطار الأول من الرسوم المتحركة.

ملفات PNG المتحركة مدعومة بالكامل في:

• بريد أبل
• iOS
• بريد سامسونج
• Outlook (MacOS)
• Outlook.com
• تطبيق Outlook.com
• AOL
• تطبيق AOL
• ياهو
• تطبيق ياهو

يظهر الإطار الأول فقط في:

• بريد جوجل
• تطبيق Gmail
• Outlook (نظام التشغيل Windows)

كيفية إنشاء ملفات PNG متحركة لحملات البريد الإلكتروني الخاصة بك

ليس من الممكن حاليًا حفظ الرسوم المتحركة كـ APNGs من برامج مثل Adobe Photoshop أو Adobe Animate ، لذلك ستحتاج إلى أدوات إضافية لإنشاء الرسوم المتحركة الخاصة بك. إليك كيفية إنشاء ملفات PNG المتحركة لنشرتنا الإخبارية:

1. أنشئ الرسوم المتحركة في Adobe CC واحفظ كل إطار بتنسيق PNG

نستخدم Adobe Animate لإنشاء الرسوم المتحركة الخاصة بنا - بغض النظر عما إذا كانت صورة GIF أو APNG. ومع ذلك ، فإن الاختلاف هو أن Adobe Animate لا يقدم خيارًا أصليًا لتصدير ملف APNG. بدلاً من ذلك ، سيتعين عليك تصدير كل إطار بتنسيق PNG واحد. بعد إنشاء الرسوم المتحركة ، انتقل إلى تصدير> تصدير فيلم وحدد "تسلسل PNG" من القائمة المنسدلة.

العملية في Photoshop متشابهة جدًا. انتقل إلى ملف> تصدير> عرض الفيديو . في جزء Render Video ، حدد "Photoshop Image Sequence" من القائمة المنسدلة واختر PNG كتنسيق. تحتاج إلى اتخاذ خطوة أخرى للتأكد من أن ملفات png شفافة: في مربع خيارات العرض ، حدد "Straight - Unmatted" من القائمة المنسدلة "Alpha Channel" . بمجرد تحديد المكان الذي تريد حفظ صورك فيه ، اضغط على زر Render .

2. ادمج ملفات PNG الفردية في APNG

حان الوقت الآن لتجميع ملفات الصور الفردية الخاصة بك في APNG!

إن PNG animator عبارة عن برنامج رائع يمكنك شراؤه بسعر زهيد من Apple App Store إذا كنت من مستخدمي نظام التشغيل OS. البديل المجاني هو صانع PNG الرسوم المتحركة من ezgif.com والذي يقدم وظائف مماثلة.

اخترنا استخدام الأداة عبر الإنترنت لإكمال ملفاتنا. هنا تمكنا من استبعاد أي إطارات لم تكن مطلوبة في الملف النهائي وتعيين مقدار الوقت المطلوب لكل إطار.

3. تحسين حجم ملف APNG لاستخدامه في رسائل البريد الإلكتروني

مثل ملفات GIF ، يمكن أن تصبح APNGs ذات ثقل كبير بسرعة. سيساعد تقليل الألوان وعدد الإطارات المستخدمة في الحفاظ على أحجام الملفات منخفضة. يبدو أن ضغط zlib القياسي هو الخيار الوحيد الذي يعمل مع ملفاتنا ، وبمجرد أن نضغط على Make APNG! زر ، يمكننا أن نرى مثالاً للرسوم المتحركة الخاصة بنا وحجم ملفها قبل التنزيل. هذه فرصة رائعة لإجراء المزيد من التغييرات - مثل تعديل السرعة أو إزالة بضعة إطارات أخرى - قبل التنزيل.

قبل تحميل ملفات الصور الخاصة بنا لاستخدامها في بريدنا الإلكتروني ، تمكنا من ضغطها أكثر قليلاً. لقد قمنا ببساطة بتشغيل APNGs الخاصة بنا من خلال TinyPNG ، مما يقلل من أحجام الملفات عن طريق تجريد البيانات الوصفية وتقليل الألوان ، كل ذلك مع الحفاظ على الشفافية والرسوم المتحركة. لقد أحدثت فرقًا كبيرًا ، حيث تم تقليل الحجم الإجمالي لملف الصور لدينا من 943 كيلو بايت إلى 243 كيلو بايت ، مما وفر أكثر من 74٪ في حجم الملف! لن تحتفظ كل أداة ضغط PNG بالرسوم المتحركة ، لذا تأكد من إعادة التحقق من عملك بعد معالجة صورك.

وهذا كل شيء! أنت الآن جاهز لإضافة APNG إلى بريدك الإلكتروني ، تمامًا كما لو كنت تعمل مع أي نوع آخر من الصور. إذا كنت ترغب في رؤية رسالتنا الإخبارية الكاملة قيد التنفيذ ، فيمكنك عرضها هنا أو التحقق من الكود في Litmus Builder .

ما رأيك في استخدام APNGs في البريد الإلكتروني؟

هل سبق لك استخدام ملفات PNG المتحركة في حملات البريد الإلكتروني الخاصة بك؟ ما هي الأدوات التي تعتمد عليها في إنشائها - والحفاظ على حجم الملف منخفضًا؟ نود أن نسمع عن تجربتك. شارك ما تعلمته في التعليقات أدناه.