ইমেল নিউজলেটার ইমেজের সাইজ এবং ওয়েট লিমিট

প্রতিটি নিউজলেটার ইমেজ ১০০ KB-এর নিচে রাখুন, ইমেজগুলোকে তাদের ডিসপ্লে উইডথ বা প্রস্থের দ্বিগুণ সাইজে তৈরি করুন এবং WebP-এর পরিবর্তে JPG বা PNG ব্যবহার করুন। Gmail এমন যেকোনো মেসেজ কেটে ছোট করে দেয় যার Hypertext Markup Language (HTML) সাইজ প্রায় ১০২ KB অতিক্রম করে এবং বাকি অংশের জায়গায় একটি View entire message লিঙ্ক বসিয়ে দেয়।

বেশিরভাগ প্রেরক এই মেসেজ কেটে যাওয়ার বিষয়টি কঠিন অভিজ্ঞতার মাধ্যমে জানতে পারেন, সাধারণত যখন আনসাবস্ক্রাইব লিঙ্ক এবং ট্র্যাকিং পিক্সেল কেটে যাওয়া অংশের নিচে পড়ে যায়। ইমেজগুলোই প্রায়শই এর কারণ হয়ে দাঁড়ায়, হয় সেগুলো সরাসরি মেসেজে এম্বেড করার কারণে অথবা সেগুলোর চারপাশের মার্কআপ বেশ কয়েকটি ক্যাম্পেইন ধরে বৃদ্ধি পাওয়ার কারণে।

Gmail-এর কেটে দেওয়ার সীমা আসলে কী পরিমাপ করে

Gmail মেসেজের HTML সোর্স কোড পরিমাপ করে, এটি যে ইমেজগুলোর সাথে লিঙ্ক করা আছে তা পরিমাপ করে না। ১০টি বড় ছবির লিঙ্ক থাকা একটি নিউজলেটার সহজেই এই সীমার ভেতরে থাকে, যেখানে ভারী ইনলাইন স্টাইলিং এবং এম্বেড করা ইমেজ থাকা একটি মেসেজ তা পারে না।

এই পার্থক্যটি গুরুত্বপূর্ণ কারণ এর সমাধান আলাদা। লিঙ্ক করা ইমেজগুলো ১০২ KB সীমার মধ্যে গণনা করা হয় না, তাই মেসেজ কেটে যাওয়ার কারণ সাধারণত বারবার ব্যবহৃত ইনলাইন স্টাইল, প্রতিটি লিঙ্কে থাকা দীর্ঘ ট্র্যাকিং প্যারামিটার অথবা base64 ডেটা হিসেবে এম্বেড করা ইমেজ। এম্বেড করা ইমেজগুলো সরিয়ে ফেলা এবং মার্কআপ ছোট করা মেসেজ কেটে যাওয়ার সমস্যার সমাধান করে, আর লিঙ্ক করা ছবিগুলো কম্প্রেস করা লোড টাইম উন্নত করে।

ইমেলের জন্য প্রস্তাবিত ইমেজের সাইজ

ইমেল বডিটি ৬০০ পিক্সেল চওড়া করে ডিজাইন করুন এবং হাই-ডেনসিটি স্ক্রিনের জন্য ১২০০ পিক্সেলে ইমেজ এক্সপোর্ট করুন। ৬০০ পিক্সেলের এই স্ট্যান্ডার্ডটি বছরের পর বছর ধরে চলে আসছে কারণ এটি কোনো হরিজন্টাল স্ক্রলিং ছাড়াই প্রতিটি ডেস্কটপ ক্লায়েন্টের প্রিভিউ প্যানে খাপ খেয়ে যায়।

এক্সপোর্ট উইডথ দ্বিগুণ করলেই হাই-ডেনসিটি ডিসপ্লেগুলোর কাজ হয়ে যায় এবং এর বেশি করার প্রয়োজন নেই। ডিসপ্লে উইডথের ৩ গুণ সাইজে এক্সপোর্ট করলে ফাইলের ওজন এমনভাবে বৃদ্ধি পায় যা কোনো ইমেল ক্লায়েন্ট আরও ভালোভাবে রেন্ডার করতে পারে না, এবং ইমেলই একমাত্র মাধ্যম যেখানে প্রতিটি কিলোবাইট ফোনে ডাউনলোড করতে হয়।

