E-postmarknadsföring och automation

Hur man använder högupplösta bilder för Retina-skärmar i din HTML-e-post

Retina display är en marknadsföringsterm som används av Apple att beskriva en högupplöst skärm som har en tillräckligt hög pixeltäthet för att det mänskliga ögat inte kan urskilja enskilda pixlar på ett typiskt betraktningsavstånd. En retina-skärm har vanligtvis en pixeltäthet på 300 pixlar per tum (ppi) eller högre, vilket är betydligt högre än en standardskärm med en pixeltäthet på 72 ppi.

Retina-skärmar är nu ganska vanliga för skärmar, bärbara datorer, mobila enheter och surfplattor. Många tillverkare erbjuder nu högupplösta skärmar med pixeltätheter som matchar eller överträffar Apples Retina-skärmar.

CSS för att visa en bild med högre upplösning för en näthinnaskärm

Du kan använda följande CSS-kod för att ladda en högupplöst bild för en Retina-skärm. Denna kod känner av enhetens pixeltäthet och laddar bilden med @ 2x suffix för Retina-skärmar, samtidigt som standardupplösningsbilden laddas för andra skärmar.

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

Ett annat tillvägagångssätt är att använda vektorgrafik eller SVG bilder, som kan skalas till valfri upplösning utan att förlora kvalitet. Här är ett exempel:

<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 det här exemplet är SVG-koden inbäddad direkt i HTML-e-postmeddelandet med hjälp av <svg> märka. De viewBox attribut definierar dimensionerna för SVG-bilden, medan xmlns attribut anger XML-namnutrymmet för SVG.

Smakämnen max-width egenskapen är inställd på div element för att säkerställa att SVG-bilden skalas automatiskt för att passa det tillgängliga utrymmet, upp till en maximal bredd på 300px i detta fall. Detta är en bästa praxis för att säkerställa att SVG-bilder visas korrekt på alla enheter och e-postklienter.

Notera: SVG-stöd kan variera beroende på e-postklient, så det är viktigt att testa din e-post på flera klienter för att säkerställa att SVG-bilden visas korrekt.

Ett annat sätt att koda HTML-e-postmeddelanden för Retina-skärmar är att använda srcset. Genom att använda srcset-attributet kan du tillhandahålla högupplösta bilder för Retina-skärmar samtidigt som du säkerställer att bilderna har rätt storlek för enheter med lägre upplösning.

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

I det här exemplet är srcset attribut ger två bildkällor: image.jpg för enheter med en upplösning på 600 pixlar eller mindre, och image@2x.jpg för enheter med en upplösning på 1200 pixlar eller mer. De 600w och 1200w Deskriptorer anger storleken på bilderna i pixlar, vilket hjälper webbläsaren att avgöra vilken bild som ska laddas ner baserat på enhetens upplösning.

Inte alla e-postklienter stöder srcset attribut. Nivån på stödet för srcset kan variera mycket beroende på e-postklient, så det är viktigt att testa dina e-postmeddelanden på flera klienter för att säkerställa att bilderna visas korrekt.

HTML för bilder i e-post optimerad för Retina-skärmar

det är möjligt att koda ett responsivt HTML-e-postmeddelande som korrekt visar en bild med en upplösning optimerad för näthinnaskärmar. Här är hur:

  1. Skapa en högupplöst bild som är dubbelt så stor som den faktiska bilden du vill visa i mejlet. Till exempel, om du vill visa en 300×200 bild, skapa en 600×400 bild.
  2. Spara den högupplösta bilden med @ 2x ändelse. Till exempel om din originalbild är image.png, spara den högupplösta versionen som bild@2x.png.
  3. I din HTML-e-postkod använder du följande kod för att visa bilden:
<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)]> är en villkorlig kommentar som används för att rikta in sig på specifika versioner av Microsoft Outlook, som använder Microsoft Word för att rendera HTML-e-postmeddelanden. Microsoft Words HTML-renderingsmotor kan skilja sig ganska mycket från andra e-postklienter och webbläsare, så det kräver ofta speciell hantering. De

(gte mso 9) villkor kontrollerar om Microsoft Office-versionen är större än eller lika med 9, vilket motsvarar Microsoft Office 2000. |(IE) villkor kontrollerar om klienten är Internet Explorer, som ofta används av Microsoft Outlook.

HTML-e-post med Retina Display-optimerade bilder

Här är ett exempel på en responsiv HTML-e-postkod som visar en bild med en upplösning som är optimerad för näthinnaskärmar:

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

Här är några ytterligare tips om hur du optimerar dina HTML-e-postmeddelanden för bilder som är optimerade för Retina-skärmar:

  • Se till att alltid ha dina bildtaggar med att använda alt text för att ge bilden ett sammanhang.
  • Optimera bilder för webben för att minska filstorleken utan att kompromissa med bildkvaliteten. Detta kan innefatta att använda bildkomprimering verktyg, minska antalet färger som används i bilden och ändra storlek på bilden till dess optimala mått innan du laddar upp den till e-postmeddelandet.
  • Undvik stora bakgrundsbilder som kan sakta ner laddningstider för e-post.
  • Animerade GIF-filer kan vara större i filstorlek än statiska bilder på grund av de flera bildrutor som behövs för att skapa animeringen, se till att hålla dem långt under 1 Mb.

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.