PNG แบบเคลื่อนไหวในอีเมล: ทางเลือกแทน GIF หรือไม่

ภาพเคลื่อนไหวเป็นหนึ่งในแนวโน้มการออกแบบอีเมลชั้นนำสำหรับ 2019 นักการตลาดอีเมลทุกหนทุกแห่งต้องการเพิ่มการเคลื่อนไหวให้กับแคมเปญ—และวิธีที่ได้รับความนิยมมากที่สุดคือการใช้พลังของ GIF แบบเคลื่อนไหว

แต่ GIF แบบเคลื่อนไหวไม่ได้เป็นเพียง ไฟล์ประเภท เดียว ที่ให้คุณเพิ่มการเคลื่อนไหวให้กับภาพได้ กราฟิกเครือข่ายแบบพกพาแบบเคลื่อนไหวหรือ APNG เป็นตัวเลือกที่คุณอาจต้องการสำรวจเช่นกัน

เหตุผลในการใช้ APNG ในอีเมล

PNG แบบเคลื่อนไหวได้ตรงตามชื่อของมัน นั่นคือคอลเล็กชัน PNG ที่รวมกันเพื่อแนะนำการเคลื่อนไหว ดังนั้น เพื่อให้เข้าใจถึงสิ่งที่ทำให้ APNG เป็นพิเศษ สิ่งสำคัญคือการเข้าใจลักษณะของ PNG อย่างง่าย

รูปแบบ PNG มีสองประเภท: PNG-8 และ PNG-24 รูปแบบ PNG-8 นั้นคล้ายกับ GIF ที่บันทึกด้วยสีสูงสุด 256 สี รูปแบบ PNG-24 สามารถแสดง สีได้ หลายล้าน สี เมื่อเทียบกับสีที่ จำกัด ของ GIF ที่มักจะให้ภาพเคลื่อนไหวที่มีรูปลักษณ์ที่มีคุณภาพต่ำดังนั้น APNGs ให้คุณใช้เต็มรูปแบบของความลึกสี ซึ่งช่วยให้ภาพของคุณดูคมชัดยิ่งขึ้น โดยเฉพาะอย่างยิ่งเมื่อคุณใช้การถ่ายภาพที่มีสีหลากหลาย แต่คุณภาพที่สูงขึ้นมักมีต้นทุนเสมอ ถ้าคุณไม่ดูขนาดไฟล์อย่างระมัดระวัง PNG อาจมีขนาดใหญ่มาก หากคุณกำลังใช้หลายไฟล์เพื่อสร้าง APNG ขนาดไฟล์ขนาดใหญ่อาจส่งผลเสียต่อเวลาในการโหลดอีเมลของคุณ

พลัสในทางตรงกันข้ามกับ GIFs, APNGs ช่วยให้คุณสามารถทำงานด้วยความโปร่งใส GIF จัดการได้ไม่ดีอย่างโปร่งใส โดยใช้ขอบสีขาวหยาบรอบๆ องค์ประกอบเมื่อตั้งค่าบนพื้นหลังโปร่งใส:

ทำไมคุณถึงต้องการใช้แอนิเมชั่นบนพื้นหลังโปร่งใส คุณถาม?

ความโปร่งใสและภาพเคลื่อนไหวในอีเมล: APNG ในจดหมายข่าวเดือนตุลาคมของ Litmus

สำหรับจดหมายข่าวฉบับเดือนตุลาคมในธีมฮัลโลวีนในปีนี้ เราต้องการให้ผู้อ่านมีโอกาส "ปิดไฟ" โดยเปลี่ยนอีเมลจากการออกแบบที่สว่างสดใสเป็นสีเข้มและน่ากลัว นอกจากนี้ เพื่อความน่ากลัวยิ่งขึ้น เราตัดสินใจที่จะใส่แอนิเมชั่นเพื่อทำให้ดวงตาที่น่ากลัวกะพริบในความมืด ผีจะลอยอยู่และของเหลวที่ไหลออกมา—แต่ก็ต่อเมื่อปิดไฟเท่านั้น

ในการซ่อนแอนิเมชั่นในอีเมลเวอร์ชันสว่าง เราได้ออกแบบพวกมันด้วยสีเดียวกับพื้นหลังที่พวกเขาวางไว้ในเวอร์ชันสว่าง เมื่อสมาชิก "ปิดไฟ" สีพื้นหลังเหล่านั้นก็เปลี่ยนไป และทำให้แอนิเมชั่นน่ากลัวของเรามองเห็นได้—น่าประหลาดใจ!

