สุดยอดคู่มือสำหรับข้อความ ALT ที่มีสไตล์ในอีเมล

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

มีเหตุผลสองสามประการ:

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

ตรวจสอบว่ารูปภาพของคุณมีข้อความ ALT ด้วย Litmus Checklist คุณจะได้ดูตัวอย่างอีเมลแบบปิดรูปภาพ และจะได้รับการแจ้งเตือนหากรูปภาพของคุณไม่มีข้อความ ALT ส่งด้วยความมั่นใจทุกครั้ง ลองลิตมัสฟรี →

การตั้งค่าข้อความ ALT สำหรับรูปภาพในอีเมล HTML นั้นง่ายมาก เรียกว่า แอตทริบิวต์ ซึ่งเป็นส่วนมาตรฐานของไวยากรณ์ของ HTML และรวมอยู่ในแท็กรูปภาพ:

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

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

การแสดงข้อความ ALT มาตรฐาน

รูปภาพที่ถูกปิดใช้งานในอีเมลที่ ไม่มีข้อความ ALT ที่ ส่งไปยัง Gmail มีลักษณะดังนี้:

เปรียบเทียบกับรูปภาพที่ปิดใช้งานในอีเมลที่ มีข้อความ ALT :

คุณอยากได้อันไหนมากกว่ากัน?

การเพิ่มสไตล์ให้กับข้อความ ALT

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

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

นี่คือตัวอย่างเดียวกันข้างต้น แต่ใช้รูปแบบข้อความ ALT:

การสนับสนุนข้อความ ALT ที่มีสไตล์ในไคลเอนต์อีเมล

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

รองรับข้อความ ALT ของเว็บเมล

ไคลเอ็นต์เว็บเมล เช่น Gmail มีความหลากหลายมากที่สุด เนื่องจากโปรแกรมอีเมลเหล่านี้สามารถเข้าถึงได้ในเบราว์เซอร์ต่างๆ ในไคลเอ็นต์เว็บเมลทั้งหมด การสนับสนุนสำหรับข้อความ ALT ที่มีสไตล์จะขึ้นอยู่กับเบราว์เซอร์ที่ใช้ รองรับข้อความ ALT ที่มีสไตล์ใน Firefox, Chrome และ Safari เวอร์ชันปัจจุบัน

ตัวอย่างเช่น ข้อความ ALT ที่มีรูปแบบจะปรากฏแก่สมาชิกที่ดู Gmail ของตนใน Firefox แต่จะใช้งานได้ใน Internet Explorer เท่านั้น ในกรณีนั้น สีได้รับการสนับสนุน แต่ไม่สนับสนุนแบบอักษรหรือคุณลักษณะอื่นๆ Internet Explorer ดูเหมือนจะเป็นเบราว์เซอร์ที่ไม่เป็นมิตรสำหรับข้อความ ALT ที่มีสไตล์โดยทั่วไป เราพบว่าในขณะที่รองรับสี แบบอักษรมักจะไม่:

• Gmail และ G-Suite ใน Internet Explorer
• GMX.de ใน Internet Explorer
• Office 365 ใน Internet Explorer
• Outlook.com ใน Internet Explorer
• Web.de ใน Internet Explorer
• ยาฮู! จดหมายใน Internet Explorer

รูปแบบข้อความ ALT ใน Gmail/Firefox:

รูปแบบข้อความ ALT ใน Gmail/IE:

ข้อความ ALT บนภาพที่เชื่อมโยง

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

Outlook.com

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

ผู้ใช้สามารถบล็อกรูปภาพสำหรับทุกคนที่ไม่อยู่ในรายชื่อผู้ส่งที่ปลอดภัยในการตั้งค่า Outlook.com Outlook.com จัดการกับการกรองเนื้อหาสองประเภทนี้ต่างกัน โดยใช้พฤติกรรมการบล็อกรูปภาพเหมือน Gmail สำหรับผู้ส่งที่ "ดูน่าสงสัย" ในขณะที่ใช้กล่องสีเทาของ Hotmail เพื่อบล็อกรูปภาพสำหรับผู้ใช้ที่มีการตั้งค่าการบล็อกเนื้อหาที่เข้มงวดกว่า

รองรับข้อความ ALT สไตล์เดสก์ท็อป

ไคลเอนต์เดสก์ท็อปมีความน่าเชื่อถือมากกว่าเล็กน้อย เนื่องจากไม่มีตัวแปรที่เกี่ยวข้องมากมาย:

*Outlook เพิ่มข้อความความปลอดภัยให้กับข้อความ ALT รายละเอียดเพิ่มเติมด้านล่าง

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

มีรูปแบบเล็กน้อยที่สนับสนุนตัวแปรอื่นๆ โดยเฉพาะอย่างยิ่งที่เกี่ยวข้องกับแบบอักษรของเว็บ:

