Маркетинги почтаи электронӣ ва автоматизатсия

Чӣ тавр истифода бурдани тасвирҳои баландсифат барои намоишҳои ретина дар почтаи электронии HTML-и худ

Намоиши ретина истилоҳи маркетингест, ки аз ҷониби он истифода мешавад себ барои тавсиф кардани дисплейи баландсифат, ки зичии пиксел ба қадри кофӣ баланд аст, ки чашми инсон наметавонад пикселҳои алоҳидаро дар масофаи муқаррарии тамошо фарқ кунад. Дисплейи ретина одатан зичии пикселии 300 пиксел дар як дюйм дорад (ШКА) ё баландтар аст, ки аз дисплейи стандартӣ бо зичии пикселии 72 ppi ба таври назаррас баландтар аст.

Дисплейҳои ретина ҳоло барои дисплейҳо, ноутбукҳо, дастгоҳҳои мобилӣ ва планшетҳо хеле маъмуланд. Аксари истеҳсолкунандагон ҳоло дисплейҳои баландсифатро бо зичии пикселҳо пешниҳод мекунанд, ки ба дисплейҳои Retina-и Apple мувофиқанд ё зиёдтаранд.

CSS барои намоиш додани тасвири баландтар барои дисплейи ретина

Шумо метавонед рамзи зерини 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 муайян мекунад.

Дар max-width молу мулк дар бораи гузошта шудааст div Элемент барои таъмини он, ки тасвири SVG ба таври худкор ба фазои мавҷуда мувофиқат кунад, то паҳнои максималии 300px дар ин ҳолат. Ин таҷрибаи беҳтарин барои таъмини дурусти намоиши тасвирҳои 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 пиксел ё бештар. Дар 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)]> шарҳи шартӣ аст, ки барои ҳадафи версияҳои мушаххаси Microsoft Outlook истифода мешавад, ки Microsoft Word-ро барои пешниҳоди мактубҳои HTML истифода мебарад. Муҳаррики намоиши HTML-и Microsoft Word метавонад аз дигар муштариёни почтаи электронӣ ва веб-браузерҳо ба куллӣ фарқ кунад, аз ин рӯ он аксар вақт коркарди махсусро талаб мекунад. Дар

(gte mso 9) шарт месанҷад, ки версияи Microsoft Office аз 9 зиёд ё баробар аст, ки ба Microsoft Office 2000 мувофиқ аст. |(IE) шарт месанҷад, ки оё мизоҷ Internet Explorer аст, ки аксар вақт аз ҷониби Microsoft Outlook истифода мешавад.

HTML почтаи электронӣ бо Retina Намоиши тасвирҳои оптимизатсияшуда

Ин аст як мисоли коди почтаи электронии 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-и худ барои тасвирҳое, ки барои намоишҳои Retina оптимизатсия шудаанд:

  • Боварӣ ҳосил кунед, ки ҳамеша барчаспҳои тасвири шумо истифодаро дар бар мегиранд alt матн барои таъмин кардани контексти тасвир.
  • Тасвирҳоро барои веб оптимизатсия кунед, то андозаи файлро бидуни осеб ба сифати тасвир кам кунед. Ин метавонад истифодаи фишурдани тасвир асбобҳо, кам кардани шумораи рангҳои дар тасвир истифодашуда ва тағир додани андозаи тасвир ба андозаи оптималии он пеш аз бор кардани он ба почтаи электронӣ.
  • Аз тасвирҳои пасзаминаи калон худдорӣ намоед, ки метавонанд вақти боркунии почтаи электрониро суст кунанд.
  • GIF-ҳои аниматсионӣ метавонанд андозаи файл аз тасвирҳои статикӣ калонтар бошанд, зеро чаҳорчӯбаҳои сершумор барои сохтани аниматсия лозиманд, боварӣ ҳосил кунед, ки онҳоро дар зери 1 нигоҳ доред. Mb.

Douglas Karr

Douglas Karr CMO аз OpenINSIGHTS ва асосгузори Martech Zone. Дуглас ба даҳҳо стартапҳои бомуваффақияти MarTech кӯмак кардааст, дар тафтиши зарурӣ ба маблағи беш аз 5 миллиард доллар дар харид ва сармоягузории Martech кӯмак кардааст ва ба ширкатҳо дар татбиқ ва автоматикунонии стратегияҳои фурӯш ва маркетинги онҳо кӯмак мерасонад. Дуглас трансформатсияи рақамии дар сатҳи байналмилалӣ эътирофшуда ва коршинос ва сухангӯи MarTech мебошад. Дуглас инчунин муаллифи нашршудаи дастури Dummie ва китоби роҳбарияти тиҷорат аст.

Мақолаҳо марбут

Бозгашт ба боло
наздик

Блоки рекламавӣ ошкор карда шуд

Martech Zone қодир аст, ки ин мундариҷаро ба шумо бепул пешниҳод кунад, зеро мо сайти худро тавассути даромади таблиғотӣ, истинодҳои шарикӣ ва сарпарастӣ монетизатсия мекунем. Мо миннатдор хоҳем буд, агар шумо ҳангоми дидани сайти мо блокатори таблиғоти худро хориҷ кунед.