การจัดการรูปภาพในโปรแกรมรับส่งอีเมล

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

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

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

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

Outlook จะแทรกช่องว่างเล็ก ๆ ใต้รูปภาพแบบอินไลน์ ให้ใช้ style="display:block" กับ <img> ทุกตัว เพื่อกำจัดช่องว่างนั้นและทำให้จังหวะแนวตั้งสม่ำเสมอในทุกไคลเอนต์

ไคลเอนต์รุ่นเก่าจะเพิ่มเส้นขอบสีน้ำเงินรอบ <a><img></a> ให้กำหนด border="0" ในแอตทริบิวต์ของรูปภาพ และกำหนด style="border:0" แบบอินไลน์ เพื่อให้รูปภาพที่อยู่ภายในคำกระตุ้นให้ดำเนินการแสดงผลได้สะอาดเรียบร้อย

ไคลเอนต์อีเมลไม่เข้าใจแนวคิดของ "หน้านี้" src ของรูปภาพทุกภาพต้องเป็น URL แบบสัมบูรณ์ที่ขึ้นต้นด้วย https:// และชี้ไปยัง CDN ที่เข้าถึงได้แบบสาธารณะ เส้นทางในเครื่อง เส้นทางสัมพัทธ์ และ URL ที่ใช้ http:// (เนื้อหาผสม) จะโหลดไม่สำเร็จโดยไม่มีการแจ้งเตือน

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

สำหรับพื้นหลังส่วนฮีโร่ ให้ใช้ background-image ของ CSS คู่กับ bgcolor ที่ตรงกับโทนสีหลัก หากรูปภาพถูกบล็อก เซลล์ก็ยังแสดงสีที่เหมาะสม และข้อความที่วางทับบน bgcolor ยังคงอ่านได้ ช่วยหลีกเลี่ยงปัญหาข้อความสีขาวบนพื้นขาว

แสดงผลรูปภาพที่ขนาด 2 เท่า แล้วลดขนาดลงด้วยแอตทริบิวต์ width เพื่อให้คมชัดบนจอที่มีความละเอียดสูง: แหล่งรูปภาพขนาด 600x600 ที่แสดงด้วย width="300" height="300" จะดูคมชัดบน Retina ข้อเสียคือใช้แบนด์วิดท์มากขึ้น ดังนั้นควรรักษาขนาดไฟล์ให้เล็กด้วยการบีบอัดในระดับเทียบเท่า WebP

ภาพเคลื่อนไหว GIF ใช้งานได้ในไคลเอนต์ส่วนใหญ่ ยกเว้น Outlook (ซึ่งแสดงเฉพาะเฟรมแรก) ออกแบบเฟรมแรกให้สื่อความหมายได้ในฐานะรูปภาพนิ่ง หัวข้อ CTA หรือคุณค่าหลักต้องอ่านได้แม้ไม่มีภาพเคลื่อนไหวส่วนที่เหลือ

มองว่ารูปภาพเป็นส่วนเสริม ไม่ใช่ตัวสาร ใช้ URL https แบบสัมบูรณ์ กำหนด width/height/display:block/border:0 เขียนข้อความ alt ที่มีความหมาย โฮสต์รูปภาพบน CDN ที่รวดเร็ว ใช้ bgcolor เป็นทางเลือกสำรองสำหรับพื้นหลัง ออกแบบรูปภาพที่ขนาด 2 เท่าสำหรับ Retina และจำไว้ว่า Outlook จะหยุดภาพ GIF ไว้ที่เฟรมแรก