เพื่อให้เคล็ดลับนี้ใช้งานได้ แอนิเมชั่นต้องอยู่บนพื้นหลังโปร่งใส—และนั่นเป็นเหตุผลว่าทำไมการใช้ GIF จึงไม่เป็นตัวเลือกสำหรับเรา หากเราใช้ GIF คุณจะเห็นขอบสีขาวรอบๆ ภาพประกอบ ซึ่งจะทำให้ดูยุ่งเหยิง และ เผยให้เห็นกราฟิกที่ซ่อนอยู่ของเราเมื่อเปิดไฟ ในทางกลับกัน PNG แบบเคลื่อนไหวสามารถจัดการกับความท้าทายของความโปร่งใสได้อย่างสมบูรณ์แบบ

เราถือว่าเป็นกลยุทธ์ทางเลือกในการแก้ไขปัญหานี้โดยการเคลื่อนไหวเทพดาแผ่นของ PNGs ใช้ CSS ภาพเคลื่อนไหว keyframing แต่ในบริบทของโปรเจ็กต์นี้ จำนวน CSS ที่เกี่ยวข้องกับกราฟิกแต่ละรายการจะส่งผลให้อีเมลมีโค้ดจำนวนมากเกินไป และที่สำคัญยิ่งกว่านั้น การสนับสนุนไคลเอ็นต์อีเมลสำหรับ PNG แบบเคลื่อนไหวได้แซงหน้า การสนับสนุนภาพเคลื่อนไหว CSS ในช่วงไม่กี่ปีที่ผ่านมา

การสนับสนุนไคลเอนต์อีเมลสำหรับ APNGs

โปรแกรมรับส่งเมลยอดนิยมจำนวนมากให้การสนับสนุน APNG อย่างเต็มรูปแบบ ข้อยกเว้นที่ยุ่งยากที่สุดคือ Gmail (ทั้งเว็บเมลไคลเอ็นต์และแอปบนอุปกรณ์เคลื่อนที่), Outlook.com และ Outlook บน Windows โปรแกรมรับส่งเมลเหล่านี้แสดงเฉพาะเฟรมแรกของภาพเคลื่อนไหว

PNG แบบเคลื่อนไหวได้รับการสนับสนุนอย่างสมบูรณ์ใน:

• แอปเปิ้ลเมล
• iOS
• ซัมซุงเมล
• เอาท์ลุ๊ค (MacOS)
• Outlook.com
• แอป Outlook.com
• AOL
• แอพ AOL
• Yahoo
• แอพ Yahoo

เฉพาะเฟรมแรกที่แสดงใน:

• Gmail
• แอป Gmail
• Outlook (วินโดวส์)

วิธีสร้าง PNG แบบเคลื่อนไหวสำหรับแคมเปญอีเมลของคุณ

ปัจจุบัน ยังไม่สามารถบันทึกแอนิเมชั่นออกเป็น APNG จากซอฟต์แวร์ เช่น Adobe Photoshop หรือ Adobe Animate ดังนั้น คุณจะต้องใช้เครื่องมือเพิ่มเติมเพื่อสร้างแอนิเมชั่นของคุณ นี่คือวิธีที่เราสร้าง PNG แบบเคลื่อนไหวสำหรับจดหมายข่าวของเรา:

1. สร้างแอนิเมชั่นของคุณใน Adobe CC และบันทึกแต่ละเฟรมเป็น PNG

เราใช้ Adobe Animate เพื่อสร้างแอนิเมชั่น ไม่ว่าจะเป็น GIF หรือ APNG อย่างไรก็ตาม ข้อแตกต่างคือ Adobe Animate ไม่มีตัวเลือกดั้งเดิมในการส่งออกไฟล์ APNG คุณจะต้องส่งออกแต่ละเฟรมเป็น PNG เดียวแทน หลังจากสร้างแอนิเมชั่นแล้ว ให้ไปที่ ส่งออก > ส่งออกภาพยนตร์ แล้วเลือก “ลำดับ PNG” จากเมนูแบบเลื่อนลง

