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