HTML ইমেইল টেমপ্লেটে ছবি, ভিডিও এবং অডিও যোগ করে এনগেজমেন্ট বাড়ান

আমার পূর্ববর্তী আর্টিকেলে, "রেসপন্সিভ HTML ইমেইল টেমপ্লেট কীভাবে তৈরি করবেন", আমরা একটি সাধারণ HTML ইমেইল টেমপ্লেট ডিজাইন এবং কোড করার বেসিকস অন্বেষণ করেছিলাম যা বিভিন্ন ডিভাইস এবং ইমেইল ক্লায়েন্টে সুন্দরভাবে উপযুক্ত হয়।

আমাকে HTML ইমেইল টেমপ্লেটে মিডিয়া যোগ করার সম্পর্কে কিছু প্রশ্ন পাওয়া গেছিল।

उस ফাউন্ডেশনের ওপর ভিত্তি করে, আমি আপনাকে আপনার HTML ইমেইল টেমপ্লেটে মিডিয়া যোগ করার বিভিন্ন পদ্ধতির মাধ্যমে গাইড করব। ছবি, ভিডিও এবং অডিও-এর মতো মিডিয়া যোগ করলে আপনার কমিউনিকেশনের এনগেজমেন্ট এবং কার্যকারিতা উল্লেখযোগ্যভাবে বাড়াতে পারে।

প্রয়োজনীয়তা

• একটি সাধারণ HTML ইমেইল টেমপ্লেট। আপনি এই গাইড অনুসরণ করে তৈরি করতে পারেন।

ছবি ইমেইলে যোগ করা সবচেয়ে সাধারণ মিডিয়া ধরন। আপনার HTML ইমেইল টেমপ্লেটে সেগুলো কীভাবে অন্তর্ভুক্ত করবেন সেটা এখানে দেওয়া হল:

• ছবি যোগ করার আগে, নিশ্চিত করুন যে সেটি ওয়েব ব্যবহারের জন্য যথাযথ আকারে এবং অপ্টিমাইজড আছে। একটি সাধারণ অনুশীলন হল ছবির প্রস্থ ৬০০ পিক্সেলের নিচে রাখা যাতে অধিকাংশ ইমেইল ক্লায়েন্টে স্কেলিং ছাড়াই ফিট হয়। এই উদাহরণের জন্য আমাদের একটি স্টক ইমেজ আছে এবং সেটিকে ৬০০ x ৭৫০ পিক্সেলে রিসাইজ করা হয়েছে।

এই ছবিটি আমরা আপলোড করব

• আপনার ছবিটি একটি নির্ভরযোগ্য ওয়েব সার্ভার বা কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN)-এ আপলোড করুন। আপনার ইমেইলে রেফারেন্স করার জন্য একটি স্থিতিশীল URL লাগবে।

এই উদাহরণের জন্য আমরা imgbb ওয়েবসাইট ব্যবহার করব এবং আমাদের ছবিটি আপলোড করব। "Start Uploading"-এ ক্লিক করুন এবং ছবিটি বেছে নিন।

imgbb ফ্রি ইমেজ হোস্টিং প্ল্যাটফর্মের একটি

ছবিটি বেছে নেওয়ার পর, "Don't Autodelete" সিলেক্ট করুন এবং আপলোড-এ ক্লিক করুন।

ড্রপডাউন থেকে Don't Autodelete বেছে নিন

আপলোড হওয়ার পর একটি URL জেনারেট হবে। ড্রপডাউনে ক্লিক করুন এবং "HTML full linked" বেছে নিন।

জেনারেট করা এমবেড কোড

• জেনারেট হওয়া HTML কোডটি কপি করুন এবং আপনার ইমেইল টেমপ্লেটের কাঙ্ক্ষিত সেকশনে ইনসার্ট করুন।

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

আপনার ইমেইল টেমপ্লেটে ছবিটি কীভাবে দেখাবে তা টেস্ট করতে অন্যান্য এমবেড কোড অপশনও ট্রাই করুন।

