اي ميل مارڪيٽنگ ۽ خودڪار

توهان جي HTML اي ميل ۾ ريٽينا ڊسپليز لاءِ هاءِ ريزوليوشن تصويرون ڪيئن استعمال ڪجي

ريٽنا ڊسپلي هڪ مارڪيٽنگ اصطلاح آهي جيڪو استعمال ڪيو ويندو آهي ايپل هڪ اعلي ريزوليوشن ڊسپلي کي بيان ڪرڻ لاءِ جنهن ۾ پکسل جي کثافت ايتري وڌيڪ آهي جو انساني اک عام ڏسڻ جي فاصلي تي انفرادي پکسلز ۾ فرق ڪرڻ جي قابل ناهي. ريٽنا ڊسپلي ۾ عام طور تي 300 پکسلز في انچ جي پکسل کثافت هوندي آهي (پي پي) يا وڌيڪ، جيڪو 72 ppi جي پکسل کثافت سان معياري ڊسپلي کان تمام گهڻو وڌيڪ آهي.

ريٽنا ڊسپلي هاڻي ڊسپلي، ليپ ٽاپ، موبائل ڊوائيسز، ۽ ٽيبلٽس لاء ڪافي مکيه وهڪرو آهن. ڪيترائي ٺاھيندڙ ھاڻي پيش ڪن ٿا اعلي ريزوليوشن ڊسپلي سان پکسل کثافت جيڪي ايپل جي ريٽينا ڊسپلي مان ملن يا ان کان وڌيڪ آھن.

ريٽنا ڊسپلي لاءِ اعليٰ ريزوليوشن تصوير ڏيکارڻ لاءِ CSS

توھان ھيٺ ڏنل سي ايس ايس ڪوڊ استعمال ڪري سگھو ٿا ھڪڙي ريٽينا ڊسپلي لاءِ اعليٰ ريزوليوشن تصوير لوڊ ڪرڻ لاءِ. هي ڪوڊ ڊوائيس جي پکسل کثافت کي ڳولي ٿو ۽ تصوير کي لوڊ ڪري ٿو @ 2x ريٽنا ڊسپليز لاءِ suffix، جڏهن ته ٻين ڊسپليز لاءِ معياري-ريزوليوشن واري تصوير لوڊ ڪندي.

@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 سپورٽ اي ميل ڪلائنٽ جي لحاظ کان مختلف ٿي سگھي ٿي، تنهنڪري اهو ضروري آهي ته توهان جي اي ميل کي ڪيترن ئي ڪلائنٽ تي جانچڻ کي يقيني بڻائڻ لاءِ ته 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 اي ميل ڪوڊ ڪرڻ لاءِ جيڪو صحيح طريقي سان تصوير ڏيکاريندو ريٽينا ڊسپلي لاءِ بهتر ڪيل قرارداد تي. هتي ڪيئن آهي:

  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)]> ھڪڙو مشروط تبصرو آھي جيڪو Microsoft Outlook جي مخصوص ورزن کي ھدف ڪرڻ لاءِ استعمال ڪيو ويندو آھي، جيڪو HTML اي ميلون پيش ڪرڻ لاءِ Microsoft Word استعمال ڪندو آھي. Microsoft Word جي HTML رينڊرنگ انجڻ ٻين اي ميل ڪلائنٽ ۽ ويب برائوزرن کان بلڪل مختلف ٿي سگهي ٿي، تنهن ڪري ان کي اڪثر خاص هينڊلنگ جي ضرورت هوندي آهي. جي

(gte mso 9) حالت چيڪ ڪري ٿي ته Microsoft Office ورزن 9 کان وڏو يا برابر آهي، جيڪو Microsoft Office 2000 سان ملندو آهي. |(IE) حالت چيڪ ڪري ٿو ته ڪلائنٽ انٽرنيٽ ايڪسپلورر آهي، جيڪو اڪثر Microsoft Outlook پاران استعمال ڪيو ويندو آهي.

HTML Email Retina Display Optimized Images سان

هتي هڪ جوابي 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 تصوير لاءِ حوالو مهيا ڪرڻ لاءِ متن.
  • تصويرن جي معيار کي سمجھوتو ڪرڻ کان سواءِ فائل سائيز کي گھٽائڻ لاءِ ويب لاءِ تصويرن کي بهتر بڻايو. اهو استعمال ڪري سگھي ٿو تصوير سينگار اوزار، تصوير ۾ استعمال ٿيل رنگن جي تعداد کي گھٽائڻ، ۽ تصوير کي ان جي بھترين طول و عرض ۾ تبديل ڪرڻ کان اڳ ان کي اي ميل تي اپ لوڊ ڪرڻ.
  • وڏي پس منظر واري تصويرن کان پاسو ڪريو جيڪي اي ميل لوڊ وقت کي سست ڪري سگھن ٿيون.
  • متحرڪ GIFs فائل جي سائيز ۾ جامد تصويرن کان وڏي ٿي سگھي ٿي ڇاڪاڻ ته اينيميشن ٺاهڻ لاءِ گھڻن فريمن جي ضرورت آھي، پڪ ڪريو ته انھن کي 1 کان گھٽ رکو Mb.

Douglas Karr

Douglas Karr جو CMO آهي OpenINSIGHTS ۽ جو باني Martech Zone. ڊگلس ڪيترن ئي ڪامياب MarTech startups جي مدد ڪئي آهي، مارٽيڪ حاصلات ۽ سيڙپڪاري ۾ 5 بلين ڊالر کان وڌيڪ جي محنت ۾ مدد ڪئي آهي، ۽ انهن جي سيلز ۽ مارڪيٽنگ جي حڪمت عملي کي لاڳو ڪرڻ ۽ خودڪار ڪرڻ ۾ ڪمپنين جي مدد ڪرڻ جاري آهي. ڊگلس هڪ بين الاقوامي طور تي تسليم ٿيل ڊجيٽل ٽرانسفارميشن ۽ مار ٽيڪ ماهر ۽ اسپيڪر آهي. ڊگلس هڪ ڊمي جي گائيڊ ۽ ڪاروباري قيادت جي ڪتاب جو شايع ٿيل ليکڪ پڻ آهي.

لاڳاپيل مقالات

مٿي تي ڪلڪ ڪري بٽڻ
بند

Adblock جو پتو لڳايو ويو

Martech Zone توهان کي هي مواد بغير ڪنهن قيمت تي مهيا ڪرڻ جي قابل آهي ڇو ته اسان اسان جي سائيٽ کي اشتهارن جي آمدني، الحاق لنڪس، ۽ اسپانسرشپ ذريعي رقم ڪريون ٿا. اسان جي تعريف ڪنداسين جيڪڏهن توهان پنهنجي اشتهار بلاڪ ڪندڙ کي هٽائي ڇڏيو جيئن توهان اسان جي سائيٽ کي ڏسو.