• Apple Mail ไม่รองรับฟอนต์ที่มีสไตล์ แม้ว่าจะยังรวมสีและคุณสมบัติอื่นๆ ไว้ด้วย
• ใน Outlook 2000-2003 แม้ว่าคุณจะสามารถเปลี่ยนสีได้ แต่คุณไม่สามารถปรับเปลี่ยนอย่างอื่นด้วยข้อความ ALT ที่มีสไตล์ได้

ข้อความความปลอดภัยของ Outlook

ข้อความ ALT นำหน้าของ Outlook 2003, 2007, 2010, 2013 และ 2016 พร้อมข้อความความปลอดภัยแบบยาว โดยระบุว่า “คลิกขวาที่นี่เพื่อดาวน์โหลดรูปภาพ เพื่อช่วยปกป้องความเป็นส่วนตัวของคุณ Outlook ได้ป้องกันไม่ให้ดาวน์โหลดรูปภาพนี้จากอินเทอร์เน็ตโดยอัตโนมัติ” ขออภัย สิ่งนี้ทำให้ข้อความ ALT ในโปรแกรมรับส่งเมลเหล่านี้แทบไม่มีประโยชน์ เนื่องจากปรากฏเฉพาะที่ส่วนท้ายสุดของคำเตือนด้านความปลอดภัยของ Outlook:

ข้อความนี้ยังปรากฏใน Windows 10 โดยจะบล็อกข้อความ ALT ทั้งหมด

รองรับข้อความ ALT สไตล์มือถือ

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

เช่นเดียวกับ Apple Mail และ Thunderbird ฉันอัปเดตการตั้งค่า iOS ด้วยตนเองเพื่อบล็อกรูปภาพ เพื่อดูว่าระบบปฏิบัติการมือถือนี้จัดการกับข้อความ ALT อย่างไร

ข้อความ ALT ที่มีสไตล์ใน Android (Samsung Galaxy Nexus):

ข้อความ ALT ที่มีสไตล์จะปรากฏเหมือนกันในอีเมลและแอป Gmail ใน Android

ข้อความ ALT ที่มีสไตล์ใน BlackBerry OS 6 (Torch 9810):

ข้อความ ALT ที่มีสไตล์ใน iOS (iPhone 5):

การบล็อกรูปภาพใน Windows Phone 7.5 (Nokia Lumia 900):

คุณสมบัติแบบอักษร CSS ลิงก์และความยาวเป็นตัวแปร

เจาะลึกรายละเอียด คุณสมบัติแบบอักษรต่อไปนี้ส่วนใหญ่ได้รับการสนับสนุนในไคลเอ็นต์ที่แสดงข้อความ ALT ที่มีสไตล์:

• ตระกูลอักษร
• ขนาดตัวอักษร
• ตัวอักษรน้ำหนัก
• สี
• รูปแบบตัวอักษร

มีการเปลี่ยนแปลงในการทดสอบเมื่อได้รับการสนับสนุนคุณสมบัติเฉพาะ ลูกค้าเกือบทุกรายรองรับคุณสมบัติสี แต่ไม่ใช่แบบอักษร สิ่งนี้แตกต่างกันไปตามเบราว์เซอร์เช่นกัน ตัวอย่างเช่น นี่คือสิ่งที่ Gmail/G-Suite ใน Chrome ดูเหมือนในการทดสอบแบบอักษรสองสไตล์ของฉันด้วยสีที่ต่างกัน:

ในขณะที่ Gmail/G-Suite ใน Internet Explorer คำนึงถึงสีแต่ไม่ใช่แบบอักษร:

โปรดทราบว่าลูกค้าบางรายอาจไม่สนับสนุนแบบอักษรหรือขนาดทั้งหมดในข้อความ ALT ที่มีสไตล์ แต่นั่นไม่ได้หมายความว่าคุณจะไม่สามารถเพิ่มตราสินค้าหรือไหวพริบได้ ลองดูแหล่งข้อมูลที่มีประโยชน์นี้ ผู้เชี่ยวชาญด้านการตลาดทางอีเมล Jaina Mistry เขียนให้ Campaign Monitor เพื่อตรวจสอบการสนับสนุนแบบอักษรของเว็บอีกครั้ง

ฉันขอแนะนำรายการแบบอักษรที่ติดตั้งโดยทั่วไปใน Windows และ Mac

พฤติกรรมการบล็อกรูปภาพที่โดดเด่นอื่นๆ

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

โปรแกรมรับส่งเมลเกือบทั้งหมดอนุญาตให้คุณเปลี่ยนการตั้งค่าเพื่อแสดงหรือซ่อนรูปภาพโดยอัตโนมัติ (แม้ว่าการตั้งค่าเริ่มต้นมักจะซ่อน/บล็อกไว้) และจะแจ้งให้ผู้ใช้เปิดรูปภาพสำหรับแต่ละข้อความ บางรายยังอนุญาตให้ผู้ใช้เพิ่มผู้ส่งเฉพาะลงในรายการที่อนุญาตหรือสมุดที่อยู่ หรือเลือก "แสดงรูปภาพจาก..." เสมอ

ดูตัวอย่างอีเมลของคุณโดยปิดรูปภาพ (และเปิดใหม่!)

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

เริ่มการทดสอบ →