तुमच्या HTML ईमेलमध्ये रेटिना डिस्प्लेसाठी उच्च-रिझोल्यूशन प्रतिमा कशा वापरायच्या
रेटिना डिस्प्ले हा एक विपणन शब्द आहे ज्याद्वारे वापरला जातो सफरचंद उच्च-रिझोल्यूशन डिस्प्लेचे वर्णन करण्यासाठी ज्याची पिक्सेल घनता इतकी जास्त आहे की मानवी डोळा विशिष्ट दृश्य अंतरावर वैयक्तिक पिक्सेल वेगळे करू शकत नाही. रेटिना डिस्प्लेची पिक्सेल घनता सामान्यत: 300 पिक्सेल प्रति इंच असते (ppi) किंवा उच्च, जे 72 ppi च्या पिक्सेल घनतेसह मानक प्रदर्शनापेक्षा लक्षणीय आहे.
रेटिना डिस्प्ले आता डिस्प्ले, लॅपटॉप, मोबाइल डिव्हाइस आणि टॅब्लेटसाठी मुख्य प्रवाहात आहेत. बरेच उत्पादक आता उच्च-रिझोल्यूशन डिस्प्ले ऑफर करतात ज्यात पिक्सेल घनता आहे जे Apple च्या रेटिना डिस्प्लेशी जुळतात किंवा त्यापेक्षा जास्त आहेत.
रेटिना डिस्प्लेसाठी उच्च रिझोल्यूशन प्रतिमा प्रदर्शित करण्यासाठी CSS
रेटिना डिस्प्लेसाठी हाय-रिझोल्यूशन इमेज लोड करण्यासाठी तुम्ही खालील 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');
}
दुसरा दृष्टीकोन म्हणजे वेक्टर ग्राफिक्स वापरणे किंवा एसव्हीजी प्रतिमा, जी गुणवत्ता न गमावता कोणत्याही रिझोल्यूशनपर्यंत स्केल करू शकतात. येथे एक उदाहरण आहे:
<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 प्रतिमा योग्यरित्या प्रदर्शित झाली आहे याची खात्री करण्यासाठी एकाधिक क्लायंटवर आपल्या ईमेलची चाचणी घेणे महत्वाचे आहे.
रेटिना डिस्प्लेसाठी एचटीएमएल ईमेल कोडिंग करण्याचा आणखी एक मार्ग म्हणजे वापरणे 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 ईमेल कोड करणे शक्य आहे. कसे ते येथे आहे:
- उच्च-रिझोल्यूशन प्रतिमा तयार करा जी तुम्हाला ईमेलमध्ये प्रदर्शित करू इच्छित असलेल्या वास्तविक प्रतिमेच्या दुप्पट आहे. उदाहरणार्थ, तुम्हाला 300×200 प्रतिमा प्रदर्शित करायची असल्यास, 600×400 प्रतिमा तयार करा.
- सह उच्च-रिझोल्यूशन प्रतिमा जतन करा @ 2x प्रत्यय उदाहरणार्थ, आपली मूळ प्रतिमा असल्यास 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)
स्थिती तपासते की मायक्रोसॉफ्ट ऑफिस आवृत्ती 9 पेक्षा मोठी किंवा बरोबरीची आहे, जी मायक्रोसॉफ्ट ऑफिस 2000 शी संबंधित आहे. |(IE)
क्लायंट इंटरनेट एक्सप्लोरर आहे की नाही हे कंडिशन तपासते, जे सहसा Microsoft Outlook द्वारे वापरले जाते. रेटिना डिस्प्ले ऑप्टिमाइझ इमेजसह 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.