Jak używać obrazów o wysokiej rozdzielczości dla wyświetlaczy Retina w wiadomościach e-mail w formacie HTML
Wyświetlacz Retina to termin marketingowy używany przez Apple aby opisać wyświetlacz o wysokiej rozdzielczości, który ma wystarczająco dużą gęstość pikseli, aby ludzkie oko nie było w stanie rozróżnić poszczególnych pikseli z typowej odległości oglądania. Wyświetlacz Retina ma zazwyczaj gęstość pikseli wynoszącą 300 pikseli na cal (ppi) lub więcej, czyli znacznie więcej niż standardowy wyświetlacz o gęstości pikseli 72 ppi.
Wyświetlacze Retina są obecnie dość popularne w przypadku wyświetlaczy, laptopów, urządzeń mobilnych i tabletów. Wielu producentów oferuje obecnie wyświetlacze o wysokiej rozdzielczości z gęstością pikseli dorównującą lub przewyższającą wyświetlacze Retina firmy Apple.
CSS, aby wyświetlić obraz o wyższej rozdzielczości dla wyświetlacza Retina
Możesz użyć następującego kodu CSS, aby załadować obraz o wysokiej rozdzielczości dla wyświetlacza Retina. Ten kod wykrywa gęstość pikseli urządzenia i ładuje obraz z rozszerzeniem @ 2x sufiks dla wyświetlaczy Retina, podczas ładowania obrazu o standardowej rozdzielczości dla innych wyświetlaczy.
@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');
}
Innym podejściem jest użycie grafiki wektorowej lub SVG obrazów, które można skalować do dowolnej rozdzielczości bez utraty jakości. Oto przykład:
<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>
W tym przykładzie kod SVG jest osadzony bezpośrednio w wiadomości e-mail w formacie HTML przy użyciu formatu <svg>
etykietka. ten viewBox
atrybut określa wymiary obrazu SVG, podczas gdy atrybut xmlns
atrybut określa przestrzeń nazw XML dla SVG.
Połączenia max-width
nieruchomość jest ustawiona na div
element, aby zapewnić automatyczne skalowanie obrazu SVG w celu dopasowania go do dostępnego miejsca, w tym przypadku do maksymalnej szerokości 300 pikseli. Jest to najlepsza praktyka zapewniająca prawidłowe wyświetlanie obrazów SVG na wszystkich urządzeniach i klientach poczty e-mail.
Uwaga: Obsługa SVG może się różnić w zależności od klienta poczty e-mail, dlatego ważne jest przetestowanie poczty e-mail na wielu klientach, aby upewnić się, że obraz SVG jest wyświetlany prawidłowo.
Innym sposobem kodowania wiadomości e-mail w formacie HTML dla wyświetlaczy Retina jest wykorzystanie srcset
. Użycie atrybutu srcset umożliwia dostarczanie obrazów o wysokiej rozdzielczości dla wyświetlaczy Retina, zapewniając jednocześnie, że obrazy mają odpowiedni rozmiar dla urządzeń o niższej rozdzielczości.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
W tym przykładzie srcset
atrybut zapewnia dwa źródła obrazu: image.jpg
dla urządzeń o rozdzielczości 600 pikseli lub mniejszej oraz image@2x.jpg
dla urządzeń o rozdzielczości 1200 pikseli lub większej. The 600w
i 1200w
deskryptory określają rozmiar obrazów w pikselach, co pomaga przeglądarce określić, który obraz pobrać na podstawie rozdzielczości urządzenia.
Nie wszyscy klienci poczty e-mail obsługują srcset
atrybut. Poziom wsparcia dla srcset
mogą się znacznie różnić w zależności od klienta poczty e-mail, dlatego ważne jest, aby przetestować wiadomości e-mail na wielu klientach, aby upewnić się, że obrazy są wyświetlane prawidłowo.
HTML dla obrazów w wiadomości e-mail zoptymalizowany pod kątem wyświetlaczy Retina
możliwe jest zakodowanie responsywnego e-maila HTML, który będzie poprawnie wyświetlał obraz w rozdzielczości zoptymalizowanej dla wyświetlaczy Retina. Oto jak:
- Utwórz obraz o wysokiej rozdzielczości, który jest dwukrotnie większy niż rzeczywisty obraz, który chcesz wyświetlić w wiadomości e-mail. Na przykład, jeśli chcesz wyświetlić obraz 300 × 200, utwórz obraz 600 × 400.
- Zapisz obraz w wysokiej rozdzielczości z plikiem @ 2x przyrostek. Na przykład, jeśli oryginalny obraz to image.png, zapisz wersję w wysokiej rozdzielczości jako obraz@2x.png.
- W kodzie HTML e-maila użyj następującego kodu, aby wyświetlić obraz:
<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)]>
to komentarz warunkowy używany do kierowania określonych wersji programu Microsoft Outlook, który używa programu Microsoft Word do renderowania wiadomości e-mail w formacie HTML. Mechanizm renderowania HTML programu Microsoft Word może znacznie różnić się od innych klientów poczty e-mail i przeglądarek internetowych, dlatego często wymaga specjalnej obsługi. The
(gte mso 9)
warunek sprawdza, czy wersja pakietu Microsoft Office jest większa lub równa 9, co odpowiada wersji pakietu Microsoft Office 2000. |(IE)
warunek sprawdza, czy klientem jest Internet Explorer, z którego często korzysta Microsoft Outlook.
Poczta e-mail w formacie HTML z obrazami zoptymalizowanymi pod kątem wyświetlacza Retina
Oto przykład responsywnego kodu e-mail w formacie HTML, który wyświetla obraz w rozdzielczości zoptymalizowanej pod kątem wyświetlaczy 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>
Wskazówki dotyczące obrazu wyświetlacza Retina
Oto kilka dodatkowych wskazówek dotyczących optymalizacji wiadomości e-mail w formacie HTML pod kątem obrazów zoptymalizowanych pod kątem wyświetlaczy Retina:
- Pamiętaj, aby tagi graficzne zawsze zawierały using
alt
tekst, aby zapewnić kontekst dla obrazu. - Zoptymalizuj obrazy na potrzeby Internetu, aby zmniejszyć rozmiar pliku bez utraty jakości obrazu. Może to obejmować używanie kompresja obrazu narzędzia, zmniejszając liczbę kolorów używanych w obrazie i zmieniając rozmiar obrazu do optymalnych wymiarów przed przesłaniem go do wiadomości e-mail.
- Unikaj dużych obrazów tła, które mogą spowolnić ładowanie wiadomości e-mail.
- Animowane pliki GIF mogą mieć większy rozmiar pliku niż obrazy statyczne ze względu na wiele klatek potrzebnych do utworzenia animacji. Pamiętaj, aby nie przekraczać 1 Mb.