ইমেলের ক্ষেত্রে WebP কেন এখনও ভুল পছন্দ

WebP-এর জন্য ইমেল ক্লায়েন্ট সাপোর্ট এখনও অসঙ্গতিপূর্ণ, এবং বিশেষ করে Outlook-এর ক্ষেত্রে এটি অনিশ্চিত থাকে। ইমেল এমন কয়েকটি জায়গার মধ্যে একটি যেখানে নিরাপদ ও পুরোনো ফরম্যাটগুলো ব্যবহার করাই সঠিক সিদ্ধান্ত।

সব ওয়েব ব্রাউজারই WebP সাপোর্ট করে, যা দেখে মানুষ ধরে নেয় ইমেল ক্লায়েন্টগুলোও তা করবে। ডেস্কটপ Outlook সম্পূর্ণ ভিন্ন একটি ইঞ্জিন দিয়ে মেসেজ রেন্ডার করে এবং বেশ কয়েকটি কর্পোরেট মেল সিস্টেম অপরিচিত ফরম্যাটগুলো বাদ দিয়ে দেয় বা সেগুলোতে ব্যর্থ হয়। একটি নিউজলেটারে ভেঙে যাওয়া ইমেজ WebP-এর ৩০ শতাংশ ফাইল সাশ্রয়ের চেয়ে অনেক বেশি ক্ষতিকর, তাই এখানে JPG এবং PNG-ই সঠিক পছন্দ।

ইমেলের ভেতরে ফরম্যাট নির্বাচন

ছবির জন্য JPG এবং লোগো, বাটন ও টেক্সটযুক্ত যেকোনো কিছুর জন্য PNG ব্যবহার করুন। নিয়মটি ওয়েবের মতোই এবং এর ফলাফল এখানে আরও বেশি দৃশ্যমান কারণ ইমেল ইমেজগুলো প্রায়শই ছোট হয়।

• পণ্যের ছবি, হেডার ইমেজ এবং যেকোনো বাস্তব দৃশ্যের ছবির জন্য JPG।
• লোগো, আইকন এবং ফ্ল্যাট কালার বা স্পষ্ট টেক্সট এজযুক্ত গ্রাফিক্সের জন্য PNG।
• অ্যানিমেটেড GIF কেবল তখনই ব্যবহার করুন যখন অ্যানিমেশনটির কোনো অর্থ থাকে এবং এটি ১ MB-এর নিচে রাখুন।
• WebP এবং AVIF এড়িয়ে চলুন, কারণ কোনোটিই সব মেল ক্লায়েন্টে নির্ভরযোগ্যভাবে রেন্ডার হয় না।
• SVG সম্পূর্ণ এড়িয়ে চলুন, কারণ বেশিরভাগ ইমেল ক্লায়েন্ট নিরাপত্তার কারণে এটি ব্লক করে দেয়।

অনেক ক্লায়েন্টে ইমেজ ডিফল্টভাবে ব্লক থাকে

অনেক প্রাপক আপনার ইমেলটি ইমেজ বন্ধ থাকা অবস্থায় দেখেন, তাই মেসেজটি টেক্সট হিসেবেও কার্যকর হতে হবে। কর্পোরেট মেল সিস্টেম এবং প্রাইভেসি সচেতন ব্যবহারকারী উভয়ই রিমোট ইমেজ ব্লক করে রাখেন যতক্ষণ না পাঠক সেগুলো লোড করার সিদ্ধান্ত নেন।

প্রতিটি ইমেজে alt টেক্সট লিখুন, কারণ ইমেজ ব্লক থাকলে তার পরিবর্তে এই টেক্সটটি প্রদর্শিত হয়। অফার, ডেডলাইন বা কল টু অ্যাকশন সহ কোনো জরুরি তথ্য কখনোই কেবল ইমেজের ভেতরে রাখবেন না। সম্পূর্ণ একটি বড় গ্রাফিক্স দিয়ে তৈরি নিউজলেটার তালিকার একটি বড় অংশের কাছে কেবল একটি খালি চতুর্ভুজ হিসেবে দেখা যাবে এবং এটি স্ক্রিন রিডারের ক্ষেত্রেও খারাপ পারফর্ম করে।

কীভাবে নিউজলেটার ইমেজ প্রস্তুত করবেন

নিউজলেটার দ্রুত লোড হওয়ার এবং পড়ার উপযোগী রাখার জন্য এই ৭টি ধাপ অনুসরণ করুন।

