Как да използвате изображения с висока разделителна способност за Retina дисплеи във вашия HTML имейл
Retina display е маркетингов термин, използван от ябълка за да се опише дисплей с висока разделителна способност, който има достатъчно висока плътност на пикселите, така че човешкото око да не може да различи отделни пиксели на типично разстояние за гледане. Дисплеят на ретината обикновено има плътност на пикселите от 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>
етикет. The viewBox
определя размерите на SVG изображението, докато xmlns
атрибут указва XML пространството от имена за SVG.
- max-width
имотът е разположен на div
елемент, за да се гарантира, че SVG изображението се мащабира автоматично, за да се побере в наличното пространство, до максимална ширина от 300px в този случай. Това е най-добрата практика за гарантиране, че 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 имейл, който ще показва правилно изображение с резолюция, оптимизирана за дисплеи на ретината. Ето как:
- Създайте изображение с висока разделителна способност, което е двойно по-голямо от действителното изображение, което искате да покажете в имейла. Например, ако искате да покажете изображение 300×200, създайте изображение 600×400.
- Запазете изображението с висока разделителна способност с @2x наставка. Например, ако оригиналното ви изображение е image.png, запазете версията с висока разделителна способност като image@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 може да бъде доста различен от другите имейл клиенти и уеб браузъри, така че често изисква специална обработка. The
(gte mso 9)
условието проверява дали версията на Microsoft Office е по-голяма или равна на 9, което съответства на Microsoft Office 2000. |(IE)
условие проверява дали клиентът е Internet Explorer, който често се използва от Microsoft Outlook. HTML имейл с оптимизирани изображения на Retina Display
Ето пример за адаптивен 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>
Съвети за изображения на Retina Display
Ето някои допълнителни съвети за оптимизиране на вашите HTML имейли за изображения, оптимизирани за Retina дисплеи:
- Уверете се, че етикетите ви за изображения винаги включват използване
alt
текст за осигуряване на контекст за изображението. - Оптимизирайте изображенията за уеб, за да намалите размера на файла, без да компрометирате качеството на изображението. Това може да включва използване компресия на изображения инструменти, намаляване на броя на цветовете, използвани в изображението, и преоразмеряване на изображението до оптималните му размери, преди да го качите в имейла.
- Избягвайте големи фонови изображения, които могат да забавят времето за зареждане на имейла.
- Анимираните GIF могат да бъдат с по-голям размер на файла от статичните изображения поради множеството кадри, необходими за създаване на анимацията, не забравяйте да ги запазите доста под 1 Mb.