102 ของรหัสอีเมล: การทำงานกับรูปภาพ

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

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

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

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

• สุดยอดคู่มือภาพพื้นหลังในอีเมล
• คำแนะนำเกี่ยวกับ GIF แบบเคลื่อนไหวในอีเมล
• การใช้รูปภาพในอีเมล HTML

คุณสามารถปฏิบัติตามหัวข้อที่กล่าวถึงในคู่มือนี้ได้อย่างง่ายดาย เปิดอีเมลใน Litmus Builder แล้วเราจะเริ่มต้น!

เตรียมภาพของคุณ

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

ใส่รูปภาพของคุณ

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

หากคุณไม่แน่ใจว่าลิงก์ตรงคืออะไร ให้มองหาส่วนท้ายของชื่อไฟล์ ซึ่งควรลงท้ายด้วยประเภทไฟล์รูปภาพ เช่น “.png” “.jpg” หรือ “.gif” ลิงก์ไปยังโฟลเดอร์หรือ HTML จะไม่ทำงานที่นี่ ต้องชี้ไปที่รูปภาพที่คุณกำลังเพิ่มลงในอีเมลโดยตรง

 <img src="img-url.jpg" />

แค่นั้นแหละ! เมื่อคุณเพิ่มลงในแท็ก รูปภาพของคุณจะแสดงในบานหน้าต่างแสดงตัวอย่างหากคุณอยู่ใน Litmus Builder

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

ค้นหาขนาดที่เหมาะสม

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

 <img src="img-url.jpg" width="400" height="100" />

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

เพิ่มข้อความ ALT

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

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

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

สลับภาพ

เปลี่ยนความคิดของคุณเกี่ยวกับภาพนั้นหรือไม่? คุณมีสองตัวเลือก:

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

ใช้แท็กรูปภาพปัจจุบันและค้นหาเส้นทางของไฟล์:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

แทนที่เส้นทางด้วยเส้นทางรูปภาพใหม่ของคุณ:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

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

รูปภาพที่สมบูรณ์แบบอีเมล

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

ต่อไปนี้คือแนวทางปฏิบัติที่ดีที่สุดโดยด่วนที่ควรคำนึงถึงเมื่อคุณสร้างไลบรารีรูปภาพของคุณ:

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

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

________________________________________________

เรียนรู้เพิ่มเติมเกี่ยวกับรูปภาพในอีเมล:

• ทำไมคุณไม่ควรส่งอีเมลเฉพาะรูปภาพ
• คำแนะนำเกี่ยวกับ GIF แบบเคลื่อนไหวในอีเมล  
• ทำความเข้าใจกับภาพ Retina ในอีเมล HTML
• PNG, GIF หรือ JPEG? รูปแบบรูปภาพที่ดีที่สุดสำหรับอีเมลคืออะไร  
• GIF แบบเคลื่อนไหวในอีเมล: 10 เคล็ดลับในการรักษาขนาดไฟล์ให้เล็ก  
• สุดยอดคู่มือภาพพื้นหลังในอีเมล
• PNG แบบเคลื่อนไหวในอีเมล: ทางเลือกแทน GIF หรือไม่