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

Как использовать изображения высокого разрешения для дисплеев 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.

Ассоциация 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 для изображений в электронной почте, оптимизированный для дисплеев 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 может сильно отличаться от других почтовых клиентов и веб-браузеров, поэтому он часто требует специальной обработки.

(gte mso 9) Условие проверяет, больше или равно версии Microsoft Office 9, что соответствует Microsoft Office 2000. |(IE) Условие проверяет, является ли клиент Internet Explorer, который часто используется Microsoft Outlook.

Электронная почта в формате HTML с оптимизированными изображениями для дисплея Retina

Вот пример адаптивного 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 является директором по маркетингу OpenINSIGHTS и основатель компании Martech Zone. Дуглас помог десяткам успешных стартапов MarTech, помог в комплексной проверке приобретений и инвестиций Martech на сумму более 5 миллиардов долларов, а также продолжает помогать компаниям во внедрении и автоматизации их стратегий продаж и маркетинга. Дуглас — международно признанный эксперт по цифровой трансформации, а также эксперт в области MarTech и спикер. Дуглас также является автором опубликованного руководства для чайников и книги по бизнес-лидерству.

Статьи по теме

Вернуться к началу кнопки
Закрыть

Adblock обнаружен

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