E-pasta mārketings un automatizācija

Kā HTML e-pastā izmantot augstas izšķirtspējas attēlus tīklenes displejiem

Retina displejs ir mārketinga termins, ko lieto Manzana lai aprakstītu augstas izšķirtspējas displeju, kura pikseļu blīvums ir pietiekami augsts, lai cilvēka acs nespēj atšķirt atsevišķus pikseļus tipiskā skatīšanās attālumā. Tīklenes displeja pikseļu blīvums parasti ir 300 pikseļi collā (ppi) vai augstāks, kas ir ievērojami augstāks nekā standarta displejs ar pikseļu blīvumu 72 ppi.

Retina displeji tagad ir diezgan plaši izplatīti displejos, klēpjdatoros, mobilajās ierīcēs un planšetdatoros. Daudzi ražotāji tagad piedāvā augstas izšķirtspējas displejus ar pikseļu blīvumu, kas atbilst vai pārsniedz Apple Retina displeju blīvumu.

CSS, lai parādītu augstākas izšķirtspējas attēlu tīklenes displejam

Varat izmantot šādu CSS kodu, lai ielādētu augstas izšķirtspējas attēlu Retina displejam. Šis kods nosaka ierīces pikseļu blīvumu un ielādē attēlu ar @ 2x sufikss Retina displejiem, vienlaikus ielādējot standarta izšķirtspējas attēlu citiem displejiem.

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

Vēl viena pieeja ir izmantot vektorgrafiku vai SVG attēlus, kurus var mērogot līdz jebkurai izšķirtspējai, nezaudējot kvalitāti. Šeit ir piemērs:

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

Šajā piemērā SVG kods ir iegults tieši HTML e-pastā, izmantojot <svg> tagu. The viewBox atribūts nosaka SVG attēla izmērus, savukārt xmlns atribūts norāda XML nosaukumvietu SVG.

Jūsu darbs IR Klientu apkalpošana max-width īpašums ir iestatīts uz div elements, lai nodrošinātu, ka SVG attēls automātiski mērogojas, lai tas atbilstu pieejamajai vietai, šajā gadījumā maksimālajam platumam 300 pikseļi. Šī ir labākā prakse, lai nodrošinātu, ka SVG attēli tiek pareizi parādīti visās ierīcēs un e-pasta klientos.

Piezīme: SVG atbalsts var atšķirties atkarībā no e-pasta klienta, tāpēc ir svarīgi pārbaudīt savu e-pastu vairākos klientos, lai nodrošinātu, ka SVG attēls tiek parādīts pareizi.

Vēl viens veids, kā kodēt HTML e-pastus Retina displejiem, ir izmantot srcset. Izmantojot atribūtu srcset, varat nodrošināt augstas izšķirtspējas attēlus Retina displejiem, vienlaikus nodrošinot, ka attēli ir atbilstoši izmēriem zemākas izšķirtspējas ierīcēm.

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

Šajā piemērā srcset atribūts nodrošina divus attēlu avotus: image.jpg ierīcēm ar izšķirtspēju 600 pikseļi vai mazāk, un image@2x.jpg ierīcēm ar izšķirtspēju 1200 pikseļi vai vairāk. The 600w un 1200w deskriptori norāda attēlu izmēru pikseļos, kas palīdz pārlūkprogrammai noteikt, kuru attēlu lejupielādēt, pamatojoties uz ierīces izšķirtspēju.

Ne visi e-pasta klienti atbalsta srcset atribūts. Atbalsta līmenis par srcset var ievērojami atšķirties atkarībā no e-pasta klienta, tāpēc ir svarīgi pārbaudīt savus e-pastus vairākos klientos, lai nodrošinātu, ka attēli tiek pareizi parādīti.

HTML attēliem e-pastā, optimizēts tīklenes displejiem

