Marketing e-mailowy i automatyzacja

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:

  1. 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.
  2. 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.
  3. 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.

Douglas Karr

Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

Powiązane artykuły

Powrót do góry przycisk
Zamknij

Wykryto Adblock

Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.