1. ইমেলটি ৬০০ পিক্সেল চওড়া করে ডিজাইন করুন, যা প্রতিটি ডেস্কটপ ক্লায়েন্ট স্ক্রলিং ছাড়াই রেন্ডার করে।
2. প্রতিটি ইমেজ লেআউটে ঠিক যতটুকু জায়গা নেবে সেই অনুযায়ী ক্রপ করুন।
3. ডিসপ্লে উইডথের দ্বিগুণ সাইজে রিসাইজ করুন, তার বেশি নয়।
4. ছবির জন্য JPG অথবা টেক্সটযুক্ত গ্রাফিক্সের জন্য PNG-তে কনভার্ট করুন।
5. প্রতিটি ফাইল ১০০ KB-এর নিচের টার্গেটে কম্প্রেস করুন।
6. ইমেজগুলো মেসেজে এম্বেড করার পরিবর্তে আপনার সেন্ডিং প্ল্যাটফর্ম বা নিজস্ব সার্ভারে হোস্ট করুন।
7. ক্যাম্পেইন শিডিউল করার আগে Gmail, Outlook এবং একটি ফোনে টেস্ট পাঠান।

যেকোনো একটি ইমেজের চেয়ে সম্পূর্ণ ইমেলের ওজন বেশি গুরুত্বপূর্ণ

ইমেজ সহ সম্পূর্ণ মেসেজটি ৬০০ KB-এর নিচে রাখুন, কারণ গ্রাহকরা ফোনে নিউজলেটার খোলেন, প্রায়শই দুর্বল কানেকশনে। একটি ৫ MB-এর নিউজলেটার ধীরে লোড হয় এবং রেন্ডার হওয়ার আগেই বন্ধ করে দেওয়া হয়।

যেকোনো কিছু কম্প্রেস করার আগে ইমেজগুলো গণনা করুন। প্রতিটি ১০০ KB করে ১২টি ছবি থাকা একটি নিউজলেটারের সাইজ ইতিমধ্যেই ১.২ MB হয়ে যায়, যা নির্দেশ করে যে লেআউটে ইমেজের সাইজ ছোট করার চেয়ে ইমেজের সংখ্যা কমানো প্রয়োজন। ইমেজের সংখ্যা কমালে সাধারণত পারফরম্যান্স এবং পড়ার যোগ্যতা উভয়ই উন্নত হয়, কারণ দীর্ঘ ও ইমেজ-ভারী নিউজলেটারগুলো মানুষ শেষ পর্যন্ত খুব কমই পড়ে।

ডার্ক মোড ইমেজের চেহারা পরিবর্তন করে দেয়

বেশ কয়েকটি ক্লায়েন্ট ডার্ক মোডে রঙ উল্টে দেয় বা সামঞ্জস্য করে, এবং সাদা ব্যাকগ্রাউন্ডের একটি লোগো ডার্ক মেসেজে একটি উজ্জ্বল চতুর্ভুজ হয়ে ওঠে। পাঠানোর আগে প্রতিটি ক্যাম্পেইন ডার্ক মোডে টেস্ট করুন।

লোগো এবং আইকনের জন্য ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড সহ PNG ফাইল ব্যবহার করুন যাতে সেগুলো যেকোনো রঙের ওপর সঠিকভাবে বসে। সাদা ব্যাকগ্রাউন্ডের ইমেজ এড়িয়ে চলুন যেখানে ডিজাইনটি ধরে নেয় যে পেছনের অংশটিও সাদা হবে। ছবিগুলো সাধারণত নিরাপদ থাকে, কারণ ক্লায়েন্টরা ছবির কনটেন্ট খুব কমই পরিবর্তন করে, তবে ফ্ল্যাট গ্রাফিক্স এবং টেক্সট ইমেজগুলোর ক্ষেত্রেই ডার্ক মোডের সমস্যাগুলো দেখা দেয়।

রেটিনা স্ক্রিন এবং ইমেজের স্পষ্টতা

ডিসপ্লে উইডথের দ্বিগুণ সাইজে এক্সপোর্ট করুন যাতে ইমেজগুলো হাই-ডেনসিটি স্ক্রিনে স্পষ্ট থাকে, তারপর অতিরিক্ত পিক্সেল সামাল দিতে আরও বেশি কম্প্রেস করুন। কোয়ালিটি ৭০-এ থাকা একটি ১২০০ পিক্সেলের ইমেজ সাধারণত কোয়ালিটি ৯৫-এ থাকা একটি ৬০০ পিক্সেলের ইমেজের চেয়ে ভালো দেখায় এবং এর ওজনও কম হয়।

