ในบทความก่อนหน้า "วิธีสร้างเทมเพลตอีเมล HTML แบบ Responsive" เราได้สำรวจพื้นฐานการออกแบบและเขียนโค้ดเทมเพลตอีเมล HTML เรียบง่ายที่ปรับตัวได้สวยงามบนอุปกรณ์และ Email Client ต่างๆ
ผมได้รับคำถามหลายข้อเกี่ยวกับการเพิ่มสื่อ (Media) ลงในเทมเพลตอีเมล HTML
จากพื้นฐานนั้น ผมจะแนะนำวิธีต่างๆ ในการเพิ่ม Media ลงในเทมเพลตอีเมล HTML ของคุณ การเพิ่ม Media เช่น รูปภาพ วิดีโอ และเสียง สามารถเพิ่ม Engagement (การมีส่วนร่วม) และประสิทธิภาพของการสื่อสารได้อย่างมาก
ข้อกำหนดเบื้องต้น
- เทมเพลตอีเมล HTML เรียบง่าย คุณสามารถสร้างได้จากคู่มือนี้
วิธีเพิ่มรูปภาพในเทมเพลตอีเมล
รูปภาพเป็น Media ประเภทที่นิยมเพิ่มในอีเมลมากที่นี่ วิธีการรวมเข้าไปในเทมเพลตอีเมล HTML:
- ก่อนเพิ่มรูปภาพ ตรวจสอบให้แน่ใจว่ามันมีขนาดเหมาะสมและปรับให้เหมาะกับเว็บ แนวทางทั่วไปคือควรทำให้ความกว้างรูปภาพอยู่ภายใต้ 600 พิกเซล เพื่อให้เข้ากับ Email Client ส่วนใหญ่โดยไม่ต้อง Scale ในตัวอย่างนี้เรามี Stock Image และปรับขนาดเป็น 600 x 750 พิกเซล
[รูปภาพตัวอย่าง]
- อัปโหลดรูปภาพไปยัง Web Server หรือ CDN ที่น่าเชื่อถือ คุณจะต้องการ URL ที่เสถียรเพื่ออ้างอิงในอีเมล
ในตัวอย่างนี้เราจะใช้เว็บไซต์ imgbb และอัปโหลดรูปภาพ คลิก "Start Uploading" และเลือกรูปภาพ
[รูปภาพแสดง imgbb - แพลตฟอร์มโฮสต์รูปภาพฟรี]
หลังจากเลือกรูปภาพแล้ว เลือก "Don't Autodelete" และคลิก Upload
[รูปภาพแสดงการเลือก Don't Autodelete จาก Dropdown]
หลังอัปโหลดเสร็จ จะได้ URL มา คลิก Dropdown และเลือก "HTML full linked"
[รูปภาพแสดง Embed Code ที่สร้างขึ้น]
- คัดลอก HTML Code ที่สร้างขึ้น และแทรกไว้ใน Section ที่ต้องการในเทมเพลตอีเมล
<a href="https://ibb.co/XpRp2N8"> <img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>
ลอง Embed Code ตัวเลือกอื่นๆ เพื่อทดสอบว่ารูปภาพจะแสดงในเทมเพลตอีเมลอย่างไร
ด้านล่างคือผลลัพธ์ของรูปภาพที่แทรกแล้ว:
[รูปภาพแสดงรูปที่แทรกสำเร็จในเทมเพลตอีเมล]
หมายเหตุ: ควรใส่ Attribute alt เสมอ เพื่อให้ข้อความทางเลือกเมื่อรูปภาพไม่สามารถแสดงได้
วิธีฝังวิดีโอในเทมเพลตอีเมล
การเล่นวิดีโอโดยตรงไม่ได้รับการรองรับใน Email Client ส่วนใหญ่ แทนนั้น คุณสามารถฝัง Thumbnail ที่คลิกได้ ซึ่งลิงก์ไปยังวิดีโอที่โฮสต์ออนไลน์:
- สร้าง Thumbnail: จับภาพเฟรมจากวิดีโอ หรือสร้างกราฟิกแบบกำหนดเองที่แทนเนื้อหาวิดีโอ จะทำหน้าที่เป็น Placeholder ในตัวอย่างนี้เราจะใช้รูปภาพเดียวกันเป็น Thumbnail
[รูปภาพตัวอย่าง]
- จาก Dropdown เลือก HTML thumbnail linked คัดลอกโค้ดและวางในเทมเพลตอีเมล
<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>
- ลิงก์ไปยังวิดีโอ: แก้โค้ดข้างต้นให้ใช้ Thumbnail เป็นรูปภาพที่คลิกได้ ลิงก์ไปยัง 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 Snippet นี้สร้างรูปภาพลิงก์โดยไม่มี Border และจะปรากฏในเทมเพลตอีเมลแบบนี้:
[รูปภาพแสดง Linked Thumbnail]
วิธีฝังวิดีโอ YouTube ในเทมเพลตอีเมล
ทางเลือกอื่นคือฝังวิดีโอ YouTube โดยตรงในเทมเพลตอีเมล วิธีการ:
- ไปที่ YouTube และเลือกวิดีโอที่ต้องการฝัง
- คลิก Share → Embed และจะได้
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และวางใน Section<td>ของโค้ดเทมเพลตอีเมล HTML จะได้ผลลัพธ์แบบนี้:
[รูปภาพตัวอย่าง YouTube Video ในเทมเพลตอีเมล]
วิธีเพิ่มเสียงในเทมเพลตอีเมล
การเพิ่มไฟล์เสียงโดยตรงในอีเมลก็ไม่ได้รับการรองรับใน Email Client ส่วนใหญ่ คล้ายกับวิดีโอ คุณสามารถใส่ลิงก์ไปยังไฟล์เสียง:
- โฮสต์ไฟล์เสียง: อัปโหลดไฟล์เสียงไปยังแพลตฟอร์มหรือเซิร์ฟเวอร์ที่เหมาะสม มีแพลตฟอร์มเสียงหลายแห่ง เช่น Google Drive, เว็บไซต์ของตัวเอง, YouTube, SoundCloud ฯลฯ
- ในตัวอย่างนี้เราจะใช้แพลตฟอร์ม audio.com สร้างบัญชีโดยคลิก "Join now for free" หรือ Sign in ถ้ามีบัญชีอยู่แล้ว
[รูปภาพตัวอย่าง]
คลิก Upload และเลือกไฟล์ .mp3 ซึ่งจะถูกเก็บในบัญชี เมื่ออัปโหลดเสร็จ คลิกไอคอน Share
[รูปภาพตัวอย่าง]
- จะมีตัวเลือกให้คัดลอกลิงก์ หรือฝังลิงก์โดยตรง:
คลิก Embed จะเห็น Preview ว่าเสียงจะปรากฏอย่างไร คัดลอกโค้ดและวางใน Section ของเทมเพลตอีเมล
[รูปภาพแสดงโค้ดที่ 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>
นี่คือผลลัพธ์สุดท้าย:
[รูปภาพแสดงเสียงในเทมเพลตอีเมล]
การใช้ Tag audio
นอกจากการฝังแล้ว ยังสามารถใช้ Tag 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 และ Client ที่ไม่รองรับ HTML5 จะไม่ทำงาน!
เคล็ดลับสำหรับการรวม Media ใน HTML Email
เมื่อรวม Media ใน HTML Email ควรพิจารณาเคล็ดลับเหล่านี้เพื่อเพิ่ม Compatibility และ User Experience:
- ใช้ Full Absolute URLs เสมอสำหรับรูปภาพ วิดีโอ และเสียง เพื่อให้โหลดถูกต้องใน Email Client ทุกตัว
- ทดสอบอีเมล: Email Client ต่างๆ แสดง HTML Content แตกต่างกัน ใช้ Tools อย่าง Litmus หรือ Email on Acid ทดสอบการ Render แขนงแพลตฟอร์มต่างๆ
- คำนึงถึง Load Times: ปรับขนาดไฟล์ Media ให้เหมาะสม เพื่อให้อีเมลโหลดเร็ว ซึ่งสำคัญต่อการรักษาความสนใจของผู้รับและเพิ่ม Engagement
- คำนึงถึง Accessibility: ใส่ Alt Text ที่อธิบายได้สำหรับรูปภาพ และ Captions หรือ Transcripts สำหรับเนื้อหาเสียงและวิดีโอ
แม้จะมีข้อจำกัดในสิ่งที่ Email Client รองรับ การใช้ Linked Images สำหรับวิดีโอและไฟล์เสียงเป็น Solution ที่ User-friendly และทำงานได้บนแพลตฟอร์มส่วนใหญ่
ทดสอบอีเมลให้ละเอียด และปฏิบัติตาม Best Practices เพื่อประสบการณ์ผู้ใช้ที่ราบรื่นและน่าสนใจ
Happy Coding!
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
