E-Mail-Marketing & Automatisierung

So verwenden Sie hochauflösende Bilder für Retina-Displays in Ihrer HTML-E-Mail

Retina-Display ist ein Marketingbegriff, der von verwendet wird Apple um ein hochauflösendes Display zu beschreiben, das eine Pixeldichte hat, die hoch genug ist, dass das menschliche Auge einzelne Pixel in einem typischen Betrachtungsabstand nicht unterscheiden kann. Ein Retina-Display hat typischerweise eine Pixeldichte von 300 Pixel pro Zoll (ppi) oder höher, was deutlich über einem Standard-Display mit einer Pixeldichte von 72 ppi liegt.

Retina-Displays sind mittlerweile ziemlich Mainstream für Displays, Laptops, Mobilgeräte und Tablets. Viele Hersteller bieten jetzt hochauflösende Displays mit Pixeldichten an, die denen von Apples Retina-Displays entsprechen oder diese übertreffen.

CSS zum Anzeigen eines Bildes mit höherer Auflösung für ein Retina-Display

Sie können den folgenden CSS-Code verwenden, um ein hochauflösendes Bild für ein Retina-Display zu laden. Dieser Code erkennt die Pixeldichte des Geräts und lädt das Bild mit der @2x Suffix für Retina-Displays, während das Bild mit Standardauflösung für andere Displays geladen wird.

@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');
}

Ein anderer Ansatz ist die Verwendung von Vektorgrafiken bzw SVG Bilder, die ohne Qualitätsverlust auf jede beliebige Auflösung skaliert werden können. Hier ist ein Beispiel:

<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>

In diesem Beispiel wird der SVG-Code mithilfe von direkt in die HTML-E-Mail eingebettet <svg> -Tag. Die viewBox -Attribut definiert die Abmessungen des SVG-Bildes, während das xmlns -Attribut gibt den XML-Namespace für SVG an.

Das max-width Eigenschaft wird auf gesetzt div -Element, um sicherzustellen, dass das SVG-Bild automatisch an den verfügbaren Platz angepasst wird, in diesem Fall bis zu einer maximalen Breite von 300 Pixel. Dies ist eine bewährte Methode, um sicherzustellen, dass SVG-Bilder auf allen Geräten und E-Mail-Clients richtig angezeigt werden.

Hinweis: Die SVG-Unterstützung kann je nach E-Mail-Client variieren, daher ist es wichtig, Ihre E-Mail auf mehreren Clients zu testen, um sicherzustellen, dass das SVG-Bild richtig angezeigt wird.

Eine andere Möglichkeit, HTML-E-Mails für Retina-Displays zu codieren, ist die Verwendung von srcset. Mit dem srcset-Attribut können Sie hochauflösende Bilder für Retina-Displays bereitstellen und gleichzeitig sicherstellen, dass die Bilder für Geräte mit niedrigerer Auflösung die richtige Größe haben.

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

In diesem Beispiel srcset Das Attribut stellt zwei Bildquellen bereit: image.jpg für Geräte mit einer Auflösung von 600 Pixel oder weniger und image@2x.jpg für Geräte mit einer Auflösung von 1200 Pixel oder mehr. Der 600w und 1200w Deskriptoren geben die Größe der Bilder in Pixeln an, was dem Browser hilft, basierend auf der Auflösung des Geräts zu bestimmen, welches Bild herunterzuladen ist.

Nicht alle E-Mail-Clients unterstützen die srcset Attribut. Die Höhe der Unterstützung für srcset kann je nach E-Mail-Client stark variieren, daher ist es wichtig, Ihre E-Mails auf mehreren Clients zu testen, um sicherzustellen, dass die Bilder richtig angezeigt werden.

HTML für Bilder in E-Mails, optimiert für Retina-Displays

Es ist möglich, eine responsive HTML-E-Mail zu codieren, die ein Bild mit einer für Retina-Displays optimierten Auflösung richtig anzeigt. Hier ist wie:

  1. Erstellen Sie ein hochauflösendes Bild, das doppelt so groß ist wie das eigentliche Bild, das Sie in der E-Mail anzeigen möchten. Wenn Sie beispielsweise ein Bild im Format 300 × 200 anzeigen möchten, erstellen Sie ein Bild im Format 600 × 400.
  2. Speichern Sie das hochauflösende Bild mit der @2x Suffix. Zum Beispiel, wenn Ihr Originalbild ist image.png, speichern Sie die hochauflösende Version unter image@2x.png.
  3. Verwenden Sie in Ihrem HTML-E-Mail-Code den folgenden Code, um das Bild anzuzeigen:
<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)]> ist ein bedingter Kommentar, der verwendet wird, um auf bestimmte Versionen von Microsoft Outlook abzuzielen, das Microsoft Word zum Rendern von HTML-E-Mails verwendet. Die HTML-Rendering-Engine von Microsoft Word kann sich stark von anderen E-Mail-Clients und Webbrowsern unterscheiden und erfordert daher häufig eine besondere Behandlung. Der

(gte mso 9) Bedingung prüft, ob die Microsoft Office-Version größer oder gleich 9 ist, was Microsoft Office 2000 entspricht |(IE) Bedingung prüft, ob der Client Internet Explorer ist, der häufig von Microsoft Outlook verwendet wird.

HTML-E-Mail mit optimierten Bildern für die Retina-Anzeige

Hier ist ein Beispiel für einen responsiven HTML-E-Mail-Code, der ein Bild mit einer für Retina-Displays optimierten Auflösung anzeigt:

<!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>

Bildtipps für das Retina-Display

Hier sind einige zusätzliche Tipps zur Optimierung Ihrer HTML-E-Mails für Bilder, die für Retina-Displays optimiert sind:

  • Stellen Sie sicher, dass Ihre Bild-Tags immer die Verwendung enthalten alt Text, um den Kontext für das Bild bereitzustellen.
  • Optimieren Sie Bilder für das Web, um die Dateigröße zu reduzieren, ohne die Bildqualität zu beeinträchtigen. Dies kann die Verwendung beinhalten Bildkompression Werkzeuge, reduzieren Sie die Anzahl der im Bild verwendeten Farben und ändern Sie die Größe des Bildes auf seine optimalen Abmessungen, bevor Sie es in die E-Mail hochladen.
  • Vermeiden Sie große Hintergrundbilder, die die Ladezeiten von E-Mails verlangsamen können.
  • Animierte GIFs können eine größere Dateigröße haben als statische Bilder, da mehrere Frames zum Erstellen der Animation erforderlich sind. Stellen Sie sicher, dass sie deutlich unter 1 bleiben Mb.

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.