Сиздин HTML электрондук почтаңыздагы Retina дисплейлери үчүн жогорку чечилиштеги сүрөттөрдү кантип колдонсо болот
Ретинанын дисплейи – бул маркетинг термини алма Адамдын көзү кадимки көрүү аралыкта айрым пикселдерди айырмалай албагандай жогорку пикселдик тыгыздыкка ээ болгон жогорку чечилиштеги дисплейди сүрөттөө. Ретинанын дисплейинде, адатта, бир дюйм үчүн 300 пикселдик пикселдик тыгыздык бар (КБИ) же андан жогору, бул пикселдик тыгыздыгы 72 ppi болгон стандарттуу дисплейден бир топ жогору.
Retina дисплейлери азыр дисплейлер, ноутбуктар, мобилдик түзмөктөр жана планшеттер үчүн кеңири таралган. Көптөгөн өндүрүүчүлөр азыр Apple компаниясынын Retina дисплейлерине дал келген же андан ашкан пикселдик тыгыздыгы бар жогорку чечилиштеги дисплейлерди сунушташат.
CSS Retina дисплей үчүн жогорку дааналыктагы сүрөттү көрсөтүү үчүн
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');
}
Дагы бир ыкма вектордук графиканы колдонуу же 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>
тег. The viewBox
атрибуту SVG сүрөтүнүн өлчөмдөрүн аныктайт, ал эми xmlns
атрибуту SVG үчүн XML аталыш мейкиндигин аныктайт.
The max-width
касиетке коюлган div
SVG сүрөтү бул учурда максималдуу туурасы 300px чейин, жеткиликтүү мейкиндикке туура келүү үчүн автоматтык түрдө масштабдалышын камсыз кылуу үчүн элемент. Бул SVG сүрөттөрү бардык түзмөктөрдө жана электрондук почта кардарларында туура көрсөтүлүшүн камсыз кылуу үчүн эң жакшы тажрыйба.
Эскертүү: SVG колдоосу электрондук почта кардарына жараша өзгөрүшү мүмкүн, ошондуктан SVG сүрөтү туура көрсөтүлүшү үчүн электрондук почтаңызды бир нече кардарларда сынап көрүү маанилүү.
Retina дисплейлери үчүн HTML электрондук каттарын коддоонун дагы бир жолу - бул колдонуу srcset
. srcset атрибутун колдонуу Retina дисплейлери үчүн жогорку резолюциядагы сүрөттөрдү камсыз кылууга мүмкүндүк берет, ошол эле учурда сүрөттөр азыраак чечилиштеги түзмөктөр үчүн туура өлчөмдөрдө болушун камсыз кылат.
<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 пиксел же андан көп чечими бар түзмөктөр үчүн. The 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)]>
HTML электрондук каттарды көрсөтүү үчүн Microsoft Word колдонгон Microsoft Outlook'тун конкреттүү версияларына багытталган шарттуу комментарий. Microsoft Word'тун HTML рендеринг кыймылдаткычы башка электрондук почта кардарларынан жана веб-браузерлерден бир топ айырмаланып турушу мүмкүн, ошондуктан ал көп учурда атайын иштетүүнү талап кылат. The
(gte mso 9)
шарт Microsoft Office версиясы 9дан чоң же барабар экендигин текшерет, бул Microsoft Office 2000ге туура келет. |(IE)
абал кардар көбүнчө Microsoft Outlook тарабынан колдонулган Internet Explorer экендигин текшерет. Ретинанын оптималдаштырылган сүрөттөрү менен 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 дисплейлери үчүн оптималдаштырылган сүрөттөр үчүн HTML электрондук почтаңызды оптималдаштыруу боюнча бир нече кошумча кеңештер бар:
- Сүрөт тегдериңизде ар дайым колдонууну камтууну унутпаңыз
alt
сүрөт үчүн контекстти камсыз кылуу үчүн текст. - Сүрөттүн сапатын бузбастан файлдын көлөмүн азайтуу үчүн сүрөттөрдү веб үчүн оптималдаштырыңыз. Бул колдонууну камтышы мүмкүн сүрөттү кысуу куралдар, сүрөттө колдонулган түстөрдүн санын азайтуу жана электрондук почтага жүктөөдөн мурун сүрөттү оптималдуу өлчөмдөрүнө өзгөртүү.
- Электрондук почтаны жүктөө убактысын жайлата турган чоң фондо сүрөттөрдөн качыңыз.
- Анимацияланган GIF файлдарынын өлчөмү статикалык сүрөттөргө караганда чоңураак болушу мүмкүн, анткени анимацияны түзүү үчүн зарыл болгон бир нече кадр керек, аларды 1ден төмөн сактоону унутпаңыз. Mb.