ศิลปะพิกเซลของอีเมล: กลยุทธ์การออกแบบการป้องกันที่หายากและยอดเยี่ยมที่สุด

เผยแพร่แล้ว: 2018-09-19

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

การออกแบบการป้องกันซึ่งช่วยในการเข้าถึงอีเมลด้วยประกอบด้วยสามกลวิธีหลัก:

  1. ใช้ HTML หรือข้อความสดให้มากที่สุด แทนที่จะฝังข้อความทั้งหมดลงในรูปภาพของคุณ
  2. การเพิ่มข้อความ ALT ให้กับรูปภาพของคุณ—หรือดีกว่านั้นคือ ข้อความ ALT ที่มีสไตล์
  3. การใช้สีพื้นหลังบนเซลล์ตาราง

มาเน้นที่กลยุทธ์สุดท้ายกัน

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

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

การออกแบบการป้องกันในอีเมล Twitter

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

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

ตัวอย่างของ Email Pixel Art

เพื่อแสดงให้เห็นถึงพลังของโมเสคอีเมล ต่อไปนี้คือตัวอย่างบางส่วน โดยแต่ละรายการจะแสดงอีเมลโดยเปิดใช้รูปภาพทางด้านซ้ายและปิดรูปภาพทางด้านขวา:

Mothercare สร้างภาพศิลปะพิกเซลของรถเข็นเด็กในอีเมลฉบับนี้ ซึ่งยังใช้ข้อความ ALT ที่มีสไตล์อย่างเสรีตลอด

พิกเซลอาร์ตอีเมลในอีเมล Mothercare

Pizza Express ใช้ภาพพิกเซลในอีเมลวันเกิดที่เรียกใช้นี้ ซึ่งรวมถึงรูปภาพส่วนตัวและข้อความ ALT ที่มีสไตล์เฉพาะบุคคลที่สอดคล้องกัน

ภาพพิกเซลของอีเมลในอีเมล Pizza Express

PlayStation New Zealand ใช้ภาพโมเสคอีเมลเพื่อสร้างสัญลักษณ์ของ Autobots โดยใช้สโลแกน "robots in disguise" ของ Transformers อย่างชาญฉลาด

ภาพพิกเซลของอีเมลในอีเมล Sony PlayStation New Zealand

ชุดชั้นในของ Benton จับภาพความรู้สึกของข้อความในอีเมลวันแม่ โดยใช้ภาพพิกเซลของอีเมลเพื่อสร้างหัวใจสีชมพูขนาดใหญ่

ศิลปะพิกเซลอีเมลในชุดชั้นใน Bendon อีเมล

การออกแบบและการพิจารณาเชิงกลยุทธ์

ก่อนสร้างโมเสคอีเมล ให้พิจารณาปัญหาการออกแบบและกลยุทธ์ต่อไปนี้:

1. ภาพพิกเซลของอีเมลอาจมีจำนวนมาก ซึ่งอาจส่งผลให้อีเมลของคุณถูกตัดใน Gmail หากอีเมลมีขนาดเกิน 102 KB ดังนั้น จงทำสิ่งต่างๆ ให้เรียบง่าย โดยเน้นที่ภาพศิลปะพิกเซลที่ใช้งานได้น้อยที่สุด

ตัวอย่างเช่น หัวใจลายพิกเซลของ Benton Lingerie อาจมีรูปทรงที่โค้งมนมากขึ้นด้วยการเพิ่มจำนวนเซลล์ในตารางเป็นสองเท่าหรือสามเท่า แต่การประหารชีวิตนั้นชัดเจนมากและมีประสิทธิภาพมากตามที่เป็นอยู่

2. ภาพพิกเซลของอีเมลอาจเป็นงานพิเศษได้ ดังนั้นจึงควรจองไว้สำหรับอีเมลที่มีปริมาณมากหรือมีผลกระทบสูง นั่นหมายถึงบางทีอาจใช้สำหรับอีเมลออกอากาศหลักสำหรับการประกาศผลิตภัณฑ์ใหม่ แคมเปญ Cyber ​​​​Monday และกิจกรรมใหญ่ที่คล้ายคลึงกัน แต่ยังหมายถึงการพิจารณาอีเมลเหล่านี้สำหรับอีเมลที่มีปริมาณมาก เช่น อีเมลวันเกิดของ Pizza Express ด้านบน

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

ไม่ว่าคุณจะเลือกแนวทางใด คุณต้องแน่ใจว่าจะได้รับประโยชน์จากความพยายามในการออกแบบพิเศษของคุณ

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

4. ภาพพิกเซลของอีเมลไม่จำเป็นต้องพยายามแทนที่รูปภาพที่ถูกบล็อก ดังที่เราเห็นในตัวอย่างชุดชั้นใน PlayStation และ Benton งานศิลปะพิกเซลของอีเมลอาจแตกต่างจากรูปภาพในอีเมลโดยสิ้นเชิง อย่ารู้สึกว่าคุณต้องสร้างภาพฮีโร่เวอร์ชัน 8 บิตอยู่เสมอ บางครั้งการถ่ายทอดจิตวิญญาณของภาพก็มีประสิทธิภาพเช่นเดียวกัน และอาจเขียนโค้ดได้ง่ายกว่าและแสดงน้อยลง

5. อีเมลบางฉบับมีแนวโน้มที่จะบล็อกรูปภาพมากกว่า ความเป็นไปได้ที่จะมีการบล็อกรูปภาพในอีเมลนั้นไม่เหมือนกัน โอกาสของการบล็อกรูปภาพนั้นสูงขึ้นทั้งในตอนเริ่มต้นของความสัมพันธ์ทางอีเมลและในตอนท้าย

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

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

