ईमेल विपणन और स्वचालन

अपने HTML ईमेल में रेटिना डिस्प्ले के लिए उच्च-रिज़ॉल्यूशन छवियों का उपयोग कैसे करें

रेटिना डिस्प्ले एक मार्केटिंग शब्द है जिसका प्रयोग किया जाता है Apple एक उच्च-रिज़ॉल्यूशन डिस्प्ले का वर्णन करने के लिए जिसमें पिक्सेल घनत्व इतना अधिक होता है कि मानव आँख एक विशिष्ट देखने की दूरी पर अलग-अलग पिक्सेल को अलग करने में असमर्थ होती है। एक रेटिना डिस्प्ले में आमतौर पर 300 पिक्सेल प्रति इंच की पिक्सेल घनत्व होती है (पीपीआई) या उच्चतर, जो 72 पीपीआई के पिक्सेल घनत्व वाले मानक डिस्प्ले से काफी अधिक है।

रेटिना डिस्प्ले अब डिस्प्ले, लैपटॉप, मोबाइल डिवाइस और टैबलेट के लिए काफी मुख्यधारा हैं। कई निर्माता अब पिक्सेल घनत्व के साथ उच्च-रिज़ॉल्यूशन डिस्प्ले पेश करते हैं जो Apple के रेटिना डिस्प्ले से मेल खाते हैं या उससे अधिक हैं।

सीएसएस एक रेटिना डिस्प्ले के लिए एक उच्च रिज़ॉल्यूशन छवि प्रदर्शित करने के लिए

रेटिना डिस्प्ले के लिए उच्च-रिज़ॉल्यूशन छवि लोड करने के लिए आप निम्न सीएसएस कोड का उपयोग कर सकते हैं। यह कोड डिवाइस के पिक्सेल घनत्व का पता लगाता है और छवि को इसके साथ लोड करता है @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');
}

एक अन्य तरीका वेक्टर ग्राफिक्स या का उपयोग करना है एसवीजी छवियां, जो गुणवत्ता खोए बिना किसी भी रिज़ॉल्यूशन को स्केल कर सकती हैं। यहाँ एक उदाहरण है:

<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> टैग। viewBox विशेषता एसवीजी छवि के आयामों को परिभाषित करती है, जबकि xmlns विशेषता एसवीजी के लिए एक्सएमएल नेमस्पेस निर्दिष्ट करती है।

RSI max-width संपत्ति पर सेट है div तत्व यह सुनिश्चित करने के लिए कि एसवीजी छवि इस मामले में 300px की अधिकतम चौड़ाई तक उपलब्ध स्थान को फिट करने के लिए स्वचालित रूप से मापती है। यह सुनिश्चित करने के लिए सबसे अच्छा अभ्यास है कि एसवीजी छवियां सभी उपकरणों और ईमेल क्लाइंट पर ठीक से प्रदर्शित हों।

नोट: एसवीजी समर्थन ईमेल क्लाइंट के आधार पर भिन्न हो सकता है, इसलिए यह सुनिश्चित करने के लिए कि एसवीजी छवि ठीक से प्रदर्शित हो रही है, अपने ईमेल का कई ग्राहकों पर परीक्षण करना महत्वपूर्ण है।

रेटिना डिस्प्ले के लिए 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 ईमेल को कोड करना संभव है जो रेटिना डिस्प्ले के लिए अनुकूलित रिज़ॉल्यूशन पर एक छवि को ठीक से प्रदर्शित करेगा। ऐसे:

  1. एक उच्च-रिज़ॉल्यूशन छवि बनाएं जो उस वास्तविक छवि के आकार से दोगुनी हो जिसे आप ईमेल में प्रदर्शित करना चाहते हैं। उदाहरण के लिए, यदि आप 300×200 छवि प्रदर्शित करना चाहते हैं, तो 600×400 छवि बनाएं।
  2. के साथ उच्च-रिज़ॉल्यूशन छवि को सहेजें @2x प्रत्यय। उदाहरण के लिए, यदि आपकी मूल छवि है image.png, उच्च-रिज़ॉल्यूशन संस्करण को इस रूप में सहेजें छवि@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 Word का HTML रेंडरिंग इंजन अन्य ईमेल क्लाइंट और वेब ब्राउज़र से काफी अलग हो सकता है, इसलिए इसे अक्सर विशेष हैंडलिंग की आवश्यकता होती है।

(gte mso 9) हालत की जाँच करता है कि क्या Microsoft Office संस्करण 9 से अधिक या उसके बराबर है, जो Microsoft Office 2000 से मेल खाता है। |(IE) हालत की जाँच करता है कि क्लाइंट इंटरनेट एक्सप्लोरर है, जो अक्सर माइक्रोसॉफ्ट आउटलुक द्वारा उपयोग किया जाता है।

एचटीएमएल ईमेल रेटिना प्रदर्शन अनुकूलित छवियों के साथ

यहाँ एक उत्तरदायी 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.

Douglas Karr

Douglas Karr के सीएमओ हैं खुली अंतर्दृष्टि और के संस्थापक Martech Zone. डगलस ने दर्जनों सफल मार्टेक स्टार्टअप्स की मदद की है, मार्टेक अधिग्रहणों और निवेशों में $5 बिलियन से अधिक की उचित परिश्रम में सहायता की है, और कंपनियों को उनकी बिक्री और विपणन रणनीतियों को लागू करने और स्वचालित करने में सहायता करना जारी रखा है। डगलस एक अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त डिजिटल परिवर्तन और मार्टेक विशेषज्ञ और वक्ता हैं। डगलस डमी गाइड और बिजनेस लीडरशिप पुस्तक के प्रकाशित लेखक भी हैं।

संबंधित आलेख

शीर्ष पर वापस करने के लिए बटन
समापन

पता लगाया गया

Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।