E-postmarkedsføring og automatisering

Slik bruker du høyoppløselige bilder for Retina-skjermer i HTML-e-posten din

Retina display er et markedsføringsbegrep som brukes av eple å beskrive en skjerm med høy oppløsning som har en pikseltetthet som er høy nok til at det menneskelige øyet ikke er i stand til å skille individuelle piksler på en typisk visningsavstand. En retina-skjerm har vanligvis en pikseltetthet på 300 piksler per tomme (ppi) eller høyere, noe som er betydelig høyere enn en standardskjerm med en pikseltetthet på 72 ppi.

Retina-skjermer er nå ganske mainstream for skjermer, bærbare datamaskiner, mobile enheter og nettbrett. Mange produsenter tilbyr nå skjermer med høy oppløsning med pikseltettheter som matcher eller overgår Apples Retina-skjermer.

CSS for å vise et bilde med høyere oppløsning for en netthinneskjerm

Du kan bruke følgende CSS-kode for å laste et høyoppløselig bilde for en Retina-skjerm. Denne koden oppdager enhetens pikseltetthet og laster bildet med @ 2x suffiks for Retina-skjermer, mens du laster inn standardoppløsningsbildet for andre skjermer.

@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 annen tilnærming er å bruke vektorgrafikk eller SVG bilder, som kan skaleres til hvilken som helst oppløsning uten å 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 eksemplet er SVG-koden innebygd direkte i HTML-e-posten ved å bruke <svg> stikkord. De viewBox attributt definerer dimensjonene til SVG-bildet, mens xmlns attributt angir XML-navneområdet for SVG.

De max-width eiendom er satt på div element for å sikre at SVG-bildet skaleres automatisk for å passe den tilgjengelige plassen, opp til en maksimal bredde på 300px i dette tilfellet. Dette er en beste praksis for å sikre at SVG-bilder vises riktig på alle enheter og e-postklienter.

OBS: SVG-støtte kan variere avhengig av e-postklienten, så det er viktig å teste e-posten din på flere klienter for å sikre at SVG-bildet vises riktig.

En annen måte å kode HTML-e-poster for Retina-skjermer på er å bruke srcset. Ved å bruke srcset-attributtet kan du gi høyoppløselige bilder for Retina-skjermer samtidig som du sikrer at bildene har riktig størrelse for enheter med lavere opplø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 eksemplet er srcset attributt gir to bildekilder: image.jpg for enheter med en oppløsning på 600 piksler eller mindre, og image@2x.jpg for enheter med en oppløsning på 1200 piksler eller mer. De 600w og 1200w Deskriptorer spesifiserer størrelsen på bildene i piksler, noe som hjelper nettleseren å bestemme hvilket bilde som skal lastes ned basert på enhetens oppløsning.

Ikke alle e-postklienter støtter srcset Egenskap. Nivået på støtte for srcset kan variere mye avhengig av e-postklienten, så det er viktig å teste e-postene dine på flere klienter for å sikre at bildene vises riktig.

HTML for bilder i e-post optimalisert for netthinneskjermer

det er mulig å kode en responsiv HTML-e-post som vil vise et bilde på riktig måte med en oppløsning optimalisert for netthinneskjermer. Dette er hvordan:

  1. Lag et høyoppløselig bilde som er dobbelt så stort som det faktiske bildet du vil vise i e-posten. For eksempel, hvis du vil vise et 300×200 bilde, lag et 600×400 bilde.
  2. Lagre det høyoppløselige bildet med @ 2x suffiks. For eksempel hvis originalbildet ditt er image.png, lagre den høyoppløselige versjonen som bilde@2x.png.
  3. I HTML-e-postkoden din bruker du følgende kode for å vise bildet:
<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 som brukes til å målrette mot spesifikke versjoner av Microsoft Outlook, som bruker Microsoft Word til å gjengi HTML-e-poster. Microsoft Words HTML-gjengivelsesmotor kan være ganske forskjellig fra andre e-postklienter og nettlesere, så det krever ofte spesiell håndtering. De

(gte mso 9) tilstand sjekker om Microsoft Office-versjonen er større enn eller lik 9, som tilsvarer Microsoft Office 2000. |(IE) tilstand sjekker om klienten er Internet Explorer, som ofte brukes av Microsoft Outlook.

HTML-e-post med Retina Display-optimaliserte bilder

Her er et eksempel på en responsiv HTML-e-postkode som viser et bilde med en oppløsning optimalisert for netthinneskjermer:

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

Her er noen flere tips om hvordan du optimaliserer HTML-e-postene dine for bilder som er optimalisert for Retina-skjermer:

  • Sørg for å alltid ha bildekodene dine med å bruke alt tekst for å gi bildet kontekst.
  • Optimaliser bilder for nettet for å redusere filstørrelsen uten at det går på bekostning av bildekvaliteten. Dette kan inkludere bruk bildekomprimering verktøy, redusere antall farger som brukes i bildet, og endre størrelsen på bildet til dets optimale dimensjoner før du laster det opp til e-posten.
  • Unngå store bakgrunnsbilder som kan redusere innlastingstiden for e-post.
  • Animerte GIF-er kan være større i filstørrelse enn statiske bilder på grunn av de mange rammene som trengs for å lage animasjonen, sørg for å holde dem godt under 1 Mb.

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.