ای میل مارکیٹنگ اور آٹومیشن

اپنے HTML ای میل میں ریٹنا ڈسپلے کے لیے ہائی ریزولوشن امیجز کا استعمال کیسے کریں۔

ریٹنا ڈسپلے ایک مارکیٹنگ کی اصطلاح ہے جسے استعمال کیا جاتا ہے۔ ایپل ایک ہائی ریزولوشن ڈسپلے کی وضاحت کرنے کے لیے جس میں پکسل کی کثافت اتنی زیادہ ہوتی ہے کہ انسانی آنکھ دیکھنے کے مخصوص فاصلے پر انفرادی پکسلز کی تمیز کرنے سے قاصر ہے۔ ریٹنا ڈسپلے میں عام طور پر پکسل کثافت 300 پکسلز فی انچ ہوتی ہے (پیپیآئ) یا اس سے زیادہ، جو 72 ppi کی پکسل کثافت والے معیاری ڈسپلے سے نمایاں طور پر زیادہ ہے۔

ریٹنا ڈسپلے اب ڈسپلے، لیپ ٹاپ، موبائل ڈیوائسز اور ٹیبلٹس کے لیے کافی مرکزی دھارے میں شامل ہیں۔ بہت سے مینوفیکچررز اب پکسل کثافت کے ساتھ اعلی ریزولوشن ڈسپلے پیش کرتے ہیں جو ایپل کے ریٹنا ڈسپلے سے مماثل یا اس سے زیادہ ہوتے ہیں۔

سی ایس ایس ریٹنا ڈسپلے کے لیے ایک اعلی ریزولوشن امیج ڈسپلے کرنے کے لیے

آپ درج ذیل 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 attribute SVG امیج کے طول و عرض کی وضاحت کرتا ہے، جبکہ xmlns attribute 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 ای میل کلائنٹ کے لحاظ سے وسیع پیمانے پر مختلف ہو سکتے ہیں، اس لیے یہ ضروری ہے کہ متعدد کلائنٹس پر اپنی ای میلز کی جانچ کریں تاکہ یہ یقینی بنایا جا سکے کہ تصاویر صحیح طریقے سے دکھائی گئی ہیں۔

ای میل میں تصاویر کے لیے ایچ ٹی ایم ایل ریٹنا ڈسپلے کے لیے آپٹمائزڈ ہے۔

ایک ریسپانسیو ایچ ٹی ایم ایل ای میل کو کوڈ کرنا ممکن ہے جو ریٹنا ڈسپلے کے لیے موزوں ریزولیوشن میں تصویر کو صحیح طریقے سے ڈسپلے کرے گا۔ یہ ہے طریقہ:

  1. ایک ہائی ریزولیوشن تصویر بنائیں جو اصل تصویر کے سائز سے دوگنی ہو جسے آپ ای میل میں ڈسپلے کرنا چاہتے ہیں۔ مثال کے طور پر، اگر آپ 300×200 کی تصویر دکھانا چاہتے ہیں، تو 600×400 کی تصویر بنائیں۔
  2. ہائی ریزولوشن امیج کو کے ساتھ محفوظ کریں۔ @ 2x لاحقہ. مثال کے طور پر، اگر آپ کی اصل تصویر ہے image.png، ہائی ریزولوشن ورژن کو بطور محفوظ کریں۔ image@2x.png.
  3. اپنے 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)]> ایک مشروط تبصرہ ہے جو مائیکروسافٹ آؤٹ لک کے مخصوص ورژن کو نشانہ بنانے کے لیے استعمال کیا جاتا ہے، جو HTML ای میلز کو پیش کرنے کے لیے Microsoft Word کا استعمال کرتا ہے۔ مائیکروسافٹ ورڈ کا ایچ ٹی ایم ایل رینڈرنگ انجن دوسرے ای میل کلائنٹس اور ویب براؤزرز سے کافی مختلف ہو سکتا ہے، اس لیے اسے اکثر خصوصی ہینڈلنگ کی ضرورت ہوتی ہے۔ دی

(gte mso 9) حالت چیک کرتی ہے کہ آیا مائیکروسافٹ آفس کا ورژن 9 سے بڑا ہے یا اس کے برابر ہے، جو مائیکروسافٹ آفس 2000 کے مساوی ہے۔ |(IE) حالت چیک کرتی ہے کہ آیا کلائنٹ انٹرنیٹ ایکسپلورر ہے، جو اکثر مائیکروسافٹ آؤٹ لک استعمال کرتا ہے۔

ریٹنا ڈسپلے آپٹمائزڈ امیجز کے ساتھ ایچ ٹی ایم ایل ای میل

یہاں ایک ریسپانسیو ایچ ٹی ایم ایل ای میل کوڈ کی ایک مثال ہے جو ریٹنا ڈسپلے کے لیے بہتر کردہ ریزولوشن میں تصویر دکھاتا ہے:

<!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 تصویر کے لیے سیاق و سباق فراہم کرنے کے لیے متن۔
  • تصویر کے معیار پر سمجھوتہ کیے بغیر فائل کے سائز کو کم کرنے کے لیے ویب کے لیے تصاویر کو بہتر بنائیں۔ اس میں استعمال کرنا شامل ہوسکتا ہے۔ تصویر کمپریشن ٹولز، تصویر میں استعمال ہونے والے رنگوں کی تعداد کو کم کرنا، اور ای میل پر اپ لوڈ کرنے سے پہلے تصویر کو اس کے بہترین سائز میں تبدیل کرنا۔
  • ایسی بڑی پس منظر کی تصاویر سے پرہیز کریں جو ای میل لوڈ کے اوقات کو کم کر سکتی ہیں۔
  • اینیمیشن بنانے کے لیے درکار متعدد فریموں کی وجہ سے متحرک GIFs فائل سائز میں جامد امیجز سے بڑے ہو سکتے ہیں، ان کو 1 سے کم رکھنا یقینی بنائیں۔ Mb.

Douglas Karr

Douglas Karr کا سی ایم او ہے۔ OpenINSIGHTS اور کے بانی Martech Zone. Douglas نے درجنوں کامیاب MarTech اسٹارٹ اپس کی مدد کی ہے، Martech کے حصول اور سرمایہ کاری میں $5 بلین سے زیادہ کی مستعدی میں مدد کی ہے، اور کمپنیوں کو ان کی سیلز اور مارکیٹنگ کی حکمت عملیوں کو نافذ کرنے اور خودکار کرنے میں مدد کرنا جاری رکھے ہوئے ہے۔ ڈگلس ایک بین الاقوامی سطح پر تسلیم شدہ ڈیجیٹل تبدیلی اور MarTech ماہر اور اسپیکر ہے۔ ڈگلس ڈمی کی گائیڈ اور بزنس لیڈر شپ کی کتاب کے شائع شدہ مصنف بھی ہیں۔

متعلقہ مضامین

واپس اوپر بٹن
کلوز

ایڈ بلاک کا پتہ چلا

Martech Zone آپ کو یہ مواد بغیر کسی قیمت کے فراہم کرنے کے قابل ہے کیونکہ ہم اپنی سائٹ کو اشتھاراتی آمدنی، ملحقہ لنکس اور اسپانسرشپ کے ذریعے منیٹائز کرتے ہیں۔ اگر آپ ہماری سائٹ کو دیکھتے ہی اپنے ایڈ بلاکر کو ہٹا دیں تو ہم اس کی تعریف کریں گے۔