HTML ईमेल टेम्पलेट में इमेज, वीडियो और ऑडियो जोड़कर एंगेजमेंट बढ़ाएं

पिछले लेख में हमने रिस्पॉन्सिव HTML ईमेल टेम्पलेट बनाना सीखा। अब जानेंगे कि मीडिया—इमेज, वीडियो, ऑडियो—कैसे जोड़ें ताकि ईमेल अधिक आकर्षक और प्रभावी बने।

आवश्यकताएं

• एक बेसिक HTML ईमेल टेम्पलेट (पिछले गाइड से बनाया गया)

1. इमेज जोड़ना

इमेज ईमेल में सबसे आम मीडिया हैं। इन्हें सही तरीके से जोड़ने के चरण:

1. आकार अनुकूलित करें: चौड़ाई 600px से कम रखें ताकि अधिकांश ईमेल क्लाइंट्स में स्केलिंग न हो। उदाहरण: 600×750px।
2. विश्वसनीय सर्वर/CDN पर अपलोड करें: स्थिर URL के लिए imgbb जैसे मुफ़्त होस्टिंग प्लेटफ़ॉर्म का उपयोग करें।
3. एम्बेड कोड जनरेट करें: अपलोड के बाद "HTML full linked" विकल्प चुनें।
4. टेम्पलेट में डालें: जनरेट कोड को मनचाहे सेक्शन में पेस्ट करें।

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

नोट: हमेशा alt एट्रिब्यूट दें ताकि इमेज न लोड होने पर वैकल्पिक टेक्स्ट दिखे।

2. वीडियो एम्बेड करना

अधिकांश ईमेल क्लाइंट्स डायरेक्ट वीडियो प्लेबैक सपोर्ट नहीं करते। समाधान: क्लिक करने योग्य थंबनेल बनाएं जो ऑनलाइन होस्टेड वीडियो से लिंक हो।

1. थंबनेल बनाएं: वीडियो का एक फ्रेम या कस्टम ग्राफ़िक लें।
2. इमेज होस्टिंग से थंबनेल लिंक कोड लें (imgbb पर "HTML thumbnail linked")।
3. वीडियो URL से लिंक करें: <a href> में वीडियो का लिंक (YouTube, Vimeo, आदि) डालें।

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

3. YouTube वीडियो सीधे एम्बेड करना (iframe)

YouTube पर Share → Embed से iframe कोड लें और टेम्पलेट के <td> में पेस्ट करें।

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/UG8rjxYBfFg"
  title="YouTube video player" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

चेतावनी: कई ईमेल क्लाइंट्स iframe ब्लॉक करते हैं; थंबनेल लिंक तरीका अधिक सुरक्षित है।

4. ऑडियो जोड़ना

डायरेक्ट ऑडियो प्लेबैक भी व्यापक रूप से सपोर्टेड नहीं है। दो तरीके:

तरीका A: ऑडियो होस्टिंग प्लेटफ़ॉर्म से iframe एम्बेड (audio.com उदाहरण)

1. audio.com पर अकाउंट बनाएं, MP3 अपलोड करें, Share → Embed चुनें।
2. जनरेट कोड को टेम्पलेट में पेस्ट करें; अनचाहे <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="...">@nyayic-fanny</a>
</div>

तरीका B: HTML5 <audio> टैग

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

नोट: Hotmail और गैर-HTML5 क्लाइंट्स में यह काम नहीं करेगा।

बेस्ट प्रैक्टिसेज

• पूर्ण, एब्सोल्यूट URL उपयोग करें
• Litmus या Email on Acid से टेस्ट करें
• मीडिया फ़ाइल साइज़ ऑप्टिमाइज़ करें ताकि लोड टाइम कम हो
• एक्सेसिबिलिटी: इमेज के लिए वर्णनात्मक alt टेक्स्ट, ऑडियो/वीडियो के लिए ट्रांसक्रिप्ट/कैप्शन

निष्कर्ष

ईमेल क्लाइंट्स की सीमाओं के बावजूद, लिंक्ड इमेज (वीडियो/ऑडियो के लिए) और ऑप्टिमाइज़्ड इमेज एक क्रॉस-प्लेटफ़ॉर्म समाधान देते हैं। हमेशा अच्छी तरह टेस्ट करें और बेस्ट प्रैक्टिस फॉलो करें।