E-Mail Marketing & Automatioun

Wéi benotzt Dir Héichopléisende Biller fir Netzhaut Affichage an Ärer HTML E-Mail

Netzhaut Display ass e Marketing Begrëff benotzt vun Apple fir e Display mat héijer Opléisung ze beschreiwen, deen eng Pixeldicht héich genuch huet, datt dat mënschlecht Auge net fäeg ass eenzel Pixelen op enger typescher Siichtdistanz z'ënnerscheeden. E Netzhaut Display huet normalerweis eng Pixeldicht vun 300 Pixel pro Zoll (PPI) oder méi héich, wat wesentlech méi héich ass wéi e Standard Display mat enger Pixel Dicht vun 72 ppi.

Netzhaut Affichage sinn elo zimmlech Mainstream fir Displays, Laptops, mobilen Apparater a Pëllen. Vill Hiersteller bidden elo héichopléisende Affichage mat Pixeldichten, déi mat den Apple Retina Displays passen oder iwwerschreiden.

CSS Fir e Bild mat méi héijer Opléisung fir e Netzhaut Display ze weisen

Dir kënnt de folgende CSS Code benotzen fir en héichopléisende Bild fir e Retina Display ze lueden. Dëse Code detektéiert d'Pixel Dicht vum Apparat a lued d'Bild mat der @ 2x Suffix fir Netzhaut Affichage, wärend d'Standardopléisung Bild fir aner Affichage lued.

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

Eng aner Approche ass Vektorgrafiken ze benotzen oder SVG Biller, déi op all Resolutioun skala kënnen ouni Qualitéit ze verléieren. Hei ass e Beispill:

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

An dësem Beispill gëtt de SVG Code direkt an der HTML E-Mail agebonne mat der <svg> markéieren. Den viewBox Attribut definéiert d'Dimensioune vum SVG Bild, während d' xmlns Attribut spezifizéiert den XML Nummraum fir SVG.

d' max-width Propriétéit ass op der div Element fir sécherzestellen datt de SVG Bild automatesch skaléiert fir de verfügbare Raum ze passen, bis zu enger maximaler Breet vun 300px an dësem Fall. Dëst ass eng bescht Praxis fir sécherzestellen datt SVG Biller richteg op all Apparater an E-Mail Clienten ugewise ginn.

Opgepasst: SVG Ënnerstëtzung kann ofhängeg vum E-Mail Client variéieren, also ass et wichteg Är E-Mail op verschidde Clienten ze testen fir sécherzestellen datt d'SVG Bild richteg ugewise gëtt.

Eng aner Manéier fir HTML E-Maile fir Retina Displays ze codéieren ass ze benotzen srcset. D'Benotzung vum srcset Attribut erlaabt Iech héichopléisende Biller fir Netzhaut Affichage ze liwweren, während Dir suergt datt d'Biller richteg Gréisst sinn fir Geräter mat niddereger Opléisung.

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

An dësem Beispill gëtt de srcset Attribut bitt zwou Bildquellen: image.jpg fir Apparater mat enger Resolutioun pa 600 Pixel oder manner, an image@2x.jpg fir Apparater mat enger Resolutioun vun 1200 Pixel oder méi. Déi 600w an 1200w Descriptoren spezifizéieren d'Gréisst vun de Biller a Pixelen, wat hëlleft dem Browser ze bestëmmen wat Bild fir erofzelueden baséiert op der Resolutioun vum Apparat.

Net all E-Mail Clienten ënnerstëtzen d' srcset Attribut. Den Niveau vun Ënnerstëtzung fir srcset ka vill variéieren ofhängeg vum E-Mail Client, also ass et wichteg Är E-Mailen op verschidde Clienten ze testen fir sécherzestellen datt d'Biller richteg ugewise ginn.

HTML Fir Biller An E-Mail Optimiséiert Fir Netzhaut Displays

et ass méiglech eng reaktiounsfäeger HTML E-Mail ze codéieren, déi e Bild an enger Resolutioun optiméiert fir Netzhaut Displays richteg weist. Hei ass wéi:

  1. Erstellt en héichopléisende Bild dat duebel sou grouss ass wéi dat aktuellt Bild dat Dir an der E-Mail wëllt weisen. Zum Beispill, wann Dir en 300 × 200 Bild wëllt weisen, erstellt e 600 × 400 Bild.
  2. Späichert d'Héichopléisung Bild mat der @ 2x suffix. Zum Beispill, wann Är original Bild ass image.png, späichert d'Héichopléisung Versioun als Bild@2x.png.
  3. An Ärem HTML E-Mail Code benotzt de folgende Code fir d'Bild ze weisen:
<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)]> ass e bedingte Kommentar dee benotzt gëtt fir spezifesch Versioune vu Microsoft Outlook ze zielen, déi Microsoft Word benotzt fir HTML E-Mailen ze maachen. Microsoft Word's HTML Rendering-Motor ka ganz anescht wéi aner E-Mail Clienten a Webbrowser sinn, sou datt et dacks speziell Handhabung erfuerdert. Déi

(gte mso 9) Conditioun kontrolléiert ob d'Microsoft Office Versioun méi grouss ass wéi oder gläich wéi 9, wat dem Microsoft Office 2000 entsprécht. |(IE) Conditioun kontrolléiert ob de Client Internet Explorer ass, deen dacks vu Microsoft Outlook benotzt gëtt.

HTML E-Mail Mat Netzhaut Display optimiséiert Biller

Hei ass e Beispill vun engem reaktiounsfäeger HTML E-Mail Code deen e Bild an enger Resolutioun weist optiméiert fir Netzhaut 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>

Netzhaut Display Bild Tipps

Hei sinn e puer zousätzlech Tipps fir Är HTML E-Mailen ze optimiséieren fir Biller optimiséiert fir Retina Displays:

  • Gitt sécher datt Dir ëmmer Är Bildtags benotzt alt Text fir Kontext fir d'Bild ze bidden.
  • Optimiséiert Biller fir de Web fir Dateigréisst ze reduzéieren ouni d'Bildqualitéit ze kompromittéieren. Dëst kann d'Benotzung enthalen Bildkompressioun Tools, reduzéieren d'Zuel vun de Faarwen, déi am Bild benotzt ginn, an d'Gréisst vum Bild op seng optimal Dimensiounen änneren, ier se op d'E-Mail eropluede.
  • Vermeit grouss Hannergrondbiller déi d'E-Mail Luedezäite verlangsamen.
  • Animéiert GIFs kënne méi grouss an der Dateigréisst sinn wéi statesch Biller wéinst de multiple Frames déi néideg sinn fir d'Animatioun ze kreéieren, gitt sécher datt se gutt ënner 1 halen Mb.

Douglas Karr

Douglas Karr ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

Verbonnen Artikelen

Zréck erop zum Knäppchen
Zoumaachen

Adblock entdeckt

Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.