Маркетинг и аутоматизација е-поште

Како користити слике високе резолуције за Ретина дисплеје у вашој ХТМЛ е-пошти

Ретина дисплеј је маркетиншки термин који користи јабука да опишем екран високе резолуције који има довољно високу густину пиксела да људско око није у стању да разликује појединачне пикселе на типичној удаљености гледања. Ретина екран обично има густину пиксела од 300 пиксела по инчу (pPI) или више, што је знатно више од стандардног екрана са густином пиксела од 72 ппи.

Ретина екрани су сада прилично популарни за екране, лаптопове, мобилне уређаје и таблете. Многи произвођачи сада нуде екране високе резолуције са густином пиксела која одговара или премашује густину Аппле Ретина дисплеја.

ЦСС за приказ слике веће резолуције за Ретина екран

Можете да користите следећи ЦСС код да бисте учитали слику високе резолуције за Ретина екран. Овај код детектује густину пиксела уређаја и учитава слику са @ 2к суфикс за Ретина екране, док учитава слику стандардне резолуције за друге екране.

@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');
}

Други приступ је коришћење векторске графике или СВГ слике, које се могу скалирати на било коју резолуцију без губитка квалитета. Ево примера:

<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> ознака. Тхе viewBox атрибут дефинише димензије СВГ слике, док је xmlns атрибут специфицира КСМЛ простор имена за СВГ.

max-width имовина је постављена на div елемент како би се осигурало да се СВГ слика аутоматски прилагођава доступном простору, до максималне ширине од 300 пиксела у овом случају. Ово је најбоља пракса за осигурање да се СВГ слике правилно приказују на свим уређајима и клијентима е-поште.

Белешка: СВГ подршка може да варира у зависности од клијента е-поште, тако да је важно да тестирате своју е-пошту на више клијената како бисте били сигурни да се СВГ слика правилно приказује.

Други начин кодирања ХТМЛ е-поште за Ретина екране је коришћење srcset. Коришћење атрибута срцсет вам омогућава да обезбедите слике високе резолуције за Ретина екране, истовремено осигуравајући да су слике одговарајуће величине за уређаје ниже резолуције.

<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 може увелико варирати у зависности од клијента е-поште, тако да је важно да тестирате своје е-поруке на више клијената како бисте били сигурни да се слике правилно приказују.

ХТМЛ за слике у е-пошти оптимизован за Ретина дисплеје

могуће је кодирати ХТМЛ адресу е-поште која реагује која ће правилно приказати слику у резолуцији оптимизованој за екране мрежњаче. Ево како:

  1. Направите слику високе резолуције која је двоструко већа од стварне слике коју желите да прикажете у е-поруци. На пример, ако желите да прикажете слику величине 300×200, направите слику од 600×400.
  2. Сачувајте слику високе резолуције помоћу @ 2к суфикс. На пример, ако је ваша оригинална слика имаге.пнг, сачувајте верзију високе резолуције као имаге@2к.пнг.
  3. У свом ХТМЛ коду е-поште користите следећи код да бисте приказали слику:
<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)]> је условни коментар који се користи за циљање одређених верзија Мицрософт Оутлоок-а, који користи Мицрософт Ворд за приказивање ХТМЛ е-порука. ХТМЛ механизам за рендеровање Мицрософт Ворд-а може се прилично разликовати од других клијената е-поште и веб претраживача, тако да често захтева посебно руковање. Тхе

(gte mso 9) услов проверава да ли је верзија Мицрософт Оффице-а већа или једнака 9, што одговара Мицрософт Оффице 2000. |(IE) услов проверава да ли је клијент Интернет Екплорер, који често користи Мицрософт Оутлоок.

ХТМЛ е-пошта са сликама оптимизованим за Ретина екран

Ево примера прилагодљивог ХТМЛ кода е-поште који приказује слику у резолуцији оптимизованој за екране мрежњаче:

<!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>

Савети за слике на Ретина дисплеју

Ево неколико додатних савета за оптимизацију ХТМЛ е-порука за слике оптимизоване за Ретина дисплеје:

  • Уверите се да ваше ознаке слика увек укључују коришћење alt текст да обезбеди контекст за слику.
  • Оптимизујте слике за веб да бисте смањили величину датотеке без угрожавања квалитета слике. Ово може укључивати коришћење компресија слике алати, смањујући број боја коришћених на слици и мењају величину слике на њене оптималне димензије пре него што је отпремите у е-пошту.
  • Избегавајте велике позадинске слике које могу успорити време учитавања е-поште.
  • Анимирани ГИФ-ови могу бити веће величине датотеке од статичних слика због више оквира потребних за креирање анимације, обавезно их држите испод 1 Mb.

Douglas Karr

Douglas Karr је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

Повезани чланци

Назад на врх дугмета
близу

Адблоцк откривен

Martech Zone је у могућности да вам пружи овај садржај без икаквих трошкова јер ми монетизујемо наш сајт путем прихода од огласа, партнерских веза и спонзорстава. Били бисмо захвални ако бисте уклонили свој блокатор огласа док гледате наш сајт.