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

Како да користите слики со висока резолуција за прикажување на мрежницата во вашата HTML е-пошта

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

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

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