तपाईंको HTML इमेलमा रेटिना डिस्प्लेका लागि उच्च-रिजोल्युसन छविहरू कसरी प्रयोग गर्ने
रेटिना डिस्प्लेले प्रयोग गरेको मार्केटिङ शब्द हो एप्पल एक उच्च-रिजोल्युसन डिस्प्लेको वर्णन गर्न जसको पिक्सेल घनत्व उच्च छ कि मानव आँखाले विशिष्ट दृश्य दूरीमा व्यक्तिगत पिक्सेलहरू छुट्याउन असमर्थ छ। रेटिना डिस्प्लेमा सामान्यतया ३०० पिक्सेल प्रति इन्चको पिक्सेल घनत्व हुन्छ (पीपीआई) वा उच्च, जुन 72 ppi को पिक्सेल घनत्व भएको मानक प्रदर्शन भन्दा उल्लेखनीय रूपमा उच्च छ।
रेटिना डिस्प्लेहरू अब डिस्प्लेहरू, ल्यापटपहरू, मोबाइल उपकरणहरू र ट्याब्लेटहरूका लागि मुख्यधारा भएका छन्। धेरै निर्माताहरूले अब एप्पलको रेटिना डिस्प्लेसँग मेल खाने वा बढी हुने पिक्सेल घनत्व भएका उच्च-रिजोल्युसन डिस्प्लेहरू प्रस्ताव गर्छन्।
रेटिना डिस्प्लेको लागि उच्च रिजोल्युसन छवि प्रदर्शन गर्न CSS
तपाईंले निम्न CSS कोड प्रयोग गर्न सक्नुहुन्छ रेटिना डिस्प्लेको लागि उच्च-रिजोल्युसन छवि लोड गर्न। यो कोडले यन्त्रको पिक्सेल घनत्व पत्ता लगाउँछ र छवि लोड गर्छ @ १xx रेटिना डिस्प्लेका लागि प्रत्यय, अन्य प्रदर्शनहरूको लागि मानक-रिजोल्युसन छवि लोड गर्दा।
@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
यस अवस्थामा 300px को अधिकतम चौडाइ सम्म, उपलब्ध ठाउँमा SVG छवि मापन स्वतः मिल्छ भनी सुनिश्चित गर्न तत्व। 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
६०० पिक्सेल वा सोभन्दा कम रिजोलुसन भएका यन्त्रहरूका लागि, र image@2x.jpg
१२०० पिक्सेल वा सोभन्दा बढीको रिजोल्युसन भएका यन्त्रहरूको लागि। द 600w
र 1200w
वर्णनकर्ताहरूले पिक्सेलमा छविहरूको आकार निर्दिष्ट गर्दछ, जसले ब्राउजरलाई उपकरणको रिजोल्युसनमा आधारित कुन छवि डाउनलोड गर्ने भनेर निर्धारण गर्न मद्दत गर्दछ।
सबै इमेल क्लाइन्टहरूले समर्थन गर्दैनन् srcset
विशेषता। को लागि समर्थन को स्तर srcset
इमेल क्लाइन्टको आधारमा व्यापक रूपमा भिन्न हुन सक्छ, त्यसैले छविहरू ठीकसँग प्रदर्शन गरिएको छ भनी सुनिश्चित गर्न धेरै क्लाइन्टहरूमा तपाईंको इमेलहरू परीक्षण गर्न महत्त्वपूर्ण छ।
रेटिना डिस्प्लेको लागि इमेलमा छविहरूको लागि HTML अनुकूलित
रेटिना डिस्प्लेका लागि अनुकूलित रिजोल्युसनमा छविलाई राम्रोसँग प्रदर्शन गर्ने उत्तरदायी HTML इमेल कोड गर्न सम्भव छ। यहाँ कसरी छ:
- तपाईले इमेलमा देखाउन चाहनुभएको वास्तविक छविको दोब्बर आकारको उच्च-रिजोल्युसन छवि सिर्जना गर्नुहोस्। उदाहरण को लागी, यदि तपाइँ 300 × 200 छवि प्रदर्शन गर्न चाहनुहुन्छ भने, 600 × 400 छवि सिर्जना गर्नुहोस्।
- को साथ उच्च-रिजोल्युसन छवि बचत गर्नुहोस् @ १xx प्रत्यय। उदाहरणका लागि, यदि तपाईंको मूल छवि हो 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)
अवस्था जाँच गर्दछ कि Microsoft Office संस्करण 9 भन्दा ठूलो वा बराबर छ, जुन Microsoft Office 2000 सँग मेल खान्छ। |(IE)
यदि क्लाइन्ट इन्टरनेट एक्सप्लोरर हो, जुन प्राय: माइक्रोसफ्ट आउटलुक द्वारा प्रयोग गरिन्छ भन्ने अवस्था जाँच गर्दछ। रेटिना डिस्प्ले अनुकूलित छविहरूको साथ 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
छविको लागि सन्दर्भ प्रदान गर्न पाठ। - छविको गुणस्तरमा सम्झौता नगरी फाइल साइज घटाउनको लागि वेबका लागि छविहरू अप्टिमाइज गर्नुहोस्। यसमा प्रयोग गर्न सकिन्छ छवि कम्प्रेसन उपकरणहरू, छविमा प्रयोग गरिएका रङहरूको संख्या घटाउँदै, र इमेलमा अपलोड गर्नु अघि छविलाई यसको इष्टतम आयामहरूमा रिसाइज गर्नुहोस्।
- ठूला पृष्ठभूमि छविहरू नदिनुहोस् जसले इमेल लोड समयलाई कम गर्न सक्छ।
- एनिमेसन सिर्जना गर्न आवश्यक बहु फ्रेमहरूको कारणले गर्दा एनिमेटेड GIF हरू स्थिर छविहरू भन्दा फाइल आकारमा ठूलो हुन सक्छ, तिनीहरूलाई 1 भन्दा कम राख्न निश्चित हुनुहोस्। Mb.