การส่งตอนที่ 4: ทำความเข้าใจกับภาพพื้นหลังในอีเมล

ในตอนนี้ของ Delivering เราจะมาดูเทคนิคที่จำเป็นสำหรับนักออกแบบอีเมล: ภาพพื้นหลังที่ต่ำต้อย—แต่ทรงพลัง เรียนรู้ว่าเหตุใดภาพพื้นหลังจึงมีความสำคัญ วิธีการเขียนโค้ดโดยใช้เทคนิคต่างๆ และวิธีการต่างๆ เหล่านั้นเปรียบเทียบระหว่างไคลเอนต์อีเมลต่างๆ ตอนนี้เป็นคู่หูของ Ultimate Guide to Background Images ที่อัปเดตล่าสุดในอีเมล ดูเคล็ดลับ กลเม็ด และโค้ด

อย่าลืมสมัครใช้บริการ Delivery บน iTunes หรือ Spotify เพื่อฟังตอนต่างๆ ในอนาคต และเข้าร่วมการสนทนาบน Twitter โดยใช้แฮชแท็ก #DeliveringPodcast

ถอดเสียงตอน

มีหลายวิธีในการเพิ่มภาพที่น่าสนใจให้กับแคมเปญอีเมล

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

ฉันชื่อ Jason Rodriguez และยินดีต้อนรับสู่ Delivering ซึ่งเป็นพอดคาสต์เกี่ยวกับการตลาดผ่านอีเมลและตำแหน่งในโลก การส่งมอบมาถึงคุณโดย Litmus ซึ่งเป็นแพลตฟอร์มชั้นนำของอุตสาหกรรมสำหรับนักการตลาดผ่านอีเมล เข้าร่วมกับผู้เชี่ยวชาญด้านอีเมลกว่า 600,000 คนที่ใช้ Litmus เพื่อสร้าง ตรวจทาน ทดสอบ และติดตามแคมเปญการตลาดทางอีเมลที่ดีขึ้น ค้นหาข้อมูลเพิ่มเติมและทดลองใช้งานฟรี 7 วันที่ Litmus.com

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

เป็นวิธีที่ดีในการปฏิบัติตามหลักเกณฑ์ของแบรนด์และผลิตอีเมลอย่างรวดเร็ว แต่การใช้รูปภาพในลักษณะนี้มีข้อเสียที่สำคัญบางประการ

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

ประการที่สองคือสมาชิกที่ใช้เทคโนโลยีอำนวยความสะดวกเช่นซอฟต์แวร์โปรแกรมอ่านหน้าจอจะไม่สามารถสัมผัสเนื้อหาในอีเมลได้

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

ใส่ภาพพื้นหลัง

ภาพพื้นหลังเป็นเพียงรูปภาพ เช่นเดียวกับรูปภาพอื่นๆ ในอีเมล เป็นไฟล์ที่อัปโหลดไปยังเซิร์ฟเวอร์และเชื่อมโยงกับโค้ด ความแตกต่างคือ ใช้ภาพพื้นหลังไม่ได้กับแท็กรูปภาพ HTML แต่ใช้กับแอตทริบิวต์หรือ CSS ในองค์ประกอบ HTML อื่นๆ

มีสี่วิธีในการเขียนโค้ดภาพพื้นหลัง โดยแต่ละวิธีมีข้อดีและข้อเสีย

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

คุณยังสามารถโหลดภาพพื้นหลังโดยใช้ CSS สองเทคนิคต่อไปนี้ใช้วิธีเดียวกัน แต่ใช้ต่างกัน

CSS มีคุณสมบัติพื้นหลังหลายประการ โดยเฉพาะอย่างยิ่ง: background-image, background-repeat, background-position, background-size และ background-color นอกจากนี้ยังมีคุณสมบัติชวเลขพื้นหลังที่เป็นประโยชน์อย่างยิ่ง

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

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

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

วิธีสุดท้ายในการใส่ภาพพื้นหลังในอีเมลคือการใช้สิ่งที่เรียกว่า “พื้นหลังกันกระสุน” พื้นหลังกันกระสุนสร้างขึ้นบนวิธีการแอตทริบิวต์ HTML โดยรวม VML—หรือ Vector Markup Language—ในโค้ด VML เป็นภาษา Microsoft ที่เป็นกรรมสิทธิ์ซึ่งใช้ในผลิตภัณฑ์ Office เช่น Outlook การใช้ภาพพื้นหลังใน VML จะทำให้ทำงานใน Microsoft Outlook ได้ ซึ่งไม่จำเป็นว่าจะต้องเป็นจริงสำหรับวิธีอื่นๆ ที่กล่าวถึงก่อนหน้านี้

ข้อเสียที่สำคัญของการใช้ VML คือไม่สามารถเข้าถึงได้ง่ายหรือมีเอกสารประกอบครบถ้วน และเพิ่มโค้ดจำนวนมากที่ตรงไปตรงมา เข้าใจยาก เพื่อให้ง่ายขึ้น เพื่อนของเราที่ Campaign Monitor ได้สร้างเครื่องมือที่ยอดเยี่ยมสำหรับการสร้างพื้นหลังกันกระสุน หาได้ตามสะดวกที่ backgrounds.cm.

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

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

คุณสามารถใช้ CSS เพื่อจัดรูปแบบเนื้อหา HTML เพื่อให้ดูเหมือนได้รับการออกแบบมาอย่างดีเหมือนกับภาพที่ออกมาจาก Photoshop และคุณยังสามารถรวมปุ่ม CTA ไว้ด้วย

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

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

มีหลายอย่างที่ต้องใช้ภาพพื้นหลังอย่างเต็มที่ เราเพิ่งเผยแพร่การอัปเดต Ultimate Guide to Background Images in Email ในบล็อก Litmus ที่คุ้มค่าที่จะลองดู เป็นวิธีที่ยอดเยี่ยมในการดูโค้ดที่ขับเคลื่อนภาพพื้นหลัง รวมทั้งรับแรงบันดาลใจในการอัปเดตแคมเปญของคุณเอง เพียงตรงไปที่บันทึกย่อการแสดงของวันนี้สำหรับลิงก์

และอย่าลืมสมัครใช้บริการ Delivery บน iTunes หรือ Spotify เพื่อฟังตอนต่างๆ ในอนาคต ซึ่งเราจะเจาะลึกเทคนิคอื่นๆ เพื่อสร้างอีเมล HTML ที่ดีขึ้น