Електронний маркетинг і автоматизація

Як використовувати зображення високої роздільної здатності для дисплеїв Retina у своєму електронному листі HTML

Дисплей Retina — це маркетинговий термін, який використовує Apple щоб описати дисплей з високою роздільною здатністю, який має досить високу щільність пікселів, щоб людське око не могло розрізнити окремі пікселі на типовій відстані перегляду. Дисплей Retina зазвичай має щільність пікселів 300 пікселів на дюйм (ppi) або вище, що значно вище стандартного дисплея з щільністю пікселів 72 ppi.

Дисплеї Retina зараз досить масові для дисплеїв, ноутбуків, мобільних пристроїв і планшетів. Зараз багато виробників пропонують дисплеї високої роздільної здатності з щільністю пікселів, яка відповідає або перевищує щільність дисплеїв Retina від Apple.

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.

Команда 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, збережіть версію з високою роздільною здатністю як 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 може значно відрізнятися від інших клієнтів електронної пошти та веб-браузерів, тому часто потребує спеціального поводження. 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 Display

Ось кілька додаткових порад щодо оптимізації ваших електронних листів HTML для зображень, оптимізованих для дисплеїв Retina:

  • Переконайтеся, що ваші теги зображень завжди включають використання alt текст, щоб створити контекст для зображення.
  • Оптимізуйте зображення для Інтернету, щоб зменшити розмір файлу без шкоди для якості зображення. Це може включати використання стиснення зображення інструменти, зменшуючи кількість кольорів, що використовуються в зображенні, і змінюючи розміри зображення до його оптимальних розмірів перед завантаженням в електронну пошту.
  • Уникайте великих фонових зображень, які можуть уповільнити час завантаження електронної пошти.
  • Розмір анімованих GIF-файлів може бути більшим за розмір файлу, ніж статичні зображення, оскільки для створення анімації потрібні кілька кадрів, переконайтеся, що вони менше 1 Mb.

Douglas Karr

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

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

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