Маркетынг і аўтаматызацыя электроннай пошты

Як выкарыстоўваць выявы высокай раздзяляльнасці для дысплеяў Retina у вашай электроннай пошце HTML

Дысплей Retina - гэта маркетынгавы тэрмін, які выкарыстоўваецца кампаніяй Apple каб апісаць дысплей з высокім разрозненнем, які мае шчыльнасць пікселяў, дастаткова высокую, каб чалавечае вока не магло адрозніць асобныя пікселі на звычайнай адлегласці прагляду. Дысплей Retina звычайна мае шчыльнасць пікселяў 300 пікселяў на цалю (цаля) або вышэй, што значна вышэй, чым у стандартнага дысплея з шчыльнасцю пікселяў 72 ppi.

Дысплеі Retina цяпер даволі папулярныя для дысплеяў, ноўтбукаў, мабільных прылад і планшэтаў. Многія вытворцы цяпер прапануюць дысплеі з высокім разрозненнем са шчыльнасцю пікселяў, якая адпавядае або перавышае шчыльнасць дысплеяў Apple Retina.

CSS для адлюстравання выявы больш высокага разрознення для дысплея Retina

Вы можаце выкарыстоўваць наступны код CSS, каб загрузіць выяву з высокім разрозненнем для дысплея Retina. Гэты код вызначае шчыльнасць пікселяў прылады і загружае малюнак з @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> пазнака. viewBox атрыбут вызначае памеры выявы SVG, а атрыбут xmlns атрыбут вызначае прастору імёнаў XML для SVG.

,en max-width маёмасць устаноўлена на ст div элемент, каб пераканацца, што выява SVG аўтаматычна маштабуецца ў адпаведнасці з даступнай прасторай, у гэтым выпадку да максімальнай шырыні 300 пікселяў. Гэта найлепшая практыка для забеспячэння правільнага адлюстравання малюнкаў SVG на ўсіх прыладах і паштовых кліентах.

нататка: Падтрымка SVG можа адрознівацца ў залежнасці ад паштовага кліента, таму важна праверыць вашу электронную пошту на некалькіх кліентах, каб пераканацца, што выява SVG адлюстроўваецца належным чынам.

Іншы спосаб кадавання электронных лістоў HTML для дысплеяў Retina - выкарыстанне 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 для малюнкаў у электроннай пошце, аптымізаваны для дысплеяў Retina

можна закадзіраваць спагадны электронны ліст HTML, які будзе належным чынам адлюстроўваць малюнак з дазволам, аптымізаваным для дысплеяў Retina. Вось як:

  1. Стварыце выяву з высокім разрозненнем, якая ў два разы перавышае памер самой выявы, якую вы хочаце паказаць у электронным лісце. Напрыклад, калі вы хочаце адлюстраваць выяву 300×200, стварыце выяву 600×400.
  2. Захавайце выяву ў высокім раздзяленні з дапамогай @2x суфікс. Напрыклад, калі ваш арыгінальны малюнак image.png, захавайце версію ў высокім раздзяленні як выява@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)]> гэта ўмоўны каментарый, які выкарыстоўваецца для арыентацыі на пэўныя версіі Microsoft Outlook, які выкарыстоўвае Microsoft Word для візуалізацыі лістоў HTML. Механізм візуалізацыі HTML у Microsoft Word можа істотна адрознівацца ад іншых паштовых кліентаў і вэб-браўзераў, таму часта патрабуе асаблівай апрацоўкі. The

(gte mso 9) Умова правярае, ці большая версія Microsoft Office або роўная 9, што адпавядае Microsoft Office 2000. |(IE) Умова правярае, ці з'яўляецца кліент Internet Explorer, які часта выкарыстоўваецца Microsoft Outlook.

Электронная пошта HTML з аптымізаванымі выявамі для Retina Display

Вось прыклад адаптыўнага HTML-кода электроннай пошты, які адлюстроўвае малюнак з дазволам, аптымізаваным для дысплеяў Retina:

<!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 для малюнкаў, аптымізаваных для дысплеяў Retina:

  • Пераканайцеся, што вашы тэгі малюнка заўсёды ўключаюць выкарыстанне alt тэкст, каб забяспечыць кантэкст для выявы.
  • Аптымізуйце выявы для Інтэрнэту, каб паменшыць памер файла без шкоды для якасці выявы. Гэта можа ўключаць выкарыстанне Сціск выявы інструменты, памяншаючы колькасць колераў, якія выкарыстоўваюцца ў выяве, і змяняючы памер выявы да яе аптымальных памераў перад загрузкай у электронную пошту.
  • Пазбягайце вялікіх фонавых малюнкаў, якія могуць запаволіць загрузку электроннай пошты.
  • Аніміраваныя GIF-файлы могуць быць большымі па памеры, чым статычныя выявы, з-за некалькіх кадраў, неабходных для стварэння анімацыі, не забудзьцеся захаваць іх менш за 1 Mb.

Douglas Karr

Douglas Karr з'яўляецца CMO кампаніі OpenINSIGHTS і заснавальнік ст Martech Zone. Дуглас дапамог дзясяткам паспяховых стартапаў MarTech, аказаў дапамогу ў належнай абачлівасці больш чым на 5 мільярдаў долараў у набыцці і інвестыцыях Martech і працягвае дапамагаць кампаніям у рэалізацыі і аўтаматызацыі іх продажаў і маркетынгавых стратэгій. Дуглас - міжнародна прызнаны эксперт і дакладчык па лічбавай трансфармацыі і MarTech. Дуглас таксама з'яўляецца апублікаваным аўтарам даведніка па манекенах і кнігі па бізнес-кіраўніцтву.

Артыкулы па Тэме

Вярнуцца да пачатку кнопкі
блізка

Выяўлена блакіроўка рэкламы

Martech Zone можа даць вам гэты кантэнт бясплатна, таму што мы манетызуем наш сайт за кошт даходаў ад рэкламы, партнёрскіх спасылак і спонсарства. Мы былі б удзячныя, калі б вы выдалілі блакіроўшчык рэкламы пры праглядзе нашага сайта.