নিচে ইনসার্ট করা ছবির ফলাফল দেওয়া হল:

ছবিটি সফলভাবে আমাদের ইমেইল টেমপ্লেটে ইনসার্ট হয়েছে

নোট: alt অ্যাট্রিবিউট সবসময় অন্তর্ভুক্ত করুন যাতে ছবি প্রদর্শন না হলে বিকল্প টেক্সট থাকে।

ইমেইল টেমপ্লেটে ভিডিও এমবেড করার পদ্ধতি

অধিকাংশ ইমেইল ক্লায়েন্টে সরাসরি ভিডিও প্লেব্যাক সাপোর্ট করা নেই। বদলে, আপনি একটি ক্লিকযোগ্য থাম্বনেইল এমবেড করতে পারেন যা অনলাইন হোস্ট করা একটি ভিডিওর সাথে লিংক করা থাকবে:

• থাম্বনেইল তৈরি করুন: আপনার ভিডিওর একটি ফ্রেম ক্যাপচার করুন বা ভিডিও কন্টেন্টকে রিপ্রেজেন্ট করে একটি কাস্টম গ্রাফিক তৈরি করুন। এটি প্লেসহোল্ডার হিসেবে কাজ করবে। এই উদাহরণে, আমরা একই ছবিকে থাম্বনেইল হিসেবে ব্যবহার করব।

• ড্রপডাউন থেকে HTML thumbnail linked বেছে নিন। কোডটি কপি করুন এবং আপনার ইমেইল টেমপ্লেটে পেস্ট করুন।

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

• ভিডিওর সাথে লিংক করুন: উপরের কোডটি মডিফাই করুন যাতে থাম্বনেইলটি একটি ক্লিকযোগ্য ইমেজ হিসেবে কাজ করে যা ভিডিও URL-এ লিংক করা থাকবে।
• <a href ="">-এ URL টি ভিডিও লিংক দিয়ে চেঞ্জ করুন নিচে দেখানো অনুযায়ী।

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

এই HTML স্নিপেটটি বর্ডার ছাড়া একটি লিংকড ইমেজ তৈরি করে। এবং এটি আমাদের ইমেইল টেমপ্লেটে কীভাবে দেখাবে সেটা এখানে:

লিংকড থাম্বনেইল এর উদাহরণ

ইমেইল টেমপ্লেটে ইউটিউব ভিডিও এমবেড করার পদ্ধতি

বিকল্পভাবে আপনি সরাসরি একটি ইউটিউব ভিডিও আপনার ইমেইল টেমপ্লেটে এমবেড করতে পারেন। এখানে কীভাবে:

• ইউটিউবে যান এবং যে ভিডিওটি এমবেড করতে চান সেটি বেছে নিন।
• 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-টি কপি করুন এবং আপনার HTML ইমেইল টেমপ্লেট কোডের একটি <td> সেকশনে পেস্ট করুন। এবং আপনি এমন কিছু পাবেন:

ইমেইল টেমপ্লেটের মধ্যে একটি ইউটিউব ভিডিওর উদাহরণ

ইমেইল টেমপ্লেটে অডিও যোগ করার পদ্ধতি

অডিও ফাইল সরাসরি ইমেইলে যোগ করাও অধিকাংশ ইমেইল ক্লায়েন্টে সাপোর্টেড নেই। ভিডিওর মতো, আপনি অডিও ফাইলের একটি লিংক অন্তর্ভুক্ত করতে পারেন:

• অডিও ফাইল হোস্ট করুন: আপনার অডিও ফাইলটি একটি উপযুক্ত প্ল্যাটফর্ম বা সার্ভারে আপলোড করুন। অনেক অডিও প্ল্যাটফর্ম আছে, যেমন গুগল ড্রাইভ, আপনার নিজের ওয়েবসাইট, ইউটিউব, সাউন্ডক্লাউড, ইত্যাদি।
• এই উদাহরণের জন্য, আমরা audio.com নামক একটি প্ল্যাটফর্ম ব্যবহার করব। সিম্পলি "join now for free"-এ ক্লিক করে অ্যাকাউন্ট তৈরি করুন বা ইতিমধ্যে অ্যাকাউন্ট থাকলে সাইন ইন করুন।

