E-mailmarketing en automatisering

Hoe u afbeeldingen met hoge resolutie gebruikt voor Retina-displays in uw HTML-e-mail

Retina-display is een marketingterm die wordt gebruikt door Apple om een ​​scherm met hoge resolutie te beschrijven met een pixeldichtheid die hoog genoeg is zodat het menselijk oog geen afzonderlijke pixels kan onderscheiden op een typische kijkafstand. Een retina-display heeft doorgaans een pixeldichtheid van 300 pixels per inch (ppi) of hoger, wat aanzienlijk hoger is dan een standaardscherm met een pixeldichtheid van 72 ppi.

Retina-displays zijn nu vrij mainstream voor beeldschermen, laptops, mobiele apparaten en tablets. Veel fabrikanten bieden nu beeldschermen met een hoge resolutie aan met een pixeldichtheid die gelijk is aan of groter is dan die van de Retina-beeldschermen van Apple.

CSS om een ​​afbeelding met een hogere resolutie weer te geven voor een Retina-display

U kunt de volgende CSS-code gebruiken om een ​​afbeelding met hoge resolutie voor een Retina-display te laden. Deze code detecteert de pixeldichtheid van het apparaat en laadt de afbeelding met de @ 2x achtervoegsel voor Retina-beeldschermen, terwijl het beeld met standaardresolutie voor andere beeldschermen wordt geladen.

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

Een andere benadering is het gebruik van vectorafbeeldingen of SVG afbeeldingen, die kunnen worden geschaald naar elke resolutie zonder kwaliteitsverlies. Hier is een voorbeeld:

<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 dit voorbeeld wordt de SVG-code rechtstreeks in de HTML-e-mail ingesloten met behulp van de <svg> label. De viewBox attribuut definieert de afmetingen van de SVG-afbeelding, terwijl het xmlns attribuut specificeert de XML-naamruimte voor SVG.

De max-width eigenschap is ingesteld op de div element om ervoor te zorgen dat de SVG-afbeelding automatisch wordt geschaald om in de beschikbare ruimte te passen, in dit geval tot een maximale breedte van 300px. Dit is een best practice om ervoor te zorgen dat SVG-afbeeldingen correct worden weergegeven op alle apparaten en e-mailclients.

Opmerking: SVG-ondersteuning kan variëren, afhankelijk van de e-mailclient, dus het is belangrijk om uw e-mail op meerdere clients te testen om er zeker van te zijn dat de SVG-afbeelding correct wordt weergegeven.

Een andere manier om HTML-e-mails voor Retina-displays te coderen, is door te gebruiken srcset. Door het kenmerk srcset te gebruiken, kunt u afbeeldingen met een hoge resolutie leveren voor Retina-displays, terwijl u ervoor zorgt dat de afbeeldingen het juiste formaat hebben voor apparaten met een lagere resolutie.

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

In dit voorbeeld is de srcset attribuut biedt twee afbeeldingsbronnen: image.jpg voor apparaten met een resolutie van 600 pixels of minder, en image@2x.jpg voor apparaten met een resolutie van 1200 pixels of meer. De 600w en 1200w descriptors specificeren de grootte van de afbeeldingen in pixels, waardoor de browser kan bepalen welke afbeelding moet worden gedownload op basis van de resolutie van het apparaat.

Niet alle e-mailclients ondersteunen de srcset attribuut. Het ondersteuningsniveau voor srcset kan sterk variëren, afhankelijk van de e-mailclient, dus het is belangrijk om uw e-mails op meerdere clients te testen om er zeker van te zijn dat de afbeeldingen correct worden weergegeven.

HTML voor afbeeldingen in e-mail geoptimaliseerd voor Retina-displays

het is mogelijk om een ​​responsieve HTML-e-mail te coderen die een afbeelding correct weergeeft met een resolutie die is geoptimaliseerd voor retina-displays. Hier is hoe:

  1. Maak een afbeelding met een hoge resolutie die twee keer zo groot is als de daadwerkelijke afbeelding die u in de e-mail wilt weergeven. Als u bijvoorbeeld een afbeelding van 300×200 wilt weergeven, maakt u een afbeelding van 600×400.
  2. Sla de afbeelding met hoge resolutie op met de @ 2x achtervoegsel. Als uw originele afbeelding bijvoorbeeld is afbeelding.png, sla de versie met hoge resolutie op als afbeelding@2x.png.
  3. Gebruik in uw HTML-e-mailcode de volgende code om de afbeelding weer te geven:
<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)]> is een voorwaardelijke opmerking die wordt gebruikt om specifieke versies van Microsoft Outlook te targeten, die Microsoft Word gebruiken om HTML-e-mails weer te geven. De HTML-rendering-engine van Microsoft Word kan behoorlijk verschillen van andere e-mailclients en webbrowsers, dus er is vaak een speciale behandeling voor nodig. De

(gte mso 9) conditie controleert of de Microsoft Office-versie groter is dan of gelijk is aan 9, wat overeenkomt met Microsoft Office 2000. |(IE) condition controleert of de client Internet Explorer is, dat vaak wordt gebruikt door Microsoft Outlook.

HTML-e-mail met Retina Display Geoptimaliseerde afbeeldingen

Hier is een voorbeeld van een responsieve HTML-e-mailcode die een afbeelding weergeeft met een resolutie die is geoptimaliseerd voor retina-displays:

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

Hier zijn enkele aanvullende tips voor het optimaliseren van uw HTML-e-mails voor afbeeldingen die zijn geoptimaliseerd voor Retina-displays:

  • Zorg ervoor dat uw afbeeldingstags altijd gebruik bevatten alt tekst om de afbeelding context te geven.
  • Optimaliseer afbeeldingen voor het web om de bestandsgrootte te verkleinen zonder afbreuk te doen aan de beeldkwaliteit. Dit kan het gebruik omvatten beeldcompressie tools, het verminderen van het aantal kleuren dat in de afbeelding wordt gebruikt en het verkleinen van de afbeelding naar de optimale afmetingen voordat deze naar de e-mail wordt geüpload.
  • Vermijd grote achtergrondafbeeldingen die de laadtijden van e-mail kunnen vertragen.
  • Geanimeerde GIF's kunnen groter zijn in bestandsgrootte dan statische afbeeldingen vanwege de meerdere frames die nodig zijn om de animatie te maken. Mb.

Douglas Karr

Douglas Karr is CMO van INZICHTEN openen en de oprichter van de Martech Zone. Douglas heeft tientallen succesvolle MarTech-startups geholpen, heeft geholpen bij het due diligence-onderzoek van meer dan $ 5 miljard aan Martech-overnames en -investeringen, en blijft bedrijven helpen bij het implementeren en automatiseren van hun verkoop- en marketingstrategieën. Douglas is een internationaal erkend expert en spreker op het gebied van digitale transformatie en MarTech. Douglas is ook een gepubliceerde auteur van een Dummie's-gids en een boek over zakelijk leiderschap.

Gerelateerde artikelen

Terug naar boven knop
Sluiten

Adblock gedetecteerd

Martech Zone kan u deze inhoud gratis aanbieden omdat we inkomsten genereren met onze site via advertentie-inkomsten, gelieerde links en sponsoring. We zouden het op prijs stellen als u uw adblocker zou verwijderen terwijl u onze site bekijkt.