ในทั้งสองกรณี ความพยายามพิเศษนั้นอาจรวมถึงภาพพิกเซลของอีเมล นอกเหนือจากการใช้ข้อความ HTML และข้อความ ALT ที่มีสไตล์อย่างเสรี

ปรับให้เหมาะสมสำหรับการบล็อกรูปภาพ

Litmus Builder ช่วยให้คุณสามารถเขียนโค้ดอีเมลและดูตัวอย่างอีเมลในแอปและอุปกรณ์อีเมลกว่า 70 รายการได้อย่างง่ายดาย สลับเปิดและปิดรูปภาพได้ด้วยคลิกเดียวเพื่อทำให้ภาพพิกเซลอีเมลของคุณสมบูรณ์แบบ

สร้างอีเมลที่ยอดเยี่ยม →

วิธีการสร้างภาพพิกเซลอีเมล

เมื่อคำนึงถึงสิ่งเหล่านี้ วิธีที่ดีที่สุดในการสร้างภาพพิกเซลอีเมลคืออะไร

ในการเริ่มต้น เราขอแนะนำ:

  • โปรแกรมแปลงรูปภาพเป็นตาราง
  • สุนัขที่เพิ่มประสิทธิภาพอีเมล
  • แอปรูปภาพ-HTML

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

หากนั่นคือเส้นทางที่คุณไป นี่คือขั้นตอนหลักที่คุณต้องดำเนินการ:

  1. ร่างภาพพิกเซลอาร์ตอีเมลที่ใช้งานได้ขั้นต่ำบนกระดาษกราฟหรือในซอฟต์แวร์การออกแบบที่คุณเลือก
  2. ใช้เครื่องมือสไลซ์ใน Photoshop หรือซอฟต์แวร์ออกแบบอื่นๆ เพื่อแบ่งรูปภาพของคุณออกเป็นขนาดบล็อกที่จำเป็น เพื่อสร้างโมเสคอีเมลของคุณและบันทึกเป็นรูปภาพแยกต่างหาก ใช้รูปแบบการตั้งชื่อไฟล์ที่ทำให้ง่ายต่อการรวมภาพโดยรวมเข้าด้วยกัน
  3. ใช้ชุดตารางที่ซ้อนกันภายในตาราง สร้างบล็อกในตำแหน่งที่คุณต้องการเพื่อรองรับการออกแบบของคุณ
  4. เพื่อให้แน่ใจว่าภาพที่หั่นบาง ๆ ของคุณเข้ากันได้อย่างราบรื่น ให้ระบุว่า cellpadding=“0”, cellspacing=“0” และ border=“0” ถูกตั้งค่าสำหรับตารางของคุณ
  5. ใช้ bgcolor ที่จำเป็นกับแต่ละเซลล์ในตารางของคุณ
  6. ดูตัวอย่างอีเมลของคุณโดยปิดรูปภาพเพื่อให้แน่ใจว่ามีการแสดงผลตามที่ตั้งใจไว้

นี่เป็นตัวอย่างที่ดีของภาพพิกเซลอีเมลจากจดหมายข่าว EmailWeekly ของ Action Rocket เลือก "สลับรูปภาพ" ในอินเทอร์เฟซ Litmus Builder เพื่อดูอีเมลที่ปิดรูปภาพ

กลยุทธ์ที่หายากและไม่คาดคิด

นักการตลาดผ่านอีเมลเข้าใจถึงความจำเป็นในการออกแบบปิดรูปภาพ เราทราบดีว่าเนื่องจากแบรนด์ 83% ใช้ข้อความ ALT สำหรับรูปภาพอีเมลของตนเสมอหรือบ่อยครั้ง ตามการสำรวจสถานะอีเมลประจำปี 2018 ของ Litmus ที่มีนักการตลาดเกือบ 3,000 ราย

อย่างไรก็ตาม ในขณะที่การเพิ่มข้อความ ALT นั้นค่อนข้างง่าย การสร้างภาพพิกเซลอีเมลก็ไม่ใช่สิ่งอื่นๆ ด้วยเหตุนี้ แบรนด์เกือบ 77% ไม่เคยใช้ภาพโมเสคของอีเมล

เกือบหนึ่งในสี่ของแบรนด์ต่างๆ ใช้ภาพพิกเซลอีเมลเพื่อดึงดูดผู้ติดตามเมื่อรูปภาพถูกบล็อก

สำหรับแบรนด์ที่กล้าหาญ นั่นคือโอกาส ความหายากของกลวิธีนี้หมายความว่าเป็นวิธีที่มีประสิทธิภาพในการเซอร์ไพรส์และทำให้ผู้ติดตามพึงพอใจด้วยการนำเสนอสิ่งที่ไม่คาดคิด—และแบรนด์อื่นๆ ก็กำลังจับตามอง มากกว่า 23% ของแบรนด์ใช้ภาพพิกเซลอีเมลเป็นอย่างน้อย ซึ่งเพิ่มขึ้นจาก 18% ในปี 2560

ต้องการทรัพยากรเพิ่มเติมเช่นนี้หรือไม่?

สมัครสมาชิก Litmus Weekly เพื่อรับแรงบันดาลใจ เคล็ดลับ และลูกเล่นทางอีเมลประจำสัปดาห์จากกล่องจดหมายของคุณ

รับในรายการ →