ir iespējams kodēt responsīvu HTML e-pastu, kas pareizi parādīs attēlu ar izšķirtspēju, kas optimizēta tīklenes displejiem. Lūk, kā to izdarīt:

  1. Izveidojiet augstas izšķirtspējas attēlu, kas ir divreiz lielāks par faktisko attēlu, kuru vēlaties parādīt e-pastā. Piemēram, ja vēlaties parādīt 300 × 200 attēlu, izveidojiet 600 × 400 attēlu.
  2. Saglabājiet augstas izšķirtspējas attēlu, izmantojot @ 2x piedēklis. Piemēram, ja jūsu sākotnējais attēls ir image.png, saglabājiet augstas izšķirtspējas versiju kā attēls@2x.png.
  3. Savā HTML e-pasta kodā izmantojiet šo kodu, lai parādītu attēlu:
<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)]> ir nosacīts komentārs, kas tiek izmantots, lai atlasītu noteiktas Microsoft Outlook versijas, kas izmanto Microsoft Word, lai renderētu HTML e-pastus. Microsoft Word HTML renderēšanas programma var ievērojami atšķirties no citiem e-pasta klientiem un tīmekļa pārlūkprogrammām, tāpēc tai bieži ir nepieciešama īpaša apstrāde. The

(gte mso 9) nosacījums pārbauda, ​​vai Microsoft Office versija ir lielāka vai vienāda ar 9, kas atbilst Microsoft Office 2000. |(IE) nosacījums pārbauda, ​​vai klients ir Internet Explorer, ko bieži izmanto Microsoft Outlook.

HTML e-pasts ar tīklenes displeja optimizētajiem attēliem

Tālāk ir sniegts adaptīva HTML e-pasta koda piemērs, kas parāda attēlu tīklenes displejiem optimizētā izšķirtspējā.

<!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 displeja attēla padomi

Šeit ir daži papildu padomi, kā optimizēt HTML e-pasta ziņojumus attēliem, kas optimizēti Retina displejiem.

  • Noteikti vienmēr izmantojiet attēlu tagus alt tekstu, lai attēlam nodrošinātu kontekstu.
  • Optimizējiet attēlus tīmeklim, lai samazinātu faila lielumu, nemazinot attēla kvalitāti. Tas var ietvert izmantošanu attēla kompresija rīkus, samazinot attēlā izmantoto krāsu skaitu un mainot attēla izmērus līdz tā optimālajiem izmēriem pirms tā augšupielādes e-pastā.
  • Izvairieties no lieliem fona attēliem, kas var palēnināt e-pasta ielādes laiku.
  • Animēto GIF failu lielums var būt lielāks nekā statiskiem attēliem, jo ​​animācijas izveidošanai nepieciešami vairāki kadri. Noteikti saglabājiet tos krietni mazāk par 1 Mb.

Douglas Karr

Douglas Karr ir TKO no OpenINSIGHTS un dibinātājs Martech Zone. Duglass ir palīdzējis desmitiem veiksmīgu MarTech jaunuzņēmumu, ir palīdzējis veikt vairāk nekā 5 miljardu dolāru Martech iegādes un ieguldījumu uzticamības pārbaudi, kā arī turpina palīdzēt uzņēmumiem ieviest un automatizēt to pārdošanas un mārketinga stratēģijas. Douglas ir starptautiski atzīts digitālās transformācijas un MarTech eksperts un runātājs. Duglass ir arī publicēts Dummie rokasgrāmatas un biznesa vadības grāmatas autors.

Saistītie raksti

Atpakaļ uz augšu pogu
aizvērt

Reklāmu bloķēšana konstatēta

Martech Zone var nodrošināt jums šo saturu bez maksas, jo mēs gūstam peļņu no savas vietnes, izmantojot ieņēmumus no reklāmām, saistīto uzņēmumu saites un sponsorēšanu. Būsim pateicīgi, ja, apskatot mūsu vietni, noņemtu savu reklāmu bloķētāju.