আপনার এইচটিএমএল ইমেলে রেটিনা প্রদর্শনের জন্য উচ্চ-রেজোলিউশন চিত্রগুলি কীভাবে ব্যবহার করবেন
রেটিনা প্রদর্শন একটি বিপণন শব্দ দ্বারা ব্যবহৃত হয় আপেল একটি উচ্চ-রেজোলিউশন ডিসপ্লে বর্ণনা করতে যার পিক্সেল ঘনত্ব যথেষ্ট বেশি যে মানুষের চোখ একটি সাধারণ দর্শন দূরত্বে পৃথক পিক্সেলগুলিকে আলাদা করতে অক্ষম। একটি রেটিনা ডিসপ্লেতে সাধারণত প্রতি ইঞ্চিতে 300 পিক্সেলের একটি পিক্সেল ঘনত্ব থাকে (PPI) বা উচ্চতর, যা 72 পিপিআই এর পিক্সেল ঘনত্ব সহ একটি আদর্শ প্রদর্শনের চেয়ে উল্লেখযোগ্যভাবে বেশি।
রেটিনা ডিসপ্লেগুলি এখন ডিসপ্লে, ল্যাপটপ, মোবাইল ডিভাইস এবং ট্যাবলেটগুলির জন্য বেশ মূলধারার। অনেক নির্মাতারা এখন পিক্সেল ঘনত্বের সাথে উচ্চ-রেজোলিউশনের ডিসপ্লে অফার করে যা Apple এর রেটিনা ডিসপ্লের সাথে মেলে বা তার বেশি।
একটি রেটিনা ডিসপ্লের জন্য একটি উচ্চতর রেজোলিউশন ইমেজ প্রদর্শনের জন্য CSS
আপনি একটি রেটিনা ডিসপ্লের জন্য একটি উচ্চ-রেজোলিউশন ইমেজ লোড করতে নিম্নলিখিত CSS কোড ব্যবহার করতে পারেন৷ এই কোডটি ডিভাইসের পিক্সেল ঘনত্ব সনাক্ত করে এবং এর সাথে ইমেজ লোড করে @2x রেটিনা ডিসপ্লের জন্য প্রত্যয়, অন্যান্য ডিসপ্লের জন্য স্ট্যান্ডার্ড-রেজোলিউশন ইমেজ লোড করার সময়।
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}
আরেকটি পদ্ধতি হল ভেক্টর গ্রাফিক্স বা ব্যবহার করা করা SVG ছবি, যা গুণমান না হারিয়ে যেকোন রেজোলিউশনে স্কেল করতে পারে। এখানে একটি উদাহরণ:
<div style="max-width: 300px;">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
এই উদাহরণে, SVG কোডটি ব্যবহার করে সরাসরি HTML ইমেলে এম্বেড করা হয়েছে <svg>
ট্যাগ দ্য viewBox
বৈশিষ্ট্য SVG চিত্রের মাত্রা নির্ধারণ করে, যখন xmlns
বৈশিষ্ট্য SVG-এর জন্য XML নামস্থান নির্দিষ্ট করে।
সার্জারির max-width
সম্পত্তি সেট করা হয় div
এলিমেন্ট নিশ্চিত করতে যে SVG ইমেজ স্বয়ংক্রিয়ভাবে উপলব্ধ স্থানের সাথে মানানসই হয়, এই ক্ষেত্রে সর্বাধিক প্রস্থ 300px পর্যন্ত। সমস্ত ডিভাইস এবং ইমেল ক্লায়েন্টগুলিতে SVG ছবিগুলি সঠিকভাবে প্রদর্শিত হয় তা নিশ্চিত করার জন্য এটি একটি সর্বোত্তম অনুশীলন৷
বিঃদ্রঃ: এসভিজি সমর্থন ইমেল ক্লায়েন্টের উপর নির্ভর করে পরিবর্তিত হতে পারে, তাই SVG ইমেজ সঠিকভাবে প্রদর্শিত হয়েছে তা নিশ্চিত করতে একাধিক ক্লায়েন্টে আপনার ইমেল পরীক্ষা করা গুরুত্বপূর্ণ।
রেটিনা প্রদর্শনের জন্য HTML ইমেল কোডিং করার আরেকটি উপায় হল ব্যবহার করা srcset
. srcset অ্যাট্রিবিউট ব্যবহার করে আপনি রেটিনা ডিসপ্লেগুলির জন্য উচ্চ-রেজোলিউশনের ছবিগুলি প্রদান করতে পারবেন এবং নিশ্চিত করুন যে ছবিগুলি নিম্ন-রেজোলিউশন ডিভাইসগুলির জন্য সঠিকভাবে মাপ করা হয়েছে।
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
এই উদাহরণে, srcset
বৈশিষ্ট্য দুটি চিত্র উত্স প্রদান করে: image.jpg
600 পিক্সেল বা তার কম রেজোলিউশন সহ ডিভাইসগুলির জন্য, এবং image@2x.jpg
1200 পিক্সেল বা তার বেশি রেজোলিউশন সহ ডিভাইসগুলির জন্য। দ্য 600w
এবং 1200w
বর্ণনাকারীরা ছবিগুলির আকার পিক্সেলে নির্দিষ্ট করে, যা ব্রাউজারকে ডিভাইসের রেজোলিউশনের উপর ভিত্তি করে কোন ছবি ডাউনলোড করতে হবে তা নির্ধারণ করতে সাহায্য করে।
সব ইমেল ক্লায়েন্ট সমর্থন করে না srcset
বৈশিষ্ট্য জন্য সমর্থন স্তর srcset
ইমেল ক্লায়েন্টের উপর নির্ভর করে ব্যাপকভাবে পরিবর্তিত হতে পারে, তাই ছবিগুলি সঠিকভাবে প্রদর্শিত হয়েছে তা নিশ্চিত করতে একাধিক ক্লায়েন্টে আপনার ইমেলগুলি পরীক্ষা করা গুরুত্বপূর্ণ।
রেটিনা প্রদর্শনের জন্য অপ্টিমাইজ করা ইমেলে ইমেজের জন্য HTML
এটি একটি প্রতিক্রিয়াশীল HTML ইমেল কোড করা সম্ভব যা রেটিনা প্রদর্শনের জন্য অপ্টিমাইজ করা রেজোলিউশনে একটি চিত্র সঠিকভাবে প্রদর্শন করবে। এখানে কিভাবে:
- একটি উচ্চ-রেজোলিউশন চিত্র তৈরি করুন যা আপনি ইমেলে যে চিত্রটি প্রদর্শন করতে চান তার দ্বিগুণ। উদাহরণস্বরূপ, আপনি যদি একটি 300×200 চিত্র প্রদর্শন করতে চান, একটি 600×400 চিত্র তৈরি করুন।
- এর সাথে হাই-রেজোলিউশনের ছবি সংরক্ষণ করুন @2x প্রত্যয়. উদাহরণস্বরূপ, যদি আপনার আসল ছবি হয় image.png, উচ্চ-রেজোলিউশন সংস্করণ হিসাবে সংরক্ষণ করুন image@2x.png.
- আপনার HTML ইমেল কোডে, চিত্রটি প্রদর্শন করতে নিম্নলিখিত কোডটি ব্যবহার করুন:
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
<img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
একটি শর্তসাপেক্ষ মন্তব্য যা Microsoft Outlook এর নির্দিষ্ট সংস্করণকে লক্ষ্য করতে ব্যবহৃত হয়, যা HTML ইমেল রেন্ডার করতে Microsoft Word ব্যবহার করে। মাইক্রোসফ্ট ওয়ার্ডের এইচটিএমএল রেন্ডারিং ইঞ্জিন অন্যান্য ইমেল ক্লায়েন্ট এবং ওয়েব ব্রাউজার থেকে বেশ আলাদা হতে পারে, তাই এটি প্রায়শই বিশেষ পরিচালনার প্রয়োজন হয়। দ্য
(gte mso 9)
শর্ত চেক করে যে মাইক্রোসফ্ট অফিস সংস্করণটি 9 এর চেয়ে বড় বা সমান, যা মাইক্রোসফ্ট অফিস 2000 এর সাথে মিলে যায়। |(IE)
ক্লায়েন্ট ইন্টারনেট এক্সপ্লোরার কিনা তা পরীক্ষা করে, যা প্রায়শই Microsoft Outlook দ্বারা ব্যবহৃত হয়।
রেটিনা ডিসপ্লে অপ্টিমাইজ করা ছবি সহ HTML ইমেল
এখানে একটি প্রতিক্রিয়াশীল HTML ইমেল কোডের একটি উদাহরণ যা রেটিনা প্রদর্শনের জন্য অপ্টিমাইজ করা একটি রেজোলিউশনে একটি চিত্র প্রদর্শন করে:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Retina-Optimized Email</title>
<style>
/* Mobile-specific styles */
@media only screen and (max-width: 480px) {
/* Add mobile-specific styles here */
}
/* High-density display styles */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
img {
display: block;
width: 300px !important;
height: 200px !important;
max-width: 100%;
height: auto;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 40px 0 30px 0;">
<img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
<img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
রেটিনা ডিসপ্লে ইমেজ টিপস
রেটিনা প্রদর্শনের জন্য অপ্টিমাইজ করা ছবিগুলির জন্য আপনার HTML ইমেলগুলি অপ্টিমাইজ করার জন্য এখানে কিছু অতিরিক্ত টিপস রয়েছে:
- সর্বদা আপনার ইমেজ ট্যাগ ব্যবহার অন্তর্ভুক্ত আছে তা নিশ্চিত করুন
alt
চিত্রের জন্য প্রসঙ্গ প্রদান করার জন্য পাঠ্য। - ছবির গুণমানে আপস না করে ফাইলের আকার কমাতে ওয়েবের জন্য ছবি অপ্টিমাইজ করুন। এই ব্যবহার অন্তর্ভুক্ত করতে পারেন ইমেজ কম্প্রেশন টুলস, ইমেজে ব্যবহৃত রঙের সংখ্যা হ্রাস করে এবং ইমেলে আপলোড করার আগে ইমেজটিকে এর সর্বোত্তম মাত্রায় আকার পরিবর্তন করে।
- বড় ব্যাকগ্রাউন্ড ছবিগুলি এড়িয়ে চলুন যা ইমেল লোডের সময় কমিয়ে দিতে পারে।
- অ্যানিমেশন তৈরি করতে একাধিক ফ্রেমের প্রয়োজনের কারণে অ্যানিমেটেড জিআইএফগুলি স্ট্যাটিক ইমেজের চেয়ে ফাইলের আকারে বড় হতে পারে, সেগুলিকে 1-এর কম রাখতে ভুলবেন না। Mb.