E-mail marketing og automatisering

Sådan bruger du billeder i høj opløsning til nethindeskærme i din HTML-e-mail

Retina display er et marketingudtryk, der bruges af Apple at beskrive en skærm med høj opløsning, der har en pixeltæthed, der er høj nok til, at det menneskelige øje ikke er i stand til at skelne individuelle pixels på en typisk synsafstand. En nethindeskærm har typisk en pixeltæthed på 300 pixels pr. tomme (ppi) eller højere, hvilket er væsentligt højere end en standardskærm med en pixeltæthed på 72 ppi.

Retina-skærme er nu ret mainstream til skærme, bærbare computere, mobile enheder og tablets. Mange producenter tilbyder nu skærme i høj opløsning med pixeltætheder, der matcher eller overgår Apples Retina-skærme.

CSS for at vise et billede i højere opløsning til en nethindeskærm

Du kan bruge følgende CSS-kode til at indlæse et billede i høj opløsning til en Retina-skærm. Denne kode registrerer enhedens pixeltæthed og indlæser billedet med @ 2x suffiks for Retina-skærme, mens standardopløsningsbilledet indlæses for andre skærme.

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

En anden tilgang er at bruge vektorgrafik eller SVG billeder, som kan skaleres til enhver opløsning uden at miste kvalitet. Her er et eksempel:

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

I dette eksempel er SVG-koden indlejret direkte i HTML-e-mailen ved hjælp af <svg> tag. Det viewBox attribut definerer dimensionerne af SVG-billedet, mens xmlns attribut angiver XML-navnerummet for SVG.

max-width ejendom er sat på div element for at sikre, at SVG-billedet automatisk skaleres, så det passer til den tilgængelige plads, op til en maksimal bredde på 300px i dette tilfælde. Dette er en bedste praksis for at sikre, at SVG-billeder vises korrekt på alle enheder og e-mail-klienter.

Bemærk: SVG-understøttelse kan variere afhængigt af e-mail-klienten, så det er vigtigt at teste din e-mail på flere klienter for at sikre, at SVG-billedet vises korrekt.

En anden måde at kode HTML-e-mails til Retina-skærme på er at bruge srcset. Brug af srcset-attributten giver dig mulighed for at levere billeder i høj opløsning til Retina-skærme, mens du sikrer, at billederne har den rigtige størrelse til enheder med lavere opløsning.

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

I dette eksempel er srcset attribut giver to billedkilder: image.jpg for enheder med en opløsning på 600 pixels eller mindre, og image@2x.jpg til enheder med en opløsning på 1200 pixels eller mere. Det 600w , 1200w Deskriptorer angiver størrelsen af ​​billederne i pixels, hvilket hjælper browseren med at bestemme, hvilket billede der skal downloades baseret på enhedens opløsning.

Ikke alle e-mail-klienter understøtter srcset attribut. Niveauet af støtte til srcset kan variere meget afhængigt af e-mail-klienten, så det er vigtigt at teste dine e-mails på flere klienter for at sikre, at billederne vises korrekt.

HTML til billeder i e-mail optimeret til nethindeskærme

det er muligt at kode en responsiv HTML-e-mail, der korrekt viser et billede i en opløsning, der er optimeret til nethindeskærme. Sådan gør du:

  1. Opret et billede i høj opløsning, der er dobbelt så stort som det faktiske billede, du vil have vist i e-mailen. For eksempel, hvis du vil vise et 300×200 billede, skal du oprette et 600×400 billede.
  2. Gem billedet i høj opløsning med @ 2x suffiks. For eksempel hvis dit originale billede er image.png, gem højopløsningsversionen som billede@2x.png.
  3. I din HTML-e-mail-kode skal du bruge følgende kode til at vise billedet:
<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)]> er en betinget kommentar, der bruges til at målrette mod specifikke versioner af Microsoft Outlook, som bruger Microsoft Word til at gengive HTML-e-mails. Microsoft Words HTML-gengivelsesmotor kan være meget anderledes end andre e-mail-klienter og webbrowsere, så det kræver ofte særlig håndtering. Det

(gte mso 9) betingelse kontrollerer, om Microsoft Office-versionen er større end eller lig med 9, hvilket svarer til Microsoft Office 2000. |(IE) betingelse kontrollerer, om klienten er Internet Explorer, som ofte bruges af Microsoft Outlook.

HTML e-mail med Retina Display optimerede billeder

Her er et eksempel på en responsiv HTML-e-mail-kode, der viser et billede i en opløsning, der er optimeret til nethindeskærme:

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

Her er nogle yderligere tips til at optimere dine HTML-e-mails til billeder, der er optimeret til Retina-skærme:

  • Sørg for altid at have dine billedtags inkluderet ved hjælp af alt tekst for at give billedet kontekst.
  • Optimer billeder til internettet for at reducere filstørrelsen uden at gå på kompromis med billedkvaliteten. Dette kan omfatte at bruge billedkomprimering værktøjer, reducere antallet af farver, der bruges i billedet, og ændre størrelsen på billedet til dets optimale dimensioner, før det uploades til e-mailen.
  • Undgå store baggrundsbilleder, der kan sænke indlæsningstiden for e-mails.
  • Animerede GIF'er kan være større i filstørrelse end statiske billeder på grund af de mange rammer, der er nødvendige for at oprette animationen, sørg for at holde dem godt under 1 Mb.

Douglas Karr

Douglas Karr er CMO for OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

Relaterede artikler

Tilbage til toppen knap
Luk

Adblock fundet

Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.