ปรับปรุงการมีส่วนร่วม:การเพิ่มรูปภาพ วิดีโอ และเสียงลงในเทมเพลตอีเมล HTML ของคุณ

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

ฉันมีคำถามสองสามข้อเกี่ยวกับการเพิ่มสื่อลงในเทมเพลตอีเมล HTML

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

ข้อกำหนด

• เทมเพลตอีเมล HTML แบบธรรมดา คุณสามารถสร้างได้โดยทำตามคำแนะนำนี้

รูปภาพเป็นสื่อประเภทหนึ่งที่เพิ่มลงในอีเมลที่พบบ่อยที่สุด ต่อไปนี้เป็นวิธีรวมไว้ในเทมเพลตอีเมล HTML ของคุณ:

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

นี่คือภาพที่เราจะอัปโหลด

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

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

imgbb เป็นหนึ่งในแพลตฟอร์มการโฮสต์รูปภาพฟรี

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

เลือกอย่าลบอัตโนมัติจากเมนูแบบเลื่อนลง

หลังจากอัปโหลด URL จะถูกสร้างขึ้น คลิกที่เมนูแบบเลื่อนลงและเลือก "ลิงก์ HTML แบบเต็ม"

โค้ดฝังตัวที่สร้างขึ้น

• คัดลอกโค้ด HTML ที่สร้างขึ้นและแทรกไว้ในส่วนที่ต้องการในเทมเพลตอีเมลของคุณดังที่แสดง

<a href="https://ibb.co/XpRp2N8">
 <img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>

อย่าลังเลที่จะลองใช้ตัวเลือกโค้ดฝังอื่นๆ เพื่อทดสอบว่ารูปภาพของคุณจะปรากฏในเทมเพลตอีเมลอย่างไร

ด้านล่างนี้คือผลลัพธ์ของภาพที่แทรก:

แทรกรูปภาพลงในเทมเพลตอีเมลของเราสำเร็จแล้ว

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

วิธีฝังวิดีโอในเทมเพลตอีเมลของคุณ

ไม่รองรับการเล่นวิดีโอโดยตรงในไคลเอนต์อีเมลส่วนใหญ่ แต่คุณสามารถฝังภาพขนาดย่อที่คลิกได้ซึ่งลิงก์ไปยังวิดีโอที่โฮสต์ออนไลน์:

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

• จากเมนูแบบเลื่อนลง เลือกลิงก์ภาพขนาดย่อ HTML คัดลอกโค้ดและวางลงในเทมเพลตอีเมลของคุณ

<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>

• ลิงก์ไปยังวิดีโอ :แก้ไขโค้ดด้านบนเพื่อใช้ภาพขนาดย่อเป็นรูปภาพที่คลิกได้ซึ่งเชื่อมโยงกับ URL ของวิดีโอ
• เปลี่ยน URL ใน <a href =""> ไปที่ลิงก์วิดีโอดังที่แสดงด้านล่าง

<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw">
 <img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>

ข้อมูลโค้ด HTML นี้สร้างรูปภาพที่เชื่อมโยงโดยไม่มีเส้นขอบ และนี่คือลักษณะที่จะปรากฏในเทมเพลตอีเมลของเรา:

ภาพขนาดย่อที่เชื่อมโยงจะปรากฏเช่นนี้

วิธีฝังวิดีโอ YouTube ในเทมเพลตอีเมลของคุณ

หรือคุณสามารถฝังวิดีโอ YouTube ลงในเทมเพลตอีเมลของคุณได้โดยตรง นี่คือวิธีการ:

• ไปที่ YouTube และเลือกวิดีโอที่คุณต้องการฝัง
• คลิกที่ แชร์ -> ฝัง และ iframe จะถูกสร้างขึ้น ด้านล่างนี้คือตัวอย่าง:

<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

• คัดลอก iframe และวางลงใน <td> ของโค้ดเทมเพลตอีเมล HTML ของคุณ และคุณจะมีหน้าตาดังนี้:

นี่คือตัวอย่างของวิดีโอ YouTube ภายในเทมเพลตอีเมล

วิธีเพิ่มเสียงลงในเทมเพลตอีเมลของคุณ

การเพิ่มไฟล์เสียงลงในอีเมลโดยตรงยังไม่รองรับโปรแกรมรับส่งเมลส่วนใหญ่เช่นกัน เช่นเดียวกับวิดีโอ คุณสามารถใส่ลิงก์ไปยังไฟล์เสียงได้:

• โฮสต์ไฟล์เสียง :อัปโหลดไฟล์เสียงของคุณไปยังแพลตฟอร์มหรือเซิร์ฟเวอร์ที่เหมาะสม มีแพลตฟอร์มเสียงมากมาย เช่น Google ไดรฟ์, เว็บไซต์ของคุณเอง, YouTube, ซาวด์คลาวด์ และอื่นๆ
• สำหรับตัวอย่างนี้ เราจะใช้แพลตฟอร์มที่เรียกว่า audio.com เพียงสร้างบัญชีโดยคลิก "เข้าร่วมทันทีฟรี" หรือลงชื่อเข้าใช้หากคุณมีบัญชีอยู่แล้ว

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

• การดำเนินการนี้จะนำคุณไปสู่ตัวเลือกสองสามตัวที่คุณสามารถคัดลอกลิงก์หรือฝังลิงก์:

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

โค้ดที่สร้างโดย audio.com ซึ่งสามารถฝังอยู่ในเทมเพลตอีเมลได้

คุณยังสามารถกำจัด div ได้อีกด้วย และเพียงใช้ iframe . นอกจากนี้คุณยังสามารถลบส่วนที่คุณไม่ต้องการให้ปรากฏในเทมเพลตอีเมลออกและปรับแต่งตามความต้องการของคุณได้

นี่คือรหัส:

<div style="height: 228px; width: 600px;">
<iframe src="https://audio.com/embed/audio/1797114509131910?theme=image"
 style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a>
</div>

นี่คือผลลัพธ์สุดท้ายของเราสำหรับสิ่งที่กล่าวมาข้างต้น:

เสียงของเราจะปรากฏเช่นนี้ในเทมเพลตอีเมลของเรา

การใช้ audio แท็ก

นอกจากการฝังแล้ว เราสามารถใช้แท็กเสียงและเพียงเพิ่ม URL ไปยังแหล่งที่มาของเสียงของเราดังที่แสดงด้านล่าง:

 <p>Audio added via audio tag</p> <br><br>
 <audio controls="controls">
 <source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">
 <p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p>
 </audio>

เพียงเปลี่ยน URL เป็น audio url ของคุณ . และนี่คือลักษณะการแก้ไขทั้งหมดของเราควรมีลักษณะเช่นนี้

เทมเพลตอีเมล html ที่แก้ไขของเรา

หมายเหตุ: Hotmail และไคลเอนต์ที่ไม่รองรับ HTML5 จะไม่ทำงาน!

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

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

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

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

ขอให้มีความสุขกับการเขียนโค้ด!

เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น