মার্কআপে width অ্যাট্রিবিউটটি ফাইল সাইজের পরিবর্তে ডিসপ্লে সাইজে সেট করুন, যাতে ক্লায়েন্ট অতিরিক্ত ডিটেইল ব্যবহার করার পাশাপাশি ইমেজটি ৬০০ পিক্সেলে রেন্ডার করে। width অ্যাট্রিবিউটটি বাদ দিলে কিছু ক্লায়েন্ট ইমেজটিকে তার সম্পূর্ণ পিক্সেল সাইজে প্রদর্শন করে, যা ডেস্কটপে লেআউটটি ভেঙে দেয়।

পাঠানোর আগে ক্যাম্পেইন পরীক্ষা করা

• Gmail, Outlook, Apple Mail এবং অন্তত একটি ফোনে টেস্ট পাঠান।
• ইমেজ ব্লক থাকা অবস্থায় টেস্টটি দেখুন এবং নিশ্চিত করুন যে মেসেজটি তখনও অর্থপূর্ণ আছে কিনা।
• নিশ্চিত করুন যে মেসেজটি Gmail-এ কেটে যাচ্ছে না, যা কেটে যাওয়া অংশে একটি View entire message লিঙ্ক দেখায়।
• নিশ্চিত করুন যে প্রতিটি ইমেজে এটি কী প্রদর্শন করছে তা বর্ণনা করে alt টেক্সট রয়েছে।
• ডার্ক মোড রেন্ডারিং পরীক্ষা করুন, বিশেষ করে লোগো এবং ফ্ল্যাট গ্রাফিক্সের জন্য।
• সব ইমেজের মোট ওজন যোগ করুন এবং নিশ্চিত করুন যে এটি ৬০০ KB-এর নিচে রয়েছে।

একবারে একটি ক্যাম্পেইন প্রস্তুত করা

নিউজলেটারের প্রতিটি ইমেজ একসাথে প্রসেস করুন যাতে পুরো ক্যাম্পেইনটি একটি নির্দিষ্ট স্পেসিফিকেশন শেয়ার করে। একটি নিউজলেটারে সাধারণত ৫ থেকে ১৫টি ইমেজ থাকে এবং একজন সাপ্তাহিক প্রেরক বছরে শত শত ইমেজ প্রস্তুত করেন।

একবার উইডথ এবং KB টার্গেট সেট করুন, ইমেজগুলো ড্রপ করুন এবং প্রতিটি ফাইল সেই অনুযায়ী ম্যাচ হয়ে যাবে। সবকিছু আপনার নিজস্ব প্রসেসরে আপনার ব্রাউজারের ভেতরে চলে, তাই ঘোষণা না করা অফার, ইমেজ হিসেবে রেন্ডার করা সাবস্ক্রাইবার তালিকা এবং ক্লায়েন্টের ক্যাম্পেইনের কাজ কখনোই কোনো সার্ভারে পৌঁছায় না। কোনো এজেন্সির জন্য ক্যাম্পেইন লঞ্চের প্রস্তুতি নেওয়ার সময়, ফাইলগুলো লোকাল রাখা এমন কোনো তথ্য ফাঁস হওয়া এড়ায় যা কোনো কম্প্রেশন সাশ্রয় দিয়েও পূরণ করা সম্ভব নয়।

প্রতিটি পুনরাবৃত্ত লেআউট ব্লকের জন্য (যেমন হেডার, ২ কলামের প্রোডাক্ট রো এবং ফুটার লোগো) সঠিক সাইজের প্লেসহোল্ডারের একটি টেমপ্লেট ফোল্ডার রাখুন। সাপ্তাহিক প্রেরকরা একই ৪ বা ৫টি শেপ অনির্দিষ্টকালের জন্য পুনরায় ব্যবহার করেন এবং একটি বিদ্যমান স্পেসিফিকেশনের সাথে নতুন আর্টওয়ার্ক মেলানো প্রতিটি ক্যাম্পেইনের জন্য নতুন করে ডাইমেনশন নির্ধারণ করার চেয়ে কম সময় নেয়।