กระบวนการใน Photoshop นั้นคล้ายกันมาก ไปที่ File > Export > Render Video ในบานหน้าต่าง Render Video ให้เลือก "Photoshop Image Sequence" จากดรอปดาวน์และเลือก PNG เป็นรูปแบบ คุณต้องดำเนินการอีกขั้นหนึ่งเพื่อให้แน่ใจว่า png ของคุณโปร่งใส: ในกล่อง ตัว เลือกการแสดงผล ให้เลือก "ตรง - ไม่แมต" จากดรอปดาวน์ "ช่องอัลฟ่า" เมื่อคุณได้เลือกตำแหน่งที่คุณต้องการบันทึกภาพแล้ว ให้ กดปุ่ม Render

2. รวม PNG ส่วนบุคคลของคุณเป็น APNG

ตอนนี้ได้เวลารวบรวมไฟล์รูปภาพแต่ละไฟล์ของคุณให้เป็น APNG แล้ว!

PNG animator เป็นซอฟต์แวร์ชิ้นเยี่ยมที่คุณสามารถซื้อได้ในราคาเล็กน้อยจาก Apple App Store หากคุณเป็นผู้ใช้ระบบปฏิบัติการ ทางเลือกฟรีคือเครื่องมือสร้าง Animated PNG จาก ezgif.com ซึ่งมีฟังก์ชันการทำงานที่คล้ายคลึงกัน

เราเลือกที่จะใช้เครื่องมือออนไลน์เพื่อกรอกไฟล์ของเรา ที่นี่เราสามารถแยกเฟรมที่ไม่จำเป็นในไฟล์สุดท้ายและกำหนดระยะเวลาที่แต่ละเฟรมต้องการได้

3. การเพิ่มประสิทธิภาพขนาดไฟล์ APNG สำหรับใช้ในอีเมล

เช่นเดียวกับ GIF APNG สามารถกลายเป็นเรื่องที่ค่อนข้างหนักได้อย่างรวดเร็ว การลดสีและจำนวนเฟรมที่ใช้จะช่วยให้ไฟล์มีขนาดเล็กลง การบีบอัด zlib มาตรฐานดูเหมือนจะเป็นตัวเลือกเดียวที่ใช้ได้กับไฟล์ของเรา และเมื่อเรากด Make APNG! เราสามารถดูตัวอย่างแอนิเมชั่นและขนาดไฟล์ก่อนดาวน์โหลด นี่เป็นโอกาสที่ดีที่จะทำการเปลี่ยนแปลงเพิ่มเติม เช่น ปรับเปลี่ยนความเร็วหรือลบเฟรมเพิ่มเติม 2-3 เฟรม ก่อนดาวน์โหลด

ก่อนอัปโหลดไฟล์ภาพเพื่อใช้ภายในอีเมล เราสามารถบีบอัดไฟล์เหล่านั้นได้อีกเล็กน้อย เราเพียงเรียกใช้ APNG ของเราผ่าน TinyPNG ซึ่งลดขนาดไฟล์โดยการลอกเมตาดาต้าและลดสี ทั้งหมดในขณะที่รักษาความโปร่งใสและภาพเคลื่อนไหว มันสร้างความแตกต่างอย่างมาก โดยลดขนาดไฟล์ภาพทั้งหมดของเราจาก 943kb เป็น 243kb ซึ่งช่วยประหยัดขนาดไฟล์ได้มากกว่า 74%! ไม่ใช่เครื่องมือบีบอัด PNG ทุกตัวที่จะเก็บภาพเคลื่อนไหวไว้ ดังนั้นให้ตรวจสอบงานของคุณอีกครั้งหลังจากประมวลผลภาพแล้ว

และนั่นแหล่ะ! ตอนนี้ คุณพร้อมที่จะเพิ่ม APNG ลงในอีเมลของคุณแล้ว เช่นเดียวกับที่คุณจะใช้งานกับรูปภาพประเภทอื่นๆ หากคุณต้องการที่จะเห็นจดหมายข่าวฉบับเต็มของเราในการดำเนินการที่คุณสามารถดูได้ที่นี่หรือตรวจสอบรหัสในสีน้ำเงินบิลเดอร์

คุณคิดอย่างไรกับการใช้ APNG ในอีเมล

คุณเคยใช้ PNG แบบเคลื่อนไหวในแคมเปญอีเมลของคุณหรือไม่? เครื่องมือใดที่คุณวางใจในการสร้าง—และรักษาขนาดไฟล์ให้ต่ำ เราชอบที่จะได้ยินเกี่ยวกับประสบการณ์ของคุณ แบ่งปันการเรียนรู้ของคุณในความคิดเห็นด้านล่าง