Электрондук почта маркетинги жана автоматташтыруу

Сиздин 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 электрондук почтасын коддоо мүмкүн. Бул жерде:

  1. Электрондук катта көрсөткүңүз келген чыныгы сүрөттүн өлчөмүнөн эки эсе чоң болгон жогорку чечилиштеги сүрөттү түзүңүз. Мисалы, 300×200 сүрөттү көрсөткүңүз келсе, 600×400 сүрөттү түзүңүз.
  2. менен жогорку чечилиштеги сүрөттү сактаңыз @ 2x суффикс. Мисалы, сиздин баштапкы сүрөт болсо image.png, жогорку чечилиштүү нускасын катары сактаңыз image@2x.png.
  3. Сиздин 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.

Douglas Karr

Douglas Karr CMO болуп саналат OpenINSIGHTS жана негиздөөчүсү Martech Zone. Дуглас ондогон ийгиликтүү MarTech стартаптарына жардам берди, Martech сатып алууларына жана инвестицияларына 5 миллиард доллардан ашык каражатты текшерүүгө жардам берди жана компанияларга сатуу жана маркетинг стратегияларын ишке ашырууда жана автоматташтырууда жардам берүүнү улантууда. Дуглас эл аралык деңгээлде таанылган санариптик трансформация жана MarTech эксперти жана спикери. Дуглас ошондой эле Dummie's guide жана бизнес лидерлик китебинин басылып чыккан автору.

Тектеш макалалар

Артка жогорку баскычы
жакын

Adblock аныкталды

Martech Zone Бул мазмунду сизге эч кандай акы төлөбөй бере алат, анткени биз сайтыбызды жарнамадан түшкөн киреше, өнөктөштүк шилтемелер жана демөөрчүлүк аркылуу акча табабыз. Биздин сайтты көрүп жатканыңызда жарнама блокаторуңузду алып салсаңыз, биз ыраазыбыз.