သင်၏ HTML အီးမေးလ်တွင် Retina Display အတွက် Resolution မြင့်မားသောပုံများကို အသုံးပြုနည်း
Retina Display သည် စျေးကွက်ရှာဖွေရေးအသုံးအနှုန်းတစ်ခုဖြစ်သည်။ Apple လူ့မျက်လုံးသည် ပုံမှန်ကြည့်ရှုသည့်အကွာအဝေးတွင် pixels တစ်ခုချင်းစီကို ခွဲခြား၍မရလောက်အောင် မြင့်မားသော pixel density မြင့်မားသော ရုပ်ထွက်အရည်အသွေးမြင့် မျက်နှာပြင်ကို ဖော်ပြရန်။ retina display သည် ပုံမှန်အားဖြင့် တစ်လက်မလျှင် pixel သိပ်သည်းဆ 300 pixels ရှိသည် (ppi) သို့မဟုတ် 72 ppi pixel သိပ်သည်းဆရှိသော စံပြကွက်များထက် သိသိသာသာမြင့်မားသည်။
ယခုအခါ Retina မျက်နှာပြင်များသည် ဖန်သားပြင်များ၊ လက်ပ်တော့များ၊ မိုဘိုင်းကိရိယာများနှင့် တက်ဘလက်များအတွက် အတော်လေးပင်မရေပန်းစားလာပါပြီ။ ယခုအခါ ထုတ်လုပ်သူအများအပြားသည် Apple ၏ Retina ဖန်သားပြင်များနှင့် ကိုက်ညီသော သို့မဟုတ် ကျော်လွန်သည့် pixel သိပ်သည်းဆများရှိသော ရုပ်ထွက်အရည်အသွေးမြင့် မျက်နှာပြင်များကို ပေးဆောင်လျက်ရှိသည်။
Retina Display အတွက် ပိုမိုမြင့်မားသော Resolution Image ကိုပြသရန် CSS
Retina ဖန်သားပြင်အတွက် အရည်အသွေးမြင့် ရုပ်ပုံတစ်ပုံကို တင်ရန် အောက်ပါ CSS ကုဒ်ကို သင်အသုံးပြုနိုင်ပါသည်။ ဤကုဒ်သည် စက်ပစ္စည်း၏ ပစ်ဇယ်သိပ်သည်းဆကို ထောက်လှမ်းပြီး ပုံနှင့်အတူ တင်ပေးသည်။ @ 2x Retina ဖန်သားပြင်များ အတွက် နောက်ဆက်တွဲ၊ အခြား ဖန်သားပြင်များအတွက် စံကြည်လင်ပြတ်သားမှု ပုံရိပ်ကို တင်နေစဉ်။
@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');
}
အခြားနည်းလမ်းမှာ vector graphic သို့မဟုတ် အသုံးပြုရန်ဖြစ်သည်။ SVG အရည်အသွေးမဆုံးရှုံးစေဘဲ မည်သည့် Resolution ကိုမဆို အတိုင်းအတာအထိ တိုင်းတာနိုင်သော ပုံများ။ ဒါက ဥပမာတစ်ခုပါ။
<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>
tag ။ The viewBox
attribute သည် SVG ရုပ်ပုံ၏အတိုင်းအတာများကို သတ်မှတ်ပေးပြီး၊ xmlns
attribute သည် SVG အတွက် XML namespace ကို သတ်မှတ်သည်။
အဆိုပါ max-width
ပိုင်ဆိုင်မှုအပေါ်သတ်မှတ်ထားသည်။ div
ဤကိစ္စရပ်တွင် အများဆုံးအကျယ် 300px အထိ ရနိုင်သောနေရာနှင့် ကိုက်ညီစေရန် SVG ရုပ်ပုံစကေးကို အလိုအလျောက် ချိန်ညှိကြောင်း သေချာစေရန် အစိတ်အပိုင်း။ ဤသည်မှာ စက်ပစ္စည်းများအားလုံးနှင့် အီးမေးလ်ကလိုင်းယင့်များအားလုံးတွင် SVG ပုံများကို မှန်ကန်စွာပြသကြောင်း သေချာစေရန်အတွက် အကောင်းဆုံးအလေ့အကျင့်တစ်ခုဖြစ်သည်။
မှတ်စု: SVG ပံ့ပိုးမှုသည် အီးမေးလ်ကလိုင်းယင့်ပေါ်မူတည်၍ ကွဲပြားနိုင်သည်။ထို့ကြောင့် SVG ပုံကို မှန်ကန်စွာပြသကြောင်း သေချာစေရန်အတွက် သုံးစွဲသူအများအပြားတွင် သင့်အီးမေးလ်ကို စမ်းသပ်ရန် အရေးကြီးပါသည်။
Retina displays အတွက် HTML အီးမေးလ်များကို ကုဒ်ရေးခြင်း၏ နောက်ထပ်နည်းလမ်းမှာ အသုံးပြုရန်ဖြစ်သည်။ srcset
. srcset ရည်ညွှန်းချက်အား အသုံးပြုခြင်းသည် Retina ဖန်သားပြင်များအတွက် ရုပ်ပုံများကို ကြည်လင်ပြတ်သားမှုနည်းသော စက်များအတွက် သင့်လျော်သောအရွယ်အစားဖြစ်ကြောင်း သေချာစေစဉ်တွင် သင့်အား Retina display များအတွက် မြင့်မားသော resolution ပုံရိပ်များကို ပံ့ပိုးပေးနိုင်သည်။
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
ဤဥပမာတွင်၊ srcset
attribute သည် ပုံအရင်းအမြစ်နှစ်ခုကို ပံ့ပိုးပေးသည်- image.jpg
resolution 600 pixels သို့မဟုတ် ထို့ထက်နည်းသော စက်ပစ္စည်းများအတွက် နှင့် image@2x.jpg
resolution 1200 pixels သို့မဟုတ် ထို့ထက်ပိုသော စက်ပစ္စည်းများအတွက်။ ဟိ 600w
နှင့် 1200w
သရုပ်ဖော်သူများသည် စက်ပစ္စည်း၏ ကြည်လင်ပြတ်သားမှုအပေါ် အခြေခံ၍ ဘရောင်ဇာမှ ဒေါင်းလုဒ်လုပ်မည့်ပုံကို ဆုံးဖြတ်ရန် ကူညီပေးသည့် pixels တွင် ပုံများ၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်။
အီးမေးလ်ဖောက်သည်များအားလုံးက ၎င်းကို မထောက်ခံပါ။ srcset
ဂုဏ်ရည်။ ထောက်ပံ့မှုအဆင့် srcset
အီးမေးလ်ဖောက်သည်ပေါ်မူတည်၍ ကျယ်ပြန့်စွာ ကွဲပြားနိုင်သည်၊ ထို့ကြောင့် ပုံများကို မှန်မှန်ကန်ကန်ပြသကြောင်း သေချာစေရန်အတွက် သုံးစွဲသူအများအပြားတွင် သင့်အီးမေးလ်များကို စမ်းသပ်ရန် အရေးကြီးပါသည်။
HTML တွင် ရုပ်ပုံများ အတွက် အီးမေးလ် တွင် Retina Display များအတွက် ပိုမိုကောင်းမွန်အောင် ပြုလုပ်ထားသည်။
retina display များအတွက် အကောင်းဆုံးသော ကြည်လင်ပြတ်သားမှုရှိသော ရုပ်ပုံတစ်ပုံကို ကောင်းစွာပြသပေးမည့် တုံ့ပြန်မှုရှိသော HTML အီးမေးလ်ကို ကုဒ်လုပ်နိုင်သည်။ ဤတွင်နည်း။
- အီးမေးလ်တွင် သင်ပြသလိုသော တကယ့်ရုပ်ပုံအရွယ်အစား၏ နှစ်ဆဖြစ်သော ရုပ်ထွက်အရည်အသွေးမြင့် ပုံကို ဖန်တီးပါ။ ဥပမာအားဖြင့်၊ သင်သည် 300×200 ပုံတစ်ပုံကို ပြသလိုပါက 600×400 ပုံတစ်ပုံကို ဖန်တီးပါ။
- Resolution မြင့်သောပုံကို ခလုတ်ဖြင့် သိမ်းဆည်းပါ။ @ 2x နောက်ဆက်။ ဥပမာ- မင်းရဲ့မူရင်းပုံဆိုရင် image.pngResolution မြင့်သည့်ဗားရှင်းကို သိမ်းဆည်းပါ။ 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)]>
HTML အီးမေးလ်များကို တင်ဆက်ရန်အတွက် Microsoft Word ကိုအသုံးပြုသည့် Microsoft Outlook ၏ သီးခြားဗားရှင်းများကို ပစ်မှတ်ထားရန် အသုံးပြုသည့် အခြေအနေပေးမှတ်ချက်တစ်ခုဖြစ်သည်။ Microsoft Word ၏ HTML rendering engine သည် အခြားသော email client များနှင့် ဝဘ်ဘရောက်ဆာများနှင့် အတော်လေးကွာခြားနိုင်သောကြောင့် ၎င်းသည် အထူးကိုင်တွယ်ရန် လိုအပ်သည်။ ဟိ
(gte mso 9)
Microsoft Office ဗားရှင်းသည် Microsoft Office 9 နှင့် ကိုက်ညီသည့် 2000 ထက် ကြီးသည် သို့မဟုတ် ညီမျှခြင်း ရှိ၊ မရှိ စစ်ဆေးပါသည်။ |(IE)
ကလိုင်းယင့်သည် Microsoft Outlook မှ မကြာခဏအသုံးပြုလေ့ရှိသည့် Internet Explorer ဟုတ်မဟုတ် စစ်ဆေးသည်။ Retina Display Optimized ပုံများဖြင့် 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>
Retina Display ရုပ်ပုံ အကြံပြုချက်များ
ဤသည်မှာ Retina ဖန်သားပြင်အတွက် အကောင်းဆုံးပုံများအတွက် သင်၏ HTML အီးမေးလ်များကို ပိုကောင်းအောင်ပြုလုပ်ခြင်းဆိုင်ရာ နောက်ထပ်အကြံပြုချက်အချို့ဖြစ်သည်။
- သင့်ပုံတဂ်များကို အသုံးပြုခြင်းတွင် အမြဲပါဝင်နေရန် သေချာပါစေ။
alt
ပုံအတွက် အကြောင်းအရာကို ပံ့ပိုးရန် စာသား။ - ရုပ်ပုံအရည်အသွေးကို မထိခိုက်စေဘဲ ဖိုင်အရွယ်အစားကို လျှော့ချရန်အတွက် ဝဘ်အတွက် ပုံများကို ပိုမိုကောင်းမွန်အောင်ပြုလုပ်ပါ။ အသုံးပြုခြင်းများ ပါဝင်နိုင်သည်။ image ကိုချုံ့ ကိရိယာများ၊ ပုံတွင်အသုံးပြုသည့် အရောင်အရေအတွက်ကို လျှော့ချကာ အီးမေးလ်သို့ မအပ်လုဒ်မတင်မီ ၎င်းကို ၎င်း၏အကောင်းဆုံးအတိုင်းအတာအဖြစ် အရွယ်အစားပြောင်းပါ။
- အီးမေးလ်ဖွင့်ချိန်များကို နှေးကွေးစေသော ကြီးမားသော နောက်ခံပုံများကို ရှောင်ကြဉ်ပါ။
- ကာတွန်းရုပ်ပုံများကို ဖန်တီးရန် လိုအပ်သော ဖရိမ်များစွာကြောင့် ကာတွန်းရုပ်ပုံများထက် ဖိုင်အရွယ်အစားထက် ပိုကြီးနိုင်သည်၊ Mb.