Как использовать изображения высокого разрешения для дисплеев 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. Вот как:
- Создайте изображение с высоким разрешением, вдвое превышающее размер фактического изображения, которое вы хотите отобразить в электронном письме. Например, если вы хотите отобразить изображение размером 300 × 200, создайте изображение размером 600 × 400.
- Сохраните изображение с высоким разрешением с помощью @2x суффикс. Например, если исходное изображение image.png, сохраните версию с высоким разрешением как изображение@2x.png.
- В своем 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.