আপলোড-এ ক্লিক করুন এবং আপনার .mp3 ফাইলটি বেছে নিন যা আপনার অ্যাকাউন্টে সংরক্ষিত হবে। একবার অডিও সম্পূর্ণ হলে, শেয়ার আইকনে ক্লিক করুন।

• এটি আপনাকে কিছু অপশনে নিয়ে যাবে যেখানে আপনি লিংক কপি করতে পারেন বা সরাসরি এমবেড করতে পারেন:

Embed-এ ক্লিক করুন, এবং আপনি দেখবেন আপনার অডিও কীভাবে দেখাবে এর একটি প্রিভিউ। কোডটি কপি করুন এবং আপনার ইমেইল টেমপ্লেট সেকশনে পেস্ট করুন।

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 ট্যাগ ব্যবহার

এমবেড করার বদলে, আমরা 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 ইমেইল টেমপ্লেট

নোট: হটমেইল এবং HTML5 সাপোর্ট না করে এমন ক্লায়েন্টগুলোর জন্য এটি কাজ করবে না!

HTML ইমেইলে মিডিয়া ইন্টিগ্রেট করার সময়, কম্প্যাটিবিলিটি এবং ইউজার এক্সপেরিয়েন্স অপ্টিমাইজ করার জন্য নিচের টিপসগুলো বিবেচনা করুন:

• ছবি, ভিডিও এবং অডিওর জন্য সবসময় ফুল, অ্যাবসোলিউট URL ব্যবহার করুন যাতে সেগুলো সব ইমেইল ক্লায়েন্টে সঠিকভাবে লোড হয়।
• আপনার ইমেইল টেস্ট করুন: ভিন্ন ইমেইল ক্লায়েন্ট HTML কন্টেন্ট ভিন্নভাবে ডিসপ্লে করে। Litmus বা Email on Acid-এর মতো টুল ব্যবহার করে আপনার ইমেইল কীভাবে বিভিন্ন প্ল্যাটফর্মে রেন্ডার হয় তা টেস্ট করুন।
• লোড টাইম মনে রাখুন: মিডিয়া ফাইল সাইজ অপ্টিমাইজ করুন যাতে আপনার ইমেইল দ্রুত লোড হয়, যা প্রাপকের দৃষ্টি ধরে রাখতে এবং এনগেজমেন্ট বাড়াতে অত্যন্ত গুরুত্বপূর্ণ।
• অ্যাক্সেসিবিলিটি বিবেচনা করুন: ছবির জন্য বর্ণনামূলক alt টেক্সট এবং অডিও ও ভিডিও কন্টেন্টের জন্য ক্যাপশন বা ট্রানস্ক্রিপ্ট প্রদান করুন।

ইমেইল ক্লায়েন্ট যা সাপোর্ট করতে পারে তার সীমাবদ্ধতা থাকা সত্ত্বেও, ভিডিও এবং অডিও ফাইলের জন্য লিংকড ইমেজ ব্যবহার করা একটি ইউজার-ফ্রেন্ডলি সমাধান যা অধিকাংশ প্ল্যাটফর্মে কাজ করে।

সবসময় নিশ্চিত করুন যে আপনি আপনার ইমেইলอย่าง grondig টেস্ট করেছেন এবং একটি স্মুথ এবং আকর্ষণীয় ইউজার এক্সপেরিয়েন্স নিশ্চিত করতে সেরা অনুশীলনগুলো মেনে চলেছেন।

শুভ কোডিং!

নি:শুল্কে কোডিং শিখুন। freeCodeCamp-এর ওপেন সোর্স ক্যারিকুলাম ৪০,০০০-